Styling XHTML with SVG using XSLT - Part Isee also: Part II
1. XML and namespacesNamespaces in XML are used to identify vocabularies. The xmlns attribute is used to specify the namespace for
the current Element and all its children. So in this example we tell the browser that the HTML element and all its children are elements in the XHTML namespace and therefor should be treated as XHTML (i.e.: get rendered ...).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<!--content-->
</body>
</html>
This does work in FireFox and Opera but does not in IE, I will show later how to get this working in IE.
You can mix Elements from different namespaces in one document. A good example is a combound document using XHTML with inline SVG.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<h2>SVG in XHTML</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect x="0" y="0" width="100" height="100"/>
</svg>
</body>
</html>
Here we use the xmlns attribute on the SVG element to tell that it's an element in the SVG namespace. This again does not work in IE , yet. I will cover IE later...
We could have also used prefixes for specifying the namespace using the syntax xmlns:prefix="URI" :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="www.w3.org/2000/svg">
<head>
<title>test</title>
</head>
<body>
<h1>SVG in XHTML</h1>
<svg:svg width="100" height="100">
<svg:rect x="0" y="0" width="100" height="100"/>
</svg:svg>
</body>
</html>
So here the prefix "svg" gets bound to the SVG namespace. It is just an alternative to the previously mentioned method. I prefer the first method, though we will need the prefixes to get this working in IE.
Handle Internet Explorer
As you may have noticed, if you are using XML and/or use "text/xml" as mime-type, the examples above will not render in IE, the next step towards developing an XSLT stylsheet for styling XHTML will solve this problem as a side effect, so read on about the identity XSLtranformation:
2. The identity transformation in XSLT
The identity transformation just copies the complete document, without changing it. As a side effect IE will interprete the output as HTML, and thus will render the file.
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:my="http://example.com/namespace">
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>
<xsl:template match="*">
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
<xsl:template match="@*">
<xsl:copy/>
</xsl:template>
<xsl:template match="processing-instruction()">
<xsl:copy>
<xsl:apply-templates select="@*|node()|text"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
So this finally works in IE, Firefox and Opera: XHTML styled with XSLT 3. Styling documents with XSLT
Now we can use xslt to style the document (and much more). Just add the following template to the identiy transformation. It will turn all h1 elements green.
<xsl:template match="html:h1">
<h1 style="fill:green"><xsl:apply-templates/></h1>
</xsl:template>
A better way to code this would be:
<xsl:template match="html:h1">
<xsl:copy>
<xsl:attribute name="style">color:green</xsl:attribute>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
Here is another example, which adds a list of all h1 elements with an id attribute to the document.
<xsl:template match="html:body">
<xsl:copy>
<ul>
<xsl:for-each select="html:h1[@id]">
<li>
<a href="#{@id}">
<xsl:value-of select="position()"/>. <xsl:value-of select="."/>
</a>
</li>
</xsl:for-each>
</ul>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
Here is a more complex example, which uses this technic to include a page header template to the documents. Here are two example files that get styled by the same stylesheet.
<xsl:template match="html:body">
<xsl:copy>
<div style="position:relative;width:100%;height:50px;
background:lightblue">
<div style="float:right">version 0.1</div>
<div style="color:darkblue;font-size:25px">
styling and templating with xslt
</div>
<div>
<a href="document1.xml">document1</a>|
<a href="document2.xml">document2</a>
</div>
</div>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
|
