Aleksandra Aleksandra - 4 months ago 4
HTML Question

How to make a different font in a tag inside another tag in XSL style sheet?

How can I apply a different font in an XSL for the XML looking like this

<text> sometext <citation> somecitation </citation> sometext </text>


so the citation content should be in a different font as just text.

so this is the part of my XML

<text>
She flipped her bed over and found invisible alligators all over her room.
<citation>
What's going on here?
<citation>
she demanded.
</text>


I wrote a code
<xsl:template match="text">
<p>
<xsl:value-of select="text()"/>
<q>
<xsl:value-of select="citation/text()"/>
</q>
</p>

(q stands for italic in CSS)
What I want to get :
She flipped her bed over and found invisible alligators all over her room.
"What's going on here?" she demanded.

What I get for now : She flipped her bed over and found invisible alligators all over her room.she demanded. "What's going on here?"

how can I proceed to get correct result?

Thank you!

Answer

First, the default styling applied by the browser should be quite sufficient - provided you use the correct HTML tags.

Given the following input:

XML

<text>She flipped her bed over and found invisible alligators all over her room. <citation> What's going on here? </citation> she demanded. </text>

the following stylesheet:

XSLT 1.0

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <html>
        <body>
            <xsl:apply-templates/>
        </body>
    </html>
</xsl:template>

<xsl:template match="text">
    <p>
        <xsl:apply-templates/>
    </p>
</xsl:template>

<xsl:template match="citation">
    <cite>
        <xsl:apply-templates/>
    </cite>
</xsl:template>

</xsl:stylesheet>

will return:

<html>
   <body>
      <p>She flipped her bed over and found invisible alligators all over her room. <cite> What's going on here? </cite> she demanded. 
      </p>
   </body>
</html>

which most any browser will render as:

enter image description here


If you don't like or don't trust the browser defaults, you can specify your own style, for example:

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <html>
        <body>
            <xsl:apply-templates/>
        </body>
    </html>
</xsl:template>

<xsl:template match="text">
    <p>
        <xsl:apply-templates/>
    </p>
</xsl:template>

<xsl:template match="citation">
    <span style="font-style: italic;">
        <xsl:apply-templates/>
    </span>
</xsl:template>

</xsl:stylesheet>

Or:

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <html>
        <head>
            <style>
                q {
                    font-style: italic;;
                }
            </style>
        </head>
        <body>
            <xsl:apply-templates/>
        </body>
    </html>
</xsl:template>

<xsl:template match="text">
    <p>
        <xsl:apply-templates/>
    </p>
</xsl:template>

<xsl:template match="citation">
    <q>
        <xsl:apply-templates/>
    </q>
</xsl:template>

</xsl:stylesheet>
Comments