CSS selector for stepresult element margins

Post here questions and problems related to editing and publishing DITA content.
davenz
Posts: 26
Joined: Mon Mar 11, 2019 11:53 am

CSS selector for stepresult element margins

Post 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
Costin
Posts: 828
Joined: Mon Dec 05, 2011 6:04 pm

Re: CSS selector for stepresult element margins

Post 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
Costin Sandoi
oXygen XML Editor and Author Support
davenz
Posts: 26
Joined: Mon Mar 11, 2019 11:53 am

Re: CSS selector for stepresult element margins

Post by davenz »

Hi Costin,

That worked perfectly, thanks!

Dave
Post Reply