HTML5: Missing class attributes when using `args.html5.classattr=no`

[hhermann]

In HTML5 the CSS class attributes msgblock, filepath, uicontrol, userinput (...) are missing if and only if using args.html5.classattr=no.

Steps to Reproduce

1. Create the file sample.dita:

<!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">
<concept id="t1">
    <title>Topic 1</title>
    <conbody>
        <codeblock>System.out.println("Hello World!");</codeblock>
        <msgblock>Access denied!</msgblock>
        <p>Open <filepath>/path/to/file.ext</filepath>.</p>
        <p>Execute <codeph>cd /home/demo</codeph> to change to the demo directory.</p>
        <p>A <keyword>keyword</keyword> or token.</p>
        <p>When a Java error occurs, a message such as this one is displayed:
            <systemoutput>Exception in thread "main" java.lang.OutOfMemoryError:
                Java heap space</systemoutput>.</p>
        <p>
            <menucascade>
                <uicontrol>Start</uicontrol>
                <uicontrol>Programs</uicontrol>
                <uicontrol>Accessories</uicontrol>
                <uicontrol>Notepad</uicontrol>
            </menucascade>.
        </p>
        <p>When prompted to delete the file, type <userinput>yes</userinput>.
        to be defined in its glossary entry.</p>
        <p>Click <uicontrol>OK</uicontrol>.</p>
        <p>The file is stored in
            <filepath>
                <varname>project-folder</varname>
                /temp/cache.txt
            </filepath>.</p>
        <p>The <wintitle>Page Setup</wintitle> dialog opens.</p>
    </conbody>
</concept>

2. Run dita-ot: dita -f html5 -i sample.dita -Dargs.html5.classattr=no

Expected Behavior

With 3.6.1 the class attributes are present.

...
<pre class="msgblock">Access denied!</pre>
<p>Open <span class="filepath">/path/to/file.ext</span>.</p>
<p>Execute <code>cd /home/demo</code> to change to the demo directory.</p>
<p>A <span class="keyword">keyword</span> or token.</p>
<p>When a Java error occurs, a message such as this one is displayed:
    <samp class="sysout">Exception in thread "main" java.lang.OutOfMemoryError:
        Java heap space</samp>.</p>
<p>
    <span class="menucascade"><span class="uicontrol">Start</span><abbr title="and then"> &gt; </abbr><span class="uicontrol">Programs</span><abbr title="and then"> &gt; </abbr><span class="uicontrol">Accessories</span><abbr title="and then"> &gt; </abbr><span class="uicontrol">Notepad</span></span>.
</p>
<p>When prompted to delete the file, type <kbd class="userinput">yes</kbd>.
    to be defined in its glossary entry.</p>
<p>Click <span class="uicontrol">OK</span>.</p>
<p>The file is stored in
    <span class="filepath">
        <var class="varname">project-folder</var>
        /temp/cache.txt
    </span>.</p>
<p>The <span class="wintitle">Page Setup</span> dialog opens.</p>
...

Actual Behavior

With 4.0.1 the class attributes are missing.

...
<pre>Access denied!</pre>
<p>Open <span>/path/to/file.ext</span>.</p>
<p>Execute <code>cd /home/demo</code> to change to the demo directory.</p>
<p>A <span class="keyword">keyword</span> or token.</p>
<p>When a Java error occurs, a message such as this one is displayed:
    <samp class="sysout">Exception in thread "main" java.lang.OutOfMemoryError:
        Java heap space</samp>.</p>
<p>
    <span><span>Start</span><abbr title="and then"> &gt; </abbr><span>Programs</span><abbr title="and then"> &gt; </abbr><span>Accessories</span><abbr title="and then"> &gt; </abbr><span>Notepad</span></span>.
</p>
<p>When prompted to delete the file, type <kbd>yes</kbd>.
    to be defined in its glossary entry.</p>
<p>Click <span>OK</span>.</p>
<p>The file is stored in
    <span>
        <var>project-folder</var>
        /temp/cache.txt
    </span>.</p>
<p>The <span>Page Setup</span> dialog opens.</p>
...

[chrispy-snps]

What is the precise definition of what args.html5.classattr=no should do? For example, if I publish the following with -f html5 -Dargs.html5.classattr=no:

<codeblock>1</codeblock>
<msgblock>2</msgblock>
<p><systemoutput>3</systemoutput></p>

I get the following HTML in DITA-OT 3.6.1:

<pre><code>1</code></pre>
<pre class="msgblock">2</pre>
<p><samp class="sysout">3</samp></p>

and the following in DITA-OT 4.0.1:

<pre><code>1</code></pre>
<pre>2</pre>
<p><samp class="sysout">3</samp></p>

Why doesn't <p> have a @class value? Why doesn't <codeblock> have a @class attribute in 3.6.1? Why does <systemoutput> have a @class value that differs from its element name?

[jelovirt]

It seems args.html5.classattr has not been implemented everywhere. If you specify no value, you should not get any class attributes in HTML5 output (unless you've used outputclass in your DITA source). So IMO the DITA-OT 4.x output is more correct, but there are still places where that should be fixed, e.g. in systemoutput and keyword.

[robander]

This option is rather ancient and dates back to the early XHTML transform - it was ported over to HTML5 due to the original shared code base, but I suspect that no developer since has explicitly set out to work with it. The original goal was to reduce file size for extremely large data sets that had to be shared on media like a CD ROM or USB drive. As I remember it, the original goal was to remove all optional class values that are not critical for styling - so that for example, we'd keep styling that makes your codeph monospace, but drop class="p" from paragraphs.

[jelovirt]

@robander so how should this be fixed? Remove class attributes from HTML5 output, or try to revert the old behavior?

[hhermann]

From the parameter name it makes sense if you specify no value to not get any class attributes in HTML5 output. We would appreciate if there is the possibility to have less verbose class attribute values (old behavior). We have 5000+ topics in one documentation release and 1GB or HTML and graphics output. Even though the documentation is not distributed on DVDs anymore we still want to keep our package sizes to a minimum for a fast CI build and final distribution.

What about ...

• args.html5.classattr="yes" - No change. The default value, as currently adds the DITA element name and class name in HTML the class attribute. In total very verbose but offers the most flexibility for styling.
• args.html5.classattr="no" - Change to add the class attribute only if necessary, for example on inline elements like uicontrol to differ the HTML span element but no class attribute on elements that can be differed by their name like p or section element (unless outputclass is specified).
• outputclass="..." - No change. Adds the specified value in the HTML class attribute for more flexibility in styling the output.

[chrispy-snps]

I would also like args.html5.classattr="no" to generate minimal-but-sufficient @class values that unambiguously indicate the DITA element origins.

[robander]

I think less verbose but keeping the important ones is ideal -- the original purpose of the option was to reduce file size without impacting the default look and feel, so we should not drop class attributes that are actually picked up by our out-of-the-box CSS.

(I think -- but really cannot remember for sure -- that this might be why some of the older "common attributes" templates send in a default class name that matches the element. Not sure here. But I think that let us drop the "generate list of element names" while ... keeping that element name because it was considered important.)