Page 1 of 1
How do I add font color inline for a few words?
Posted: Tue Mar 02, 2021 3:41 am
by 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?
Re: How do I add font color inline for a few words?
Posted: Tue Mar 02, 2021 7:59 pm
by 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
Re: How do I add font color inline for a few words?
Posted: Tue Mar 02, 2021 9:13 pm
by 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!!