Pages: 1
Print
Author Topic: Syntax Diagram Element Output in Red ?  (Read 1449 times)
Jen
Member

Posts: 4


« on: April 08, 2016, 03:45:10 AM »

Hi Guys,
When trying to use the Syntax Diagram Element the output is a red/brown colour. I am wondering why this is and if there is a way to change it.
Thanks,
Jen
« Last Edit: April 12, 2016, 12:57:36 PM by Derek Read » Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2513



WWW
« Reply #1 on: April 11, 2016, 02:10:43 PM »

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

<div style="display: block; border: 1 black solid; padding: 2pt; color: maroon; margin-bottom: 6pt;">
        <h3>CopyFile</h3>
         <kbd><b>COPYF</b></kbd>  
         <var>input-filename</var><kbd><b>*INFILE</b></kbd>  
         <var>output-filename</var><kbd><b>*OUTFILE</b></kbd>  
         {  
          <var>input-filename</var>
          <kbd><b> | *INFILE</b></kbd> }  
         {  
          <var>output-filename</var>
          <kbd><b> | *OUTFILE</b></kbd> }  
      </div>


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 <div>. 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 <syntaxdiagram> 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:
<syntaxdiagram outputclass="custom_syntaxdiagram">
 <title>CopyFile</title>
 <groupseq><kwd>COPYF</kwd></groupseq>
 <groupcomp><var>input-filename</var><kwd>*INFILE</kwd></groupcomp>
 <groupseq><var>output-filename</var><kwd>*OUTFILE</kwd></groupseq>
 <groupchoice> <var>input-filename</var> <kwd>*INFILE</kwd></groupchoice>
 <groupchoice> <var>output-filename</var> <kwd>*OUTFILE</kwd></groupchoice>
</syntaxdiagram>


Then (in theory) you would see this (perhaps without the hard-coded CSS if that was also corrected) in the output:
      <div class="custom_syntaxdiagram" style="display: block; border: 1 black solid; padding: 2pt; color: maroon; margin-bottom: 6pt;">
        <h3>CopyFile</h3>
         <kbd><b>COPYF</b></kbd>  
         <var>input-filename</var><kbd><b>*INFILE</b></kbd>  
         <var>output-filename</var><kbd><b>*OUTFILE</b></kbd>  
         {  
          <var>input-filename</var>
          <kbd><b> | *INFILE</b></kbd> }  
         {  
          <var>output-filename</var>
          <kbd><b> | *OUTFILE</b></kbd> }  
      </div>


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
« Last Edit: April 12, 2016, 05:45:06 PM by Derek Read » Logged
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 2513



WWW
« Reply #2 on: April 11, 2016, 02:50:02 PM »

For approach #1 you would need to modify this file:

%programdata%\SoftQuad\XMetaL\Shared\<dita ot version>\plugins\org.dita.xhtml\xsl\xslhtml\syntax-braces.xsl

Replace <dita ot version> with the version of the DITA OT you are using. In some versions of XMetaL Author Enterprise multiple versions of the DITA OT are included. Look at the output log file to check the path of the one being run. Look for "DITA OT path".

On most Windows installations the %programdata% environment variable points to C:\Program Data.
On most Windows installations that folder is hidden by default.

Do this carefully. Create a copy of any file you modify so you can easily restore it.

The offending line in the XSLT file is as follows:

<xsl:template match="*[contains(@class,' pr-d/syntaxdiagram ')]">
   <div style="display: block; border: 1 black solid; padding: 2pt; color: maroon; margin-bottom: 6pt;">
...don't touch anything else...


There's the hard-coded blob of CSS styling that is causing the "maroon" colouring.
Change it to remove that blob and include a class attribute instead and you should be good to go (or at least perhaps with the help of the person designing the CSS files used on your website). I'd recommend something like this (but check with the website person to see what they prefer):

<xsl:template match="*[contains(@class,' pr-d/syntaxdiagram ')]">
   <div class="syntaxdiagram">
...don't touch anything else...


If you make that change and don't see that class attribute in the HTML output (and output isn't broken) then you have probably modified the wrong copy of the DITA OT.

You should see this in the HTML (unless you chose to make a different change of course):
<div class="syntaxdiagram">

So how did I find this XSLT file?
I used the Find in Files feature in Notepad++ to search all the XSLT files (*.xsl) inside the DITA OT location looking for the word "maroon" (which as it turns out is only used once). This is a good approach in this case as that word is unlikely to have been generated from a variable or something else. I could also have searched for any other portion of the HTML markup that is likely to be unique (values, not elements or attributes). Or I could have searched for the DITA element name "syntaxdiagram" as it was likely to appear in one of the XSLT templates as was the case here. That will not always give good results however, as sometimes a template match is performed on a parent element and not the element you are directly interested in.

Keep in mind that if you move to a newer version of XMetaL Author Enterprise (and you are using the DITA OT that it installs) then you should check to see if this change is still needed in the new version of the DITA OT included.
« Last Edit: April 11, 2016, 03:00:42 PM by Derek Read » Logged
Pages: 1
Print
Jump to:  

email us