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

[jrehahn]

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

[julien_lacour]

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