Move XML attributes to style="" in HTML files - html

Question

I need to replace standalone attributes width="<>" and height="<>" with style="width:<>; height:<>;.
A typical input is the following
<img width="32pt" alt="PIC" class="graphics" height="32pt" src="images/about.png"/>
Thus the result should be
<img style="width:32pt; height:32pt;" alt="PIC" class="graphics" src="images/about.png"/>
The problem is that I've never worked with xsl before.
What I know, as far, is that
this can catch the img element
<xsl:template match="xh:img">
this can catch the width attribute
<xsl:template match="#width">
and I know how to add an attribute or element.
But I don't know how to store the value of the width and height and write both in a single line.
Any help would be appreciated.

Answer 1

You could use:
<xsl:template match="img">
<img style="width:{#width}; height:{#height};">
<xsl:copy-of select="#*[not(name()='width' or name()='height')]"/>
</img>
</xsl:template>
This is assuming every img has both width and height attributes, and no child nodes. If your source XML places the img elements in a namespace (not shown in your question), add the appropriate prefix to the template's match pattern.
For reference, see: https://www.w3.org/TR/xslt/#attribute-value-templates

Answer 2

You (or other readers) may be interested in this more general (XSLT 2.0) solution taken from a production stylesheet:
<xsl:template name="style-attributes">
<xsl:choose>
<xsl:when test="#style | #class">
<xsl:copy-of select="#style | #class"/>
</xsl:when>
<xsl:when test="#*[f:is-style-attribute(.)]">
<xsl:attribute name="style">
<xsl:for-each select="#*[f:is-style-attribute(.)]">
<xsl:if test="position() gt 1">; </xsl:if>
<xsl:apply-templates select="." mode="style-attribute"/>
</xsl:for-each>
</xsl:attribute>
</xsl:when>
</xsl:choose>
</xsl:template>
<xsl:function name="f:is-style-attribute" as="xs:boolean">
<xsl:param name="att" as="attribute(*)"/>
<xsl:variable name="n" select="local-name($att)"/>
<xsl:sequence select="namespace-uri($att) = '' and $n = ('class', 'style', 'border', 'width', 'cellspacing', 'padding', 'cellpadding', 'align', 'valign')"/>
</xsl:function>
<xsl:function name="f:units" as="xs:string">
<xsl:param name="value" as="xs:string"/>
<xsl:sequence select="if ($value castable as xs:integer) then concat($value, 'px') else $value"/>
</xsl:function>
<xsl:template match="#border" mode="style-attribute">border:<xsl:value-of select="f:units(.)"/> solid</xsl:template>
<xsl:template match="#width" mode="style-attribute">width:<xsl:value-of select="f:units(.)"/></xsl:template>
<xsl:template match="#align" mode="style-attribute">text-align:<xsl:value-of select="."/></xsl:template>
<xsl:template match="#valign" mode="style-attribute">vertical-align:<xsl:value-of select="."/></xsl:template>
<xsl:template match="#cellspacing" mode="style-attribute">border-spacing:<xsl:value-of select="."/></xsl:template>
<xsl:template match="#padding" mode="style-attribute">padding:<xsl:value-of select="f:units(.)"/></xsl:template>
<xsl:template match="#cellpadding" mode="style-attribute">padding:<xsl:value-of select="f:units(.)"/></xsl:template>
... etc (as required)