Page 1 of 1

CSS selector for stepresult element margins

Posted: Mon Mar 11, 2019 12:22 pm
by davenz
Hi all,

I'm using Oxygen XML Editor 21 to publish PDF output using the DITA Map PDF - based on HTML5 & CSS transformation type. I've noticed that stepresult elements in tasks have a lack of vertical margin. I've had a good look, but I can't identify the relevant CSS selector to apply custom styles specifically to a stepresult.

Can anyone point me in the right direction?

I see a similar request a few years back in DITA-OT (https://github.com/dita-ot/dita-ot/issues/1331).

Thanks,
Dave

Re: CSS selector for stepresult element margins

Posted: Mon Mar 11, 2019 1:46 pm
by Costin
Hi Dave,

Indeed, it seems that the DITA-OT chose to print the content of the <stepresult/> elements this way, without actually differentiating it from the step.
However, you could add a margin through your own CSS.

Just use a customization .css file (that you can set through the "args.css" parameter) in the "Parameters" tab of the" DITA Map PDF - based on HTML5 &
CSS" scenario configuration dialog. Your customization CSS should contain a CSS rule to add a margin, like:

Code: Select all

*[class~="stepresult"]{
margin-top:10px;
}
Also through a CSS customization, you could add a label. For example:

Code: Select all

*[class~="stepresult"]::before{
padding-right: 15px;
content:"Result:";
text-align:left;
font-weight: bold;
}
Hope this helps!
Costin

Re: CSS selector for stepresult element margins

Posted: Tue Mar 12, 2019 12:19 am
by davenz
Hi Costin,

That worked perfectly, thanks!

Dave