XSL:FO How do I add color to the <span> elements inside of the <p> element

Question

Question: How can I add color to the span elements using xsl:fo?

Assume that I have a document with paragraph blocks that look like this:

<?xml version="1.0" encoding="UTF-8"?>
<diffreport><css/><diff>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. 
<span style="background-color:rgb(255, 255, 255); color:rgb(102, 102, 102)"><span class="diff-html-added" id="added-diff-0" previous="first-diff" changeId="added-diff-0" next="added-diff-1">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</span></span>
</p>
</diff></diffreport>

I have created an xsl:fo template file that looks like this.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:s="http://www.stylusstudio.com/xquery">
<xsl:template match="/">
    <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
        <fo:layout-master-set>
            <fo:simple-page-master master-name="default-page" page-height="11in" page-width="8.5in" margin-left="0.6in" margin-right="0.6in" margin-top="0.79in" margin-bottom="0.79in">
                <fo:region-body/>
            </fo:simple-page-master>
        </fo:layout-master-set>
        <fo:page-sequence master-reference="default-page">
            <fo:flow flow-name="xsl-region-body">
                <fo:block>
                    <fo:block text-align="center">
                        <fo:block>
                            <xsl:text>Report</xsl:text>
                        </fo:block>
                    </fo:block>
                    <fo:table width="100%" border-style="outset" border-width="2pt" background-repeat="repeat">
                        <fo:table-column/>
                        <fo:table-body>
                            <fo:table-row>
                                <fo:table-cell border-style="inset" border-width="2pt" padding="2pt" background-repeat="repeat" display-align="center">
                                    <fo:block>
                                        <xsl:text>Document</xsl:text>
                                    </fo:block>
                                </fo:table-cell>
                            </fo:table-row>
                            <fo:table-row>
                                <fo:table-cell border-style="inset" border-width="2pt" padding="2pt" background-repeat="repeat" display-align="center">
                                    <fo:block>
                                        <xsl:apply-templates/>
                                    </fo:block>
                                </fo:table-cell>
                            </fo:table-row>
                        </fo:table-body>
                    </fo:table>
                </fo:block>
            </fo:flow>
        </fo:page-sequence>
    </fo:root>
</xsl:template>
<xsl:template match="span[@class='diff-html-added']">
    <span style="color:green; background-color: #ccffcc;">
    <xsl:value-of select="."/></span>
</xsl:template>
<xsl:template match="span[@class='diff-html-removed']">
        <span style="color:red; text-decoration: line-through; background-color: #fdc6c6;">
        <xsl:value-of select="."/></span>
</xsl:template>
<xsl:template match="span[@class='diff-html-added']" mode="clean"/>
<xsl:template match="span[@class='diff-html-removed']" mode="clean"/>

The report is working but for some reason this xsl template that I have added to include red and green coloring in the elements is not working for me because it is not displaying.

<xsl:template match="span[@class='diff-html-added']">
    <span style="color:green; background-color: #ccffcc;">
    <xsl:value-of select="."/></span>
</xsl:template>

What do I need to do to fix my xsl template so that the span elements will appear as green or red?

Answer 1

Your stylesheet is trying to output a "span" element when it should output an fo:inline element. It also is trying to output CSS attribute style when it needs to output XSL FO equivalents.

Adding the FO namespace:

<xsl:stylesheet version="1.0" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:s="http://www.stylusstudio.com/xquery">

and changing your templates to this:

    <xsl:template match="span[@class='diff-html-added']">
    <fo:inline color="green" background-color="#ccffcc">
        <xsl:value-of select="."/></fo:inline>
</xsl:template>
<xsl:template match="span[@class='diff-html-removed']">
    <fo:inline color="red" text-decoration="line-through" background-color="#fdc6c6">
        <xsl:value-of select="."/></fo:inline>
</xsl:template>

Yields this output: