Oxygen XML Forum

Posted: **Fri Jun 07, 2024 4:58 pm**

Hi,
In our documentation we are using two two ways of images in our topics: one for general screenshots (placement=break) and one for icons/buttons (placement=inline).

Now, for the 1. scenario we have specified in our CSS

Code: Select all

.image {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    }

Like this, the images are not stuck directly under or above certain text elements.
But now I would like to address both scenarios with different CSS rules by using their attribute.
However, the HTML5 output doesn't recognize the attribute, hence the following CSS will not apply to the images:

Code: Select all

*[class~='topic/image'][placement='break'] {   
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

*[class~='topic/image'][placement='inline'] {
    display : inline ;
    vertical-align: baseline;
}

How can I achieve that this differentiation in both my image types?

Thanks,
Josie

Posted: **Tue Jun 11, 2024 10:40 am**

Hi Josie,

The placement attribute has no equivalent in HTML (see <img> specification) so it is not copied into the output. Instead you can use the outputclass attribute which is copied into the element class.
FInally you need to match the additional class value into your CSS:

Code: Select all

*[class ~= 'topic/image'][class ~= "placement-break"] {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

*[class ~= 'topic/image'] {
  vertical-align: baseline;
}

I removed the display property as it is the default image display anyway.

Regards,
Julien

Oxygen XML Forum

Element attributs specified in CSS are not triggered in Webhelp Responsive output

Element attributs specified in CSS are not triggered in Webhelp Responsive output

Re: Element attributs specified in CSS are not triggered in Webhelp Responsive output