How do I add font color inline for a few words?

[toolie]

Hi there, I need to add some inline font color to a short phrase as a reminder to reviewers to confirm the facts in question. They do not have authoring access, so I need the font color to show up in the OUTPUT.

If this was HTML, I'd do something like this:

In my CSS file

Code: Select all

<style>
.red {color:red;}
</style>

In the document,

Code: Select all

<p> The cycle continues for <span class="red">4 hours.</span>

... where "4 hours" is the issue in question. My reviewers would see the red text and know that's an issue.

How do I replicate the above in XML in your XML Editor?

[alin]

Hello,

In the DITA topic you can use the @outputclass attribute on a DITA element to generate a custom class on the associated HTML element in the WebHelp output.
For example, the following DITA content:

Code: Select all

<p>And above all, <ph outputclass="red">remember</ph> that many flower gardens fail because they just don't get enough of your attention.</p>

will generate the following HTML content:

Code: Select all

<p class="- topic/p p">And above all, <span class="- topic/ph ph red">remember</span> that many flower gardens fail because they just don't get enough of your attention.</p>

Note that the red value of the @outputclass attribute on the <ph> DITA element was generated in the @class attribute of the associated <span> HTML element.
Moreover, you can contribute custom CSS styles to the WebHelp Responsive output using the procedure described here: https://www.oxygenxml.com/doc/versions/ ... h-css.html

The DITA source and the custom CSS used to style the output:


The WebHelp output sample:



Regards,
Alin

[toolie]

Thank you Alin for your quick response.

• I have 2 CSS files included in my .OPT file that have successfully produced the styles I want throughout my WebHelp Responsive template, but until now I had not needed a way to temporarily flag a word or two for review purposes.
• I did not know about the outputclass attribute, so that's really good to know. Once I fixed up the CSS in my file, your solution worked like a charm.

Thank you!!