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.

Introduction

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

Description

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:

HTML: one file per chapter
HTML: one single file
PDF: via the XSL-FO vocabulary

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:

<spec>
<header>

<title>Extensible Stylesheet Language (XSL)</title>
<version>Version 1.0</version>
<pubdate><day>15</day><month>October</month><year>2001</year></pubdate>
...
<authlist>
<author>
<name>Sharon Adler</name>
<affiliation>IBM</affiliation>
<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>
</author>
...
<div1><head>Introduction and Overview</head>
<p>
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:

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">
  <shortdesc>
    Home page of the Extensible Stylesheet Language at W3C
  </shortdesc>

  <title>The Extensible Stylesheet Language (XSL)</title>
  
  <intro>    
    <p><em>XSL</em> is a language for expressing stylesheets. It consists...</p>
  </intro>
      
  <news>
    <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>.
    </item>
...
  </news>

  <resources>
    <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:

Generate the standard W3C header
Collect all news items, articles, tutorials and put them in HTML div structure.
Sort the news item by date, and keep only the 10 more recent ones

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.

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.

Again the advantage of this approach are that

Content and separation are cleanly separated in three levels: all the markup in the XML source describes semantic information (news, resource, etc.), and the rendering properties are split between the XSLT and the CSS stylesheet: while the CSS stylesheet basically adds standard markup and reorganises the information, the CSS stylesheet specifies the final visual aspec of the document
The custom XML markup is more stringent than HTML: any information inserted must belong to one of the categories (news item, link to a specification, etc). This ensures that the information is well structured. However if the content author feels that some type of information is missing, it is of course possible to modify the stylesheets to cater for it.
However the structure of the DTD is in other aspects looser than HTML as, for instance, the order of the items in the source file is insignificant, as everything will automatically be collected and sorted by the XSLT stylesheet

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">
  <gameinfo>
    <eventinfo>
      <event>The Immortal Game</event>
      <site>London</site>
    </eventinfo>
    <date year="1851"/>
    <opponents>
      <white>
        <player>
          <person>
            <surname>Anderssen</surname>
            <firstname>Adolf</firstname>
          </person>
        </player>
      </white>
      <black>
        <player>
          <person>
            <surname>Kieseritzky</surname>
            <firstname>Lionel</firstname>
          </person>
        </player>
      </black>
    </opponents>
    <result res="1-0" why="mate"/>
  </gameinfo>
  
  <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>

    <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>
    </mp>
...

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

Simple text: this stylesheet outputs the game in text format, the same way one would describe a move aurally. This can be used for text devices, or voice browsers:
```
Move 1: white pawn to e4, black pawn to d5
Move 2: white pawn takes white pawn at d5
```
Algebraic notation: another text format, shorter than full text and used in chess publications.
```
1. e4 d4
2. exd4 e5
3. dxe5 e.p. Nh3
```
HTML: a sequence of graphics showing the board at each position is produced as one big HTML file. Each board depicted is actually an HTML table of size 8 x 8, each cell containing a picture of either a chess piece or an empty square

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

none