Two part steps

[patjporter]

Hello,

The DITA spec seems to only account for one use case for list items where they are expected to be individual steps meaning one action per list item. Example:

<ol>
<li><p>Do this.</p></li>
</ol>

This would publish as:

1. Do this.

However, we use DITA to structure the content for our airplane flight manuals and have two part steps such as:

<ol>
<li><p>Do</p<p>This</p></li>
<li><p>Do</p><p>That</p></li>
</ol>

We currently use FrameMaker and scripting to produce the desired output but I am trying to move towards HTML publishing to PDF or Web with CSS.

The way the scripts handle this is through use of outputclass attributes.

<ol>
<li><p outputclass="challenge">Do</p><p outputclass="response">This</p></li>
<li><p outoutclass="challenge">Do</p><p outputclass="response">That</p></li>
</ol>

Without any publishing rules, I get:
1.
Do
This
2.
Do
That

With our FrameMaker publishing scripts and template:

1. Do.......................This
2. Do.......................That

The script and template basically have rules that if the <p> has an outputclass="challenge" it puts the very next <p> on the same line.
If the next <p> has an outputclass="response" it adds the leader dots and right justifies the response.

Is there a way to do this with the converted HTML in CSS?

Thanks!
Pat

[Radu]

Hi Pat,

Let's say you publish DITA to plain HTML5 output.
All those @outputclass attributes in the DITA content are converted to @class attribute values in the generated HTML5 content.

For example if you have a DITA list like this:

Code: Select all

<ol outputclass="toc">
            <li><p outputclass="challenge">Do</p><p outputclass="response">This</p></li>
            <li><p outputclass="challenge">Do</p><p outputclass="response">That</p></li>
        </ol>

you can create a CSS to generate a flexbox layout for it, I do not know much CSS but I got some inspiration from this post:
https://stackoverflow.com/questions/250 ... ots-in-css

The custom.css would look like this:

Code: Select all

.toc li {
  display: flex;
}

.toc li .challenge {
  order: 1;
}

.toc li .response {
  order: 3;
}

.toc li::after {
  background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
  background-position: bottom;
  background-size: 1ex 4.5px;
  background-repeat: space no-repeat;
  content: "";
  flex-grow: 1;
  height: 1em;
  order: 2;
}

and if you duplicate and edit the Oxygen transformation scenario you are using to publish to HTML5, you can set the "args.css" parameter to refer to your "custom".css, then enable the "args.copycss" parameter to copy the CSS automatically to the output folder.
It's not 100% what you want but maybe you can tinker with it more.

In such cases you can start from the output, open the generated HTML content of the topic in a web browser and see how you can style it with CSS to obtain what you want.

Regards,
Radu