Reply To: Syntax Diagram Element Output in Red ?

[Derek Read]

[Topic moved from: General XMetaL Discussion]

Taking a few guesses here.

Are you using XMetaL Author Enterprise to author DITA documents?
Are you generating output using the DITA Open Toolkit (either included with XMetaL Author Enterprise or perhaps running elsewhere) to generate one of the HTML outputs?

[I'm also testing with DITA OT version 2.0 included with XMetaL Author Enterprise 10. Depending on which version of XMetaL Author Enterprise you have you may have that version or a different version of the DITA OT. Or you might be generating output using a version of the DITA OT you run via some other process, perhaps as part of a CMS integration, something one of our partners has set up, etc.

I suspect the most likely reason it appears “red/brown” is because the DITA OT creates the following HTML markup, which for some reason includes embedded CSS:

color: maroon; margin-bottom: 6pt;">
 

CopyFile

  COPYF  
  input-filename*INFILE  
  output-filename*OUTFILE  
  {  
input-filename
| *INFILE }  
  {  
output-filename
| *OUTFILE }  

Is this your issue?

If so, there are a few solutions:

1. Change the DITA Open Toolkit's XSLT so that it produces different markup when outputting HTML for this element. If you were to do this I think I'd remove the hard-coded CSS and set a class attribute instead. It would then default to inheriting the parent element's text color, but you could also easily style that HTML markup using that CSS selector.

2. Add a simple selector with appropriate CSS to the CSS file associated with this HTML that makes everything black (if that's what you want). As written here it will affect all elements within any

. Perhaps that is what you want. You would need to try it to see if this is good enough for you:
div * {
color: black;
}

If not, perhaps something slightly more complex will do it. I'd check with your website designer to see as they might already be styling various things in the HTML output various other ways.

3. Add an @outputclass to the DITA markup's element so that value appears in the output. That would give you something to match on for a selector in the CSS. From what I can tell this is broken however, so if you want to take this approach in future I would recommend filing a bug report with the DITA Open Toolkit project letting them know about this limitation.

If it did work you could have something like this in the DITA markup:
outputclass="custom_syntaxdiagram">

COPYF
input-filename*INFILE
output-filename*OUTFILE
input-filename *INFILE
output-filename *OUTFILE

Then (in theory) you would see this (perhaps without the hard-coded CSS if that was also corrected) in the output:

class="custom_syntaxdiagram" style="display: block; border: 1 black solid; padding: 2pt; color: maroon; margin-bottom: 6pt;">
 

CopyFile

  COPYF  
  input-filename*INFILE  
  output-filename*OUTFILE  
  {  
input-filename
| *INFILE }  
  {  
output-filename
| *OUTFILE }  

Then your CSS selector would be simply as follows and you could easily style it anyway you like:
.custom_syntaxdiagram {
color: black;
}

That would add slightly to the complexity of writing your DITA documents as you would need to set the outputclass attribute for any of these elements that you want to style differently from the default output styling the DITA OT produces.

To check on bugs and submit them to the DITA Open Toolkit Project have a look here: https://github.com/dita-ot/dita-ot/issues

Reply