Preparation:

Publishing on the Web using XSL

Max Froumentin, W3C

Page 2002

7 February 2002

http://www.w3.org/People/maxf/talks/2002-02-XSL/talk.pdf

HTML and XML

HTML

HTML is the language of the Web: text with a set of tags to mark headers, paragraphs, etc.

<html>
 <h1>Title of the document</h1>
 <p>This is the <i>text</i> of
  the document</p>
</html>

XML

XML generalises HTML: one can define a language with any tag.

<conference>
 <name>Page2002</name>
 <date day="6-8" month="2" year="2002"/>
 <location>Ikebukuro</location>
 <abstract>This conference is about...</abstract>
</conference>

In order to specify how to display the document (on paper, on the Web, etc.) it is necessary to apply style to it.

Styling and XML

Style Sheets

Style sheets are useful for:

Two ways to create style sheets: CSS and XSL

CSS

Example: press release Show XSL Press release page, and effect of applying user style sheet.

CSS uses a simple syntax:

body {
  background-color: #ddd;
  font-size: 200%;
}
a { color: green; }
h1 { color: red; }

Shortcomings of CSS

People concerned with styling needed more:

XSL was designed to solve that. But it became much more...

XSLT and XSL-FO

The XSL Process

Whereas CSS does this:

CSS process

XSL is designed to operate as:

XSL process

FO is an XML vocabulary, with presentation semantics. It defines:

The XSL syntax

A stylesheet is a set of templates:

<xsl:template match="body">
  <page-sequence background-color="#ddd" 
                 font-size="200%">
    <xsl:apply-templates/>
  </page-sequence>
</xsl:template>

But there are many more constructs that CSS rules do not have, like programming language statements: loops, conditions, etc. Stylesheets can become quite complex.

Two specifications

The XSL spec is split to reflect this process:

The Great Idea was to make the XSL transformations more general: anyXML-to-anyOtherXML and to make it to a separate specification: XSLT.

XSLT

Formatting Objects

Example

XSLideMaker

This set of slides was generated using XSL.

This shows a way to use XSL "off-line", without necessarily publishing them on the Web

XSL on the Web

Principle

the XSLT process

With XSLT, it is possible to use XSL for publishing any kind of XML data to different sorts of devices (computers, phones, PDAs) that can display one type of XML presentation language (HTML, WML, FO). Several scenarios exist for performing the transformation: pre-generation, on-demand transformation and browser-side.

Pre-generation

From one XML source, a set of stylesheets generate documents in various formats at different URLs:

http://www.example.org/news.html
http://www.example.org/news.svg
http://www.example.org/news.wml

Benefits:

http://www.example.org/news-big.html

Example: The XSL page at W3C

The XHTML stylesheet performs complex operations: grouping, sorting, etc.

Drawback of the static approach: that many useless pages could be generated. Also, different URL for version.

Dynamic generation

If client specifies a way to send its preferences, the server can generate the correct version as asked.

Advantages:

Drawbacks:

Example: cocoon

From a source in XSP (eXtensible Server Pages)

<xsp:page 
 result-ns="http://www.dummy.org/SimpleHomepageDTD"
 language="java">

  <xsp:structure>
    <xsp:include>java.lang.*</xsp:include>
  </xsp:structure>

  <xsp:logic>
    private static int counter = 0;
        
    private synchronized int currentCount() {
      return ++counter;
    }
  </xsp:logic>

  <xsp:content>
    <page>
      <title>A Sample XSP Page</title>
      <p>
        Hi, I've been hit 
        <xsp:expr>currentCount()</xsp:expr>
        times.
      </p>
    </page>
  </xsp:content>
</xsp:page> 

located at a given anonymous URL (http://example.org/news), and a configuration file such as

<map:serializer name="html" mime-type="text/html" 
                src="org.apache.cocoon.serialization.HTMLSerializer">
  <doctype-public>-//W3C//DTD HTML 4.0 Transitional//EN</doctype-public>
  <doctype-system>http://www.w3.org/TR/REC-html40/loose.dtd</doctype-system>
  <omit-xml-declaration>true</omit-xml-declaration>
  <encoding>UTF-8</encoding>
  <indent>1</indent>
</map:serializer>

<map:serializer name="wap" mime-type="text/vnd.wap.wml" 
     src="org.apache.cocoon.serialization.XMLSerializer">
  <doctype-public>-//WAPFORUM//DTD WML 1.1//EN</doctype-public>
  <doctype-system>http://www.wapforum.org/DTD/wml_1.1.xml</doctype-system>
  <encoding>UTF-8</encoding>
</map:serializer>

cocoon checks the HTTP headers and generates the preferred format. All this is transparent to the user.

In-browser XSLT

More and more Web browsers can perform XSLT transforms.

XSLT in browsers is becoming more and more popular:

Remark: In major browsers, client-side Java is optional, XSLT is there by default.

Example

X-smiles: a Java Web browser for PCs and small devices.

Does in-browser XSLT and renders:

x-smiles

Example II (MathML)

XSLT to display formulas in many browsers, using MathML:

<math>
 <msup>
  <mrow>
   <mi>a</mi><mo>+</mo><mi>b</mi>
  </mrow>
  <mrow>2</mrow>
 </msup>
</math>

Few browsers understand MathML (show amaya), but XSLT gives a solution...

The MathML Stylesheet

Using XSLT in a HTML document, one can display MathML in most popular browsers

<?xml-stylesheet href="mml.xsl">
<html>
 ...
 <math>...</math>
 ...
</html>

This does not work with browsers that do not support XSLT or MathML.

mathematics in html

Advanced Usage

Conversion

XSLT has been found useful for other uses, such as:

Programming

Example

Chess stylesheet

ChessGML:

<mp> <!-- 4. Kf1 b5 -->
  <m c="w"><p c="w" n="k"/><e1/><f1/></m>
  <m c="b"><p c="b" n="p"/><b7/><b5/></m>
</mp>

SVG:

<!-- move 4 -->
<animateTransform attributeName="transform" attributeType="XML" type="transla
te" from="0,0" to="0,-4.5" accumulate="sum" additive="sum" begin="move3.end" dur
="1s" restart="never" fill="freeze" xlink:href="#moveList"/>
<animate id="move4" begin="move3.end" xlink:href="#F" attributeName="x" attri
buteType="XML" dur="2s" from="55" to="25" fill="freeze" restart="never"/>
<animate xlink:href="#F" attributeName="y" attributeType="XML" begin="move3.e
nd" dur="2s" from="78.5" to="48.5" fill="freeze" restart="never"/>
chess board

The Future

XSLT 2.0

The first Working Draft has been published:

XSL 2.0

There are plans for a new version of XSL with:

Conclusion