CSS selector for stepresult element margins

davenz
Posts: 8
Joined: Mon Mar 11, 2019 11:53 am

CSS selector for stepresult element margins

Post by davenz » Mon Mar 11, 2019 12:22 pm

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

Costin
Posts: 670
Joined: Mon Dec 05, 2011 6:04 pm

Re: CSS selector for stepresult element margins

Post by Costin » Mon Mar 11, 2019 1:46 pm

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
Costin Sandoi
oXygen XML Editor and Author Support

davenz
Posts: 8
Joined: Mon Mar 11, 2019 11:53 am

Re: CSS selector for stepresult element margins

Post by davenz » Tue Mar 12, 2019 12:19 am

Hi Costin,

That worked perfectly, thanks!

Dave

Post Reply