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

Post here questions and problems related to editing and publishing DITA content.
jrehahn
Posts: 1
Joined: Fri Aug 19, 2022 10:53 am

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

Post by 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
Posts: 543
Joined: Wed Oct 16, 2019 3:47 pm

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

Post by 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
Post Reply