Introduction to XSL Max Froumentin - W3C

l Introduction to XSL l XSL and other W3C specs l XML Documents l Transformations: XSLT l Styling XML Documents l General-purpose XSLT l XSL l Templates l Example I: Hamlet l XSLT statements l Example II: Mixed Writing Modes l "Play" to HTML l Example III: database l XPath l Other Examples l Formatting Objects basics l How do they do that? l Pages l The XSL Process(es) l The area model l Server-Side/Client-Side XSL l Block/inline areas Introduction to XSL Max Froumentin - W3C

l Formatting Objects: l Properties l Example: Play to FO l Top-level Template l I18N Formatting Objects and Properties l Other Formatting Objects l Example: mixed writing modes l If you are still interested... Introduction to XSL

In a nutshell: XSL is a W3C specification that describes a method for visually presenting XML documents.

This tutorial will cover: l An overview of the XSL spec (including XSLT and XPath) l Examples of various use cases l Relationship with other XML technologies l A detailed example

These slides are available at http://www.w3.org/People/maxf/XSLideMaker/

Introduction to XSL Max Froumentin - W3C 1 of 30 XML Documents

l XML (eXtensible Markup Language) adds information to text files, using tags and attributes [example1], [example2] l Tag names are defined for a specific document type. l Uses the Unicode character set l Designed to be easily processed by machine while remaining readable.

Introduction to XSL Max Froumentin - W3C 2 of 30 Styling XML Documents

l XML documents are ideally semantic. For example, this bit of HTML is wrong: Do not smoke, eat or drink in this room.

l Presentation data should be separate l Two solutions for styling: CSS (Cascading Style Sheets) and XSL (eXtensible Stylesheet Language). CSS TITLE { display: block; font-family: Helvetica; font-size: 18pt } Simple model: properties are associated to tags or attributes.

Introduction to XSL Max Froumentin - W3C 3 of 30 Introduction to XSL Max Froumentin - W3C 3 of 30 XSL

XSL is an alternative to CSS that allows greater control over the presentation of the XML data. What can it do? l [like CSS] allow changing presentation without changing the XML source, and display documents on various media, l also: I18N features (writing modes, text alignment, hyphenation), complex page layout, footnotes, automatic generation of content (index) Who is it for?

Applications that require high-level quality formatting: l Publishing industry (books, technical documentation)

Introduction to XSL Max Froumentin - W3C 4 of 30 l Publication on different media: paper, web, mobile devices .

But is it not meant to be used where presentation is deeply tied to the contents (like graphic design).

Introduction to XSL Max Froumentin - W3C 4 of 30 Example I: Hamlet

Enter KING CLAUDIUS, QUEEN GERTRUDE, POLONIUS, OPHELIA, ROSENCRANTZ, and GUILDENSTERN And can you, by no drift of circumstance, Get from him why he puts on this confusion, Grating so harshly all his days of quiet With turbulent and dangerous lunacy? ... Formatted for paper output (PDF), formatted for the Web (XHTML)

Introduction to XSL Max Froumentin - W3C 5 of 30 Example II: Mixed Writing Modes

Introduction to XSL Max Froumentin - W3C 6 of 30 Example III: database

... Sundays, The (Various) Compilation Kamen, Michael ... PDF

Introduction to XSL Max Froumentin - W3C 7 of 30 Other Examples

l W3C specs (one DTD, output formats: HTML, sliced HTML, text, PDF), e.g MathML 2.0, XML 1.0 l This slideshow

Introduction to XSL Max Froumentin - W3C 8 of 30 How do they do that?

l An XSL stylesheet is an XML File l It is associated to an XML document with a Stylesheet Processing Instruction (like CSS) xsl"?>

l The actual formatting is performed either off-line or on the browser

Introduction to XSL Max Froumentin - W3C 9 of 30 The XSL Process(es)

The result tree is an XML document in which the markup has information about how to display the document: what font to use, the size of a page, etc. This markup is called Formatting Objects

Introduction to XSL Max Froumentin - W3C 10 of 30 (elements) and Properties (attributes). For example: ACT III Scene 1: A room in the castle Enter KING CLAUDIUS, QUEEN GERTRUDE, POLONIUS, OPHELIA, ROSENCRANTZ, and GUILDENSTERN ... Generated from: Enter KING CLAUDIUS, QUEEN GERTRUDE, POLONIUS, OPHELIA, ROSENCRANTZ, and GUILDENSTERN ...

Introduction to XSL Max Froumentin - W3C 10 of 30 Server-Side/Client-Side XSL

l Off-line (e.g. for printing) l Server-side: server transforms, client renders (not recommended)

l Client-side: client transforms and renders (allows user styles)

Introduction to XSL Max Froumentin - W3C 11 of 30 XSL and other W3C specs

XSL uses CSS properties to express formatting information, and uses the CSS inheritance model. l CSS: TITLE { display: block; font-family: Helvetica; font-size: 14pt; }

l XSL: [...] XSL and SVG, MathML l XSL can import images and other types of known XML

Introduction to XSL Max Froumentin - W3C 12 of 30 documents: SVG and MathML. l Up to the renderer to handle other namespaces

Introduction to XSL Max Froumentin - W3C 12 of 30 Transformations: XSLT

XSLT is a transformation language originally designed to transform any XML document into another XML document containing formatting objects: pages, blocks, graphics, text, etc.

Introduction to XSL Max Froumentin - W3C 13 of 30 General-purpose XSLT

XSLT has evolved to become a general-purpose transformation language from XML to XML.

Many users use it to transform their own XML document type to HTML for viewing within a browser l XSLT stylesheets use XML syntax l A stylesheet is a list of templates ... ...

Introduction to XSL Max Froumentin - W3C 14 of 30 Templates

l Each template applies to a type of nodes in the input document l When matches are made, the templates contains desired output. So this will transform: into Hamlet

Introduction to XSL Max Froumentin - W3C 15 of 30 HTML can also be generated very simply in the template, using for instance

instead of

means: apply other templates to contents.

Implicit rule: text is copied from input to output: a style sheet with no rules will only return the character data of the input.

Introduction to XSL Max Froumentin - W3C 15 of 30 XSLT statements

Allow navigation and iteration within the input document tree l Gets a value (node contents or attribute) from the input tree.

l Loops over the nodes in the select expression

l ... Conditional

Introduction to XSL Max Froumentin - W3C 16 of 30 "Play" to HTML

Very simple one-template example using the 'pull' method:

Introduction to XSL Max Froumentin - W3C 17 of 30 Result:

The Tragedy of Hamlet, Prince of Denmark

Elsinore. A platform beforethe castle.

BERNARDO

Who's there?

FRANCISCO

Nay, answer me: stand, and unfold yourself.

... Extended, output: numbering, TOC, etc.

This uses the 'push' method where structure follows the input.

Introduction to XSL Max Froumentin - W3C 17 of 30 "Play" to HTML

Roughly there is one template for each tag type in the input

Introduction to XSL Max Froumentin - W3C 17 of 30 XPath

l ... is another W3C specification; l an expression language to selects parts of an XML document tree; l is used in or , etc.; l and can be as simple as TITLE, or as complex as /ACT[3]/SCENE[position() < 5

and position() > 2]/SPEAKER[@name="Hamlet"]/

LINE[contains(.,"shoe box")]

Introduction to XSL Max Froumentin - W3C 18 of 30 Formatting Objects basics

l the FO vocabulary is one special type of output from XSLT l FOs are organized as an XML tree:

l Each node has associated properties, either directly specified (by attributes) or inherited.

Introduction to XSL Max Froumentin - W3C 19 of 30 Pages

l A page is divided in 5 regions: body, before, after, start and end

Introduction to XSL Max Froumentin - W3C 20 of 30 The area model

On the page will be layed out areas, that contain text, images and other areas. An area is a rectangle, with padding and border:

Introduction to XSL Max Froumentin - W3C 21 of 30 Block/inline areas

The concept of relative orientation and writing-modes. Where CSS defines top, bottom, left, right, XSL adds before, after, start and end. Areas can be of type: block or inline. Blocks are stacked from the 'before' side to the 'after' side, inlines are stacked orthogonally.

Introduction to XSL Max Froumentin - W3C 22 of 30 Formatting Objects:

l Define the layout fo:layout-master-set fo:page-master fo:page-sequence

l Generate areas fo:block fo:inline fo:character

l Other fo:page-number fo:external-graphics

Introduction to XSL Max Froumentin - W3C 23 of 30 Properties

l Each area has a set of traits: color, background, font-size, etc. l Areas are inherited down the FO tree using the CSS inheritance model l They are specified in the source as attributes associated to Formatting Objects. This is Helvetica 14pt text. This is Helvetica 28pt text.

Introduction to XSL Max Froumentin - W3C 24 of 30 Example: Play to FO

Introduction to XSL Max Froumentin - W3C 25 of 30 margin-left="2cm" margin-right="2cm"> Table of Contents

Introduction to XSL Max Froumentin - W3C 25 of 30 Example: Play to FO

Introduction to XSL Max Froumentin - W3C 25 of 30

Introduction to XSL Max Froumentin - W3C 25 of 30 Example: Play to FO

Introduction to XSL Max Froumentin - W3C 25 of 30 font-size="20pt" space-before.optimum="10pt" space-after.optimum="5pt" text-align="center"> Scene - Act

Introduction to XSL Max Froumentin - W3C 25 of 30 Example: Play to FO

space-before.optimum="10pt" space-after.optimum="5pt" text-align="center"> Act Act p. Scene

Introduction to XSL Max Froumentin - W3C 25 of 30 p.

Introduction to XSL Max Froumentin - W3C 25 of 30 Example: Play to FO

Introduction to XSL Max Froumentin - W3C 25 of 30 Top-level Template

Here we set the page format, running headers and footers, and columns Page Format Page Sequence Master

Introduction to XSL Max Froumentin - W3C 26 of 30 Page Sequence l Contains static-content (headers, footers, siders) l And main text flow Flow

Contains blocks, which contains text and inlines

Introduction to XSL Max Froumentin - W3C 26 of 30 I18N Formatting Objects and Properties

l fonts and Unicode character sets: [example1], [example2] l writing-mode

Introduction to XSL Max Froumentin - W3C 27 of 30 l baseline control dominant-baseline(of the principal font)

Modified font size. Baseline table is scaled and realigned on the dominant baseline:

Apguru Exji

Introduction to XSL Max Froumentin - W3C 27 of 30 I18N Formatting Objects and Properties

Introduction to XSL Max Froumentin - W3C 27 of 30 Introduction to XSL Max Froumentin - W3C 27 of 30 Other Formatting Objects

l fo:leader l fo:external-graphic, fo:instream-foreign-object l fo:footnote l fo:page-number, fo:page-number-reference l fo:list, fo:table, fo:float l Dynamic properties (e.g. links) And Properties l Aural Properties (pitch, azimuth, etc.) l Hyphenation control (country, hyphenation-character) l Keeps and Breaks

Introduction to XSL Max Froumentin - W3C 28 of 30 Introduction to XSL Max Froumentin - W3C 28 of 30 Example: mixed writing modes

Introduction to XSL Max Froumentin - W3C 29 of 30 If you are still interested...

Status of the specifications l XSLT 1.0 and XPath 1.0 are W3C recommendations l Requirement documents for XSLT2.0 and XPath2.0 are available l XPath2.0 is now being developed (with XML Query) l XSL 1.0 (FO) is a Candidate Recommendation Implementations l Many implementations of XSLT1.0 exist: xt, Saxon, Oracle, Sun, Mozilla, (client side), MSXML (client side), Lotus, Unicorn, libxml, most of them free l XSL 1.0: 7+ implementations: RenderX, Antenna House, FOP

Introduction to XSL Max Froumentin - W3C 30 of 30 (does SVG), PassiveTeX (does MathML), etc. The Future l XSL 1.0 will move to Recommendation l Interoperability: include SVG and MathML in XSL. l Applications: publishers will be able to put publications on the web as easily as printing them

Introduction to XSL Max Froumentin - W3C 30 of 30