XSLT showcase

Project acronym: QUESTION-HOW
Project Full Title:Quality Engineering Solutions via Tools, Information and Outreach for the New Highly-enriched Offerings from W3C: Evolving the Web in Europe
Project/Contract No. IST-2000-28767
Workpackage 1, Deliverable D1.6

Project Manager: Daniel Dardailler <danield@w3.org>
Author of this document: Max Froumentin

Created: 29 August 2002. Last updated: 29 August 2002.

Table of Contents:


XSLT is a language designed to perform transformations of XML files. Originally intended for displaying XML data through the use of the Extensible Stylesheet Language (XSL), it can be used separately as a general-purpose language, and has indeed become very popular for generating HTML pages from custom XML data. Many tools supporting XSLT exist, either stand-alone processors or mainstream Web browsers that allow the transformation to happen on the client's machine, thus decreasing the server's load and allowing the client to customise the resulting page. This project will demonstrate the use of XSLT in various environments: W3C specification generation, Web site management and generation of SVG graphics


W3C Document Generation

XSLT (Extensible Stylesheet Language - Transformations) is a language for specifying transformations of XML files. Originally intended for displaying XML data through the use of the Extensible Stylesheet Language (XSL), it is now used separately as a general-purpose transformation language, and has become very popular for generating HTML pages from custom XML data. Many tools supporting XSLT exist, either stand-alone processors or mainstream Web browsers that allow the transformation to happen on the user's computer, thus decreasing the server's load and allowing the client to customise the resulting page.

This project aims at demonstrating the power of the XSLT language, by showing production environments that rely on it.

Producing W3C Specifications ("XML Spec")

One of the first uses of XSLT was for formatting W3C specifications. Indeed the XML 1.0, XSLT 1.0 itself, and many other Recommendations were written using a custom DTD (called xmlspec.dtd) and a set of XSLT stylesheets to make it possible for editors to produce multiple version of the specification. For instance, the MathML specification was also written using xmlspec.dtd (xslspec.xml), and the XML Spec stylesheets were use to produce a variety of formats:

The formatting rules of a W3C specification are strict. The correct colours and types are ensured by a mandatory CSS file. But there are also constraints on the structure (such as in document head) which must be followed. Editing and validating the document using the xmlspec DTD ensures that these rules are followed, whereas direct editing of the HTML requires doing the checks "by hand".

Recent activity comprised maintainance of the DTD and the stylesheets. For instance, publication rules newly introduced required changes to the stylesheets that produce HTML. An XML Schema is now developed in parallel with the DTD, to offer even better checking for the validity of xmlspec documents.

Another new addition that has proven to be very useful is markup that lets the author outline the difference between two different drafts of a specification. After adding a diff attribute to modified sections (with values such as add or del) a colour-coded HTML version can be generated (see the XSLT2.0 Working Draft for example).

Another tool recently developed for simplifying the W3C publishing process and written using XSLT is the publication rules checker. This tool will check the HTML version of a specification (which is the only normative format of a W3C document) and verify that it follows the rules that can be automatically checked.

These tools make publishing documents much easier, and are becoming more and more used for new specifications.within W3C. The whole framework is of course reusable and can be adapted to other kinds of technical report publication process.

The following shows an example. The XSL 1.0 Recommendation was written by editing one XML file:


<title>Extensible Stylesheet Language (XSL)</title>
<version>Version 1.0</version>
<name>Sharon Adler</name>
<email href="mailto:sca@us.ibm.com" show="new" actuate="user" xmlns:xlink="http://www.w3.org/TR/WD-xlink">sca@us.ibm.com</email>
<div1><head>Introduction and Overview</head>
This specification defines the Extensible Stylesheet Language
(XSL). XSL is a language for expressing stylesheets. Given a class of
arbitrarily structured XML <bibref ref="XML"/> documents

Then the XML Spec stylesheet were applied, generating the HTML and PDF versions:

screenshot of XSL spec in HTML

screenshot of XSL spec in PDF

Web Site Management

The XSLT language has also allowed automatisation of many of the Web pages on the www.w3.org site. Similar to specification production, a custom DTD was designed for description of a Working Group's public page. For instance, the XML markup of the XSL page looks like:

<publicPage domain="DF" location="http://www.w3.org/Style/XSL">
    Home page of the Extensible Stylesheet Language at W3C

  <title>The Extensible Stylesheet Language (XSL)</title>
    <p><em>XSL</em> is a language for expressing stylesheets. It consists...</p>
    <item date="2002-08-19" title="new XSL-FO book">O'Reilly have 
published Dave Pawson's book on XSL Formatting Objects: 
<a href="http://www.oreilly.com/catalog/xslfo">XSL-FO</a>.

    <resource type="spec"><a href="/TR/xslt">XSLT 1.0</a></resource>
    <resource type="article"><a
    href="http://www.xml.com/pub/a/2002/04/10/xslt2.html">What's New
    in XSLT 2.0</a> by Evan Lenz</resource>

    <resource type="implementation"><a href="http://www.antennahouse.com">
     XSL Formatter</a> (Win, free evaluation version)</resource>


We also designed a series of stylesheets that apply to this DTD, to render this document in different formats:

public2html.xsl: an XSLT stylesheet that transforms our custom DTD to HTML, for viewing in a standard browser. This stylesheet basically transforms the custom structure of the XML document:

A CSS stylesheet that is linked to from the HTML document specifies all the actual visual formatting: colours, fonts, column location and width, etc. The picture below shows rendering of the HTML version of the XSL page at W3C.

rendering of the HTML version

We also wrote another stylesheet to present the news items as an RSS feed. RSS is a news syndication XML vocabulary, that is widely used by news gathering software and Web portals (such as Syndic8). People can read this feed using RSS news collecting software, which will check for new items while ignoring the ones that have already been read. Below is a screenshot of an RSS reader displaying the XSL news feed.

RSS reader displaying the XSL news feed

Again the advantage of this approach are that

Eventually the transformation that is perfomed on the W3C server to generate the HTML and RSS version should in fact disappear. XSLT was designed so that the transformation could take place in the user's browser, which would receive both the original XML file, the XSL stylesheet, and possibly one or more CSS stylesheets, perform the transformation and render the result. As most major browsers now support XSLT (Internet Explorer and Netscape 7) the user is able to view the XML version of the sites directly without reading the HTML version. One could also imagine an RSS client also capable of retrieving the XML source as well as the stylesheet that transforms it to RSS. Browser side transformation would bring two benefits: sparing the server of computing the different output formats (particularly costly if hundreds of page exist, in many different formats such as WML, PDF, SVG, etc.), and would also leave the possibility for the user to have their own stylesheets that could override the author's stylesheet and present the document according to the reader's preferences, device and abilities.

This Web content method, which is what XSLT what originally designed for, is becoming more and more used, by the W3C (see the XSLT, SVG and Math pages) but also by many web site, through Web content management software based on XSLT (WYONA, cocoon, Xoplon) and many others).

Generating SVG using XSLT

Another application of XSLT that is becoming popular is generation of SVG graphics. SVG is a "low-level" graphics format, which is meant to be automatically produced from more semantic data, in the same way as with HTML and RSS above. Producing SVG from XSLT has not become as popular as HTML though, and we are developing a series of demonstrations and tutorials that show common techniques.

The most complex example that we designed is the ChessGML stylesheet, to illustrate that XSLT was a valid alternative to scripting languages for generating Web content. ChessGML is a markup language designed by Andreas Saremba, which can describe chess games, including whole tournaments. The markup for a game (shown below) simply describes the sequence of moves, preceded by information on the game itself, such as who are playing it, where and when.

<game type="chess" variant="classic">
      <event>The Immortal Game</event>
    <date year="1851"/>
    <result res="1-0" why="mate"/>
  <moves ply-count="23">
    <mp> <!-- 1. e4 e5 -->
      <m c="w"><p c="w" n="p"/><e2/><e4/></m>
      <m c="b"><p c="b" n="p"/><e7/><e5/></m>

    <mp> <!-- 2. f4 exf4 -->
      <m c="w"><p c="w" n="p"/><f2/><f4/></m>
      <m c="b" capt="1"><p c="b" n="p"/><e5/><f4/></m>

The XSLT stylesheet creates an SVG file from ChessGML by first setting up the board, player names and chess pieces. Then the list of moves is parsed and generates a sequence of SVG declarative animation elements:


This example can be described as: move the piece called "M" (here, white's king pawn) along the y axis, from the value 68.5 to 48.5, starting 2 seconds after the beginning of the animation. The move should last 0.67s, and the piece should stay at the ending position when the move is over (as opposed to returning to its original state).

screenshot of adobe player showing chess game

The final SVG file (a rendering of which is shown above) is rather complicated, proving our point that it is much simpler to create it from a higher-level vocabulary, using a transformation process, in this case XSLT.

We have also written other stylesheets for various output formats

The techniques used in this example, as well as other experiments we did on the generation of SVG using XSLT were presented at the SVG Open Conference

Deviations from plan