CSS selector for stepresult element margins

[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]

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

[davenz]

Hi Costin,

That worked perfectly, thanks!

Dave