Including specialized attributes in `@class` values of `html5` transformation output #3965

chrispy-snps · 2022-07-09T19:04:37Z

chrispy-snps
Jul 9, 2022

We specialize some custom attribute values from @base, and I wanted to include their values in the html5 transformation output so I could apply CSS styling properties for them.

For example, consider a case where I have @foo and @bar specialized attributes in my DITA source:

<topic id="topic">
  <title>My Topic</title>
  <body>
    <p>This is some text.</p>
    <p foo="FOO">This is some text.</p>
    <p bar="BAR">This is some text.</p>
    <p foo="FOO" bar="BAR">This is some text.</p>
    <p outputclass="abc" foo="FOO" bar="BAR">This is some text.</p>
  </body>
</topic>

How can I pass @foo and @bar through to the HTML5 output?

Answered by chrispy-snps

Jul 9, 2022

If I apply the following template in an XSLT stylesheet that extends the dita.xsl.html5 extension point:

<!-- add specialized @foo and @bar attributes to @class -->
<xsl:template match="*[@foo or @bar]" mode="set-output-class" priority="10">
  <xsl:param name="default"/>
  <xsl:variable name="orig-class" as="attribute(class)">
    <xsl:next-match>
      <xsl:with-param name="default" select="$default"/>  <!-- get the original @class value -->
    </xsl:next-match>
  </xsl:variable>
  <xsl:attribute name="class" select="$orig-class, @foo, @bar" separator=" "/>  <!-- add specialized attribute values -->
</xsl:template>

then I get the following HTML5 output:

<h1 class="title topictitle1">My…

View full answer

chrispy-snps · 2022-07-09T19:06:18Z

chrispy-snps
Jul 9, 2022
Author

If I apply the following template in an XSLT stylesheet that extends the dita.xsl.html5 extension point:

<!-- add specialized @foo and @bar attributes to @class -->
<xsl:template match="*[@foo or @bar]" mode="set-output-class" priority="10">
  <xsl:param name="default"/>
  <xsl:variable name="orig-class" as="attribute(class)">
    <xsl:next-match>
      <xsl:with-param name="default" select="$default"/>  <!-- get the original @class value -->
    </xsl:next-match>
  </xsl:variable>
  <xsl:attribute name="class" select="$orig-class, @foo, @bar" separator=" "/>  <!-- add specialized attribute values -->
</xsl:template>

then I get the following HTML5 output:

<h1 class="title topictitle1">My Topic</h1>
<div class="body">
  <p class="p">This is some text.</p>
  <p class="p FOO">This is some text.</p>
  <p class="p BAR">This is some text.</p>
  <p class="p FOO BAR">This is some text.</p>
  <p class="p abc FOO BAR">This is some text.</p>
</div>

and now I can apply CSS formatting:

.FOO { background-color: lightgreen; }
.BAR { background-color: lightblue; }

Here is a testcase you can experiment with: ditaot_atts_in_outputclass.zip

To try it, extract it and run the following commands:

# install the plugins
dita install com.synopsys.myatts.zip
dita install com.synopsys.html5.zip

# run the transformation
dita --project project.xml

# examine the output
cat out/topic.html

# uninstall the plugins
dita uninstall com.synopsys.myatts
dita uninstall com.synopsys.html5

0 replies

raducoravu · 2022-07-11T02:50:58Z

raducoravu
Jul 11, 2022
Collaborator

As an alternative if your attributes were specialized from @props you could have stated in the ditaval file that you want them to pass through:

 <val>
   <prop action="passthrough" att="foo"/>
  </val>

and they would have been passed as "data-foo" attributes in the resulting HTML.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DITA-OT

Including specialized attributes in `@class` values of `html5` transformation output #3965

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

DITA-OT

Including specialized attributes in @class values of html5 transformation output #3965

chrispy-snps Jul 9, 2022

Replies: 2 comments

chrispy-snps Jul 9, 2022 Author

raducoravu Jul 11, 2022 Collaborator

Including specialized attributes in `@class` values of `html5` transformation output #3965

chrispy-snps
Jul 9, 2022

chrispy-snps
Jul 9, 2022
Author

raducoravu
Jul 11, 2022
Collaborator