Until now we have seen how XSLT can be used to transform XML documents from one format to another. The original goal for specifying XSLT was its use as a styling mechanism. But before we try to use XSLT to transform to HTML documents, we'll first have a look at the Cascading Stylesheets.
Using CSS in HTML
You have probably seen CSS before in an HTML context. It is a syntax for specifying the appearance of elements in an HTML document in a structured way. It allows for associating one stylesheet with many content documents, thus centralizing the common layout in one place. The 'Cascading' part of the name refers to the feature of overriding a global property locally by redefining and inheriting properties from parent elements in the document. CSS strikes a fine balance between centralization and developer flexibility.
The current recommendation of the W3C is at version 2. The most important difference between versions 1 and 2 is that support for other media-types was included (printing documents) and more complex selectors were introduced (a selector in CSS2 can be compared with the match attribute in an XSLT template). CSS properties on elements can specify:
- Font size, family, color, variant (for example smallcaps), style (for example italic)
- Color, background color, background image (including tiling and positioning)
- Line, word and letter spacing
- Alignment, underlining, overlining
- The margins, borders, etc of boxes (boxes are TABLE elements, but also P and BODY elements)
- List styles (square bullets, etc), display (not displayed, as block, inline)
- Very detailed positioning and units (inches, cm, pixels, points)
Some simple uses of CSS in HTML are shown here before we head on to styling XML.
<P style="text-align:center;text-decoration:underline">This is text</P>
The above code would show be displayed like this:
This is text
The same would be accomplished by inserting this code at the beginning of the HTML document:
<STYLE>
P {
text-align:center;
text-decoration:underline;
}
</STYLE>
Or by associating the HTML document with an external stylesheet by doing this:
<LINK href="mystyle.css" rel="style sheet" type="text/css">
While a file is present in the same directory, called mystyle.css with this content:
P {
text-align:center;
text-decoration:underline;
}
There is a lot more to using CSS from HTML, especially when you programmatically change the styles during display. We will not cover the use of classes and more complex concepts in CSS here.
Using CSS in XML
Using CSS to style an XML document is very simple if you know the way it works with HTML. The way of referencing the stylesheet is different, using the processing instruction xml-stylesheet instead of the LINK element. Inline stylesheets are not possible. Let's look at an example:
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="article.css"?>
<Article>
<Authors>
<Author>James Britt</Author>
<Author>Teun Duynstee</Author>
</Authors>
<Title>A cool article</Title>
<Intro>An introductory text here ... </Intro>
<Body>The body text of the article comes here ... </Body>
<Related>
<Item type="URL" loc="http://www.asptoday.com/art2">
Some other article</Item>
<Item type="local" loc="2"/>
</Related>
</Article>
This example refers to a cascading stylesheet with a relative URL. The type attribute contains a MIME type indicating the kind of stylesheet. Using a different MIME type, we can also use this syntax to associate an XSLT stylesheet with the document - more on that later.
If we leave the article.css stylesheet document empty, all text nodes will be displayed flowing over the whole page. What we want is the title to appear larger and have everything aligned, more like how we would expect an article to look, just like this:
The most important thing to realize is that the elements in our document have no style whatsoever. Normally in HTML styling, the P element (paragraph) has some properties set by default. For example: the P element, but also the H1 to H6 elements all have their display attribute set to 'block'. This indicates that the element requires its own line in the document. In XML, the CSS processor assumes nothing. So let's start styling the title of the article:
- It should appear on its own line
- It should be a little larger than the rest of the text
- It should be centered and underlined
- We want to use a sans-serif font
Converting this into a CSS statement, we would get:
Title {
display:block;
text-align:center;
text-decoration:underline;
font-size:14pt;
font-family:helvetica
}
Doing this for all elements in the article document, we could come up with a stylesheet like this:
BODY {
color:black;
display:block;
width:80%;
margin-left:20%;
}
Intro {
color:black;
font-weight:bold;
display:block;
line-height:150%;
width:80%;
margin-left:20%;
}
Author {
text-align:right;
font-size:8pt;
display:block;
text-decoration:italic;
}
TITLE {
display:block;
text-align:center;
text-decoration:underline;
font-size:14pt;
font-family:helvetica
}
Related {
display: none;
}
The good thing is that it is a standard and it works. The bad thing is that it is a bit limited in areas other than the visible style, for example:
- Reordering and sorting of elements is not possible
- Generation of text is hard. It can be done using the before and after pseudo-elements, but for more than the really basic additions, it's too difficult and besides, these are not implemented in most browsers.
- Adding functionality, such as creating a link from certain content elements, is not possible
Some documents are suitable for styling this way. They have a content that is already in the order of reading and don't need much extra functionality beyond the formatting of the content. Often, the data in XML documents needs some more rigorous form of styling. In these cases, XSLT can be used.
Good points of CSS include:
- Many web developers are familiar with the language
- Good performance
Using XSLT for Adding Style
We have seen quite a lot of XSLT in this chapter. We saw that it is a language for converting one XML-based document into another. HTML looks very much like an XML-based syntax, only the rules to determine if the document is well-formed are less strict. If we use XSLT to transform XML to an HTML page, the result must always be valid XML. This means that you cannot create just any kind of HTML from XML with XSLT, but for any valid HTML document it is possible to create an HTML document that looks the same and can be created from XML. So if you want text displayed as:
Text Text Text Text
The HTML you would normally use would look like this:
Text <B>text <I>text</B> text</I>
However, to be valid XML, it would have to be rewritten as:
Text <B>text <I>text</I></B><I> text</I>
Recently, the W3C specified XHTML. XHTML is the same as HTML, but must always be a valid XML document. DTDs for XHTML have been published. You can find the specification, including the associated DTDs at www.w3.org/TR/xhtml1/. Any XHTML document can be generated from a source using XSLT. However, be careful - if you use these DTDs to validate your XHTML document, you must use HTML in lowercase. In most of the examples in this book, we use uppercase HTML elements (I think this makes the stylesheet elements and the literal HTML elements easier to distinguish). So, the examples do not generate valid XHTML.
As you may remember, the XSLT output element allowed us to choose the method html for outputting HTML instead of XML. If you do this, you can be sure that XML specifics such as processing instructions and closed empty elements like <BR/> will not confuse HTML browsers. But if you do so, you must also be aware of the fact that your output is not valid XML anymore and therefore also not valid XHTML.
So basically anything that can be shown in a browser can be the styled representation of an XML document using XSLT, and this was actually one of the main purposes of developing XSLT in the first place. Using it for transforming into formats other than HTML was only added later. We have already seen a lot of XSLT in this chapter. We will just have a look at some examples and common techniques.
Continued...
