Outputting HTML

Right let’s get our stylesheet to output something useful. The first thing to do is to actually get it to output an html document rather than just text. We do this by matching the root element of our input document.


<!-- We match the root node and set up the html and our css-->
<xsl:template match="/">

	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:mbp="http://www.amazon.com">
		<head>
			<style>
			.Novel-FrontMatter-Title {font-size:200%; font-weight:bold; text-align:center;}
			.Novel-FrontMatter-Author {text-align:center; }
			.Novel-FrontMatter-Copyright {margin-bottom:5%; text-align:center; }
			.Novel-Part-Title { font-size:150%; margin-bottom:5%; text-indent:0; margin-left:0;}
			#Novel-Forward {font-style: italic;}
			.Novel-Chapter-Title, .Novel-Chapter-Title-First, .Novel-Chapter-Title-Very-First, .Novel-Forward-Title { font-size:150%; margin-bottom:5%; text-indent:0; margin-left:0; text-align:center;}   
			.Novel-Paragraph-Section, .Novel-Paragraph-Section-First, .Novel-Forward-Paragraph-Section-First, .Novel-Forward-Section, .Novel-About-First {margin-top:3%; margin-bottom:0; text-indent:0;}

			.Novel-Paragraph, .Novel-Forward-Paragraph, .Novel-About {text-indent:5%; margin-bottom:0; margin-top:0;}
			.Novel-Char-First { font-size:150%; }
			#Novel-About{font-family:mono} 
			.Novel-Char-Italics {font-style: italic;}
		</style>
		</head>
	<body>
		<xsl:apply-templates select="office:document/office:body/office:text"/>
	</body>
	</html>
</xsl:template>

As you can, see this is where we define our styles. Feel free to tweak as you see fit and to add in any extra styles that you need, but remember that less is probably more. Also note that we use % values in all the sizes rather than ones relative to the font size (such as “em”). This is so if, for example, the reader needs the font set really big because they have poor eyesight, the margins etc. don’t get ridiculously big too.

You can give this a test this now if you like, but you won’t see much difference, as we are still just outputting all our content in one long line. Let’s do something about this now.


<!-- Match all <text:p> elements that aren't matched anywhere else -->
<xsl:template match="text:p">

	<xsl:variable name="style"> 
	<xsl:choose>
		<xsl:when test="contains(@text:style-name,'Novel-')">
			<xsl:value-of select="@text:style-name"/>
		</xsl:when>
		<xsl:otherwise>
			<xsl:value-of select="/office:document/office:automatic-styles/style:style[@style:name = current()/@text:style-name]/@style:parent-style-name"/>
		</xsl:otherwise>
	</xsl:choose>
	</xsl:variable>

	<p class="{$style}"><xsl:apply-templates /></p>
</xsl:template>

This is probably going to need a bit of explaining. What we are doing here is matching all the <text:p> elements in our document, which are the elements that contain all our novel’s text. We are then defining a variable called style (to save us a bit of typing) and then using a choose statement to see if our element is using a real style or an automatic style. We do this by checking the @text:style-name attribute of the <text:p> element. If it is using a real style (i.e the @text:style-name attribute begins with “Novel-”) we set the value of the style variable to the attributes value. If it is using an automatic style we have to look up which style the automatic style is based on. This information is stored in the @style:parent-style-name attribute of the automatic style, and if you remember, automatic styles are located in /office:document/office:automatic-styles/. We then output a <p> element that has the real style name as its class. We then apply all templates to the children of the current element, which will be mostly just text, and we know what happens to text by default, it just gets copied into the output document.

If you have a look at your test document in your browser now, it’ll look very nearly finished, as if we only need to add a few bits of polish here and there (a table of contents, dealing with links etc.) However, we have one big problem, if you look at the source code, you’ll see our html is still flat rather than nested properly.

A Firefox window showing the structure of our document
Inspecting the elements in FireFox reveals that our document is still not hierarchical.
Series Navigation<< Inside your Test Document and Starting Your StylesheetUsing XSL Keys and Variables >>

Leave a Reply

Your email address will not be published. Required fields are marked *