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

toolie
Posts: 25
Joined: Thu Jan 29, 2015 2:40 am

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

Post by toolie » Tue Mar 02, 2021 3:41 am

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?
Toolie Garner

alin
Site Admin
Posts: 201
Joined: Thu Dec 24, 2009 11:21 am

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

Post by alin » Tue Mar 02, 2021 7:59 pm

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:
Image

The WebHelp output sample:
Image


Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

toolie
Posts: 25
Joined: Thu Jan 29, 2015 2:40 am

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

Post by toolie » Tue Mar 02, 2021 9:13 pm

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!!
Toolie Garner

Post Reply