Introduction to XSL. Max Froumentin - W3C

Introduction to XSL Max Froumentin - W3C Introduction to XSL XML Documents Stying XML Documents XSL Exampe I: Hamet Exampe II: Mixed Writing Modes Exampe III: database Other Exampes How do they do that? The XSL Process(es) Server-Side/Cient-Side XSL XSL and other W3C specs Transformations: XSLT Genera-purpose XSLT Tempates XSLT statements "Pay" to HTML XPath Formatting Objects basics Pages The area mode Bock/inine areas

Introduction to XSL Max Froumentin - W3C Formatting Objects: Properties Exampe: Pay to FO Top-eve Tempate I18N Formatting Objects and Properties Other Formatting Objects Exampe: mixed writing modes If you are sti interested...

Introduction to XSL In a nutshe: XSL is a W3C specification that describes a method for visuay presenting XML documents. This tutoria wi cover: An overview of the XSL spec (incuding XSLT and XPath) Exampes of various use cases Reationship with other XML technoogies A detaied exampe These sides are avaiabe at http://www.w3.org/peope/maxf/xslidemaker/ Introduction to XSL Max Froumentin - W3C 1 of 30

XML Documents XML (extensibe Markup Language) adds information to text fies, using tags and attributes [exampe1], [exampe2] Tag names are defined for a specific document type. Uses the Unicode character set Designed to be easiy processed by machine whie remaining readabe. Introduction to XSL Max Froumentin - W3C 2 of 30

Stying XML Documents XML documents are ideay semantic. For exampe, this bit of HTML is wrong: Do not <strong>smoke</strong>, <it>eat</it> or <bink>drink</bink> in this room. CSS Presentation data shoud be separate Two soutions for stying: CSS (Cascading Stye Sheets) and XSL (extensibe Styesheet Language). TITLE { dispay: bock; font-famiy: Hevetica; font-size: 18pt } Simpe mode: 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 aternative to CSS that aows greater contro over the presentation of the XML data. What can it do? [ike CSS] aow changing presentation without changing the XML source, and dispay documents on various media, aso: I18N features (writing modes, text aignment, hyphenation), compex page ayout, footnotes, automatic generation of content (index) Who is it for? Appications that require high-eve quaity formatting: Pubishing industry (books, technica documentation) Introduction to XSL Max Froumentin - W3C 4 of 30

Pubication on different media: paper, web, mobie devices. But is it not meant to be used where presentation is deepy tied to the contents (ike graphic design). Introduction to XSL Max Froumentin - W3C 4 of 30

Exampe I: Hamet <ACT> <SCENE> <TITLE>A room in the caste.</title> <STAGEDIR> Enter KING CLAUDIUS, QUEEN GERTRUDE, POLONIUS, OPHELIA, ROSENCRANTZ, and GUILDENSTERN </STAGEDIR> <SPEECH speaker="king Caudius"> <LINE>And can you, by no drift of circumstance,</line> <LINE>Get from him why he puts on this confusion,</line> <LINE>Grating so harshy a his days of quiet</line> <LINE>With turbuent and dangerous unacy?</line> </SPEECH>... Formatted for paper output (PDF), formatted for the Web (XHTML) Introduction to XSL Max Froumentin - W3C 5 of 30

Exampe II: Mixed Writing Modes Introduction to XSL Max Froumentin - W3C 6 of 30

Exampe III: database... <record year="1992"> <artist>sundays, The</artist> <tite>bind</tite> </record> <record year="1994"> <artist>(various)</artist> <tite>the Gory of Gershwin</tite> <note>compiation</note> </record> <record type="soundtrack" year="1992"> <artist>kamen, Michae</artist> <tite>brazi</tite> <ocation foder="3" page="20"/> </record>... PDF Introduction to XSL Max Froumentin - W3C 7 of 30

Other Exampes W3C specs (one DTD, output formats: HTML, siced HTML, text, PDF), e.g MathML 2.0, XML 1.0 This sideshow Introduction to XSL Max Froumentin - W3C 8 of 30

How do they do that? An XSL styesheet is an XML Fie It is associated to an XML document with a Styesheet Processing Instruction (ike CSS) <?xm-styesheet ref="shakespeare.xs" type="text/xs"?> <ACT> <SCENE> <TITLE>A room in the caste.</title> The actua formatting is performed either off-ine or on the browser Introduction to XSL Max Froumentin - W3C 9 of 30

The XSL Process(es) The resut tree is an XML document in which the markup has information about how to dispay the document: what font to use, the size of a page, etc. This markup is caed Formatting Objects Introduction to XSL Max Froumentin - W3C 10 of 30

(eements) and Properties (attributes). For exampe: <bock font-famiy="hevetica">act III</bock> <bock font-size="10pt">scene 1: A room in the caste</bock> <bock space-before="10mm" font-stye="itaic"> Enter KING CLAUDIUS, QUEEN GERTRUDE, POLONIUS, OPHELIA, ROSENCRANTZ, and GUILDENSTERN </bock>... Generated from: <ACT> <SCENE> <TITLE>A room in the caste.</title> <STAGEDIR> Enter KING CLAUDIUS, QUEEN GERTRUDE, POLONIUS, OPHELIA, ROSENCRANTZ, and GUILDENSTERN </STAGEDIR>... Introduction to XSL Max Froumentin - W3C 10 of 30

Server-Side/Cient-Side XSL Off-ine (e.g. for printing) Server-side: server transforms, cient renders (not recommended) Cient-side: cient transforms and renders (aows user styes) 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 mode. CSS: TITLE { dispay: bock; font-famiy: Hevetica; font-size: 14pt; } XSL: <xs:tempate match="title"> <fo:bock font-famiy="hevetica" font-size="14pt"> [...] </fo:bock> </xs:tempate> XSL and SVG, MathML XSL can import images and other types of known XML Introduction to XSL Max Froumentin - W3C 12 of 30

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

Transformations: XSLT XSLT is a transformation anguage originay designed to transform any XML document into another XML document containing formatting objects: pages, bocks, graphics, text, etc. Introduction to XSL Max Froumentin - W3C 13 of 30

Genera-purpose XSLT XSLT has evoved to become a genera-purpose transformation anguage from XML to XML. Many users use it to transform their own XML document type to HTML for viewing within a browser XSLT styesheets use XML syntax A styesheet is a ist of tempates <?xm version="1.0" encoding="utf-8"?> <xs:styesheet xmns:xs="http://www.w3.org/1999/xsl/transform" version="1.0"> <xs:tempate match="/">...</xs:tempate> <xs:tempate match="/htm">...</xs:tempate> </xs:styesheet> Introduction to XSL Max Froumentin - W3C 14 of 30

Tempates Each tempate appies to a type of nodes in the input document When matches are made, the tempates contains desired output. <xs:tempate match="title"> <fo:bock font-famiy="hevetica" font-size="14pt"> <xs:appy-tempates/> </fo:bock> </xs:tempates> So this wi transform: <TITLE>Hamet</TITLE> into <fo:bock font-famiy="hevetica" font-size="14pt"> Hamet </fo:bock> Introduction to XSL Max Froumentin - W3C 15 of 30

HTML can aso be generated very simpy in the tempate, using for instance <h1> instead of <fo:bock> <xs:appy-tempates/> means: appy other tempates to contents. Impicit rue: text is copied from input to output: a stye sheet with no rues wi ony return the character data of the input. Introduction to XSL Max Froumentin - W3C 15 of 30

XSLT statements Aow navigation and iteration within the input document tree <xs:vaue-of seect="..."/> Gets a vaue (node contents or attribute) from the input tree. <xs:for-each seect="..."> Loops over the nodes in the seect expression <xs:if test="...">...</xs:if> Conditiona Introduction to XSL Max Froumentin - W3C 16 of 30

"Pay" to HTML Very simpe one-tempate exampe using the 'pu' method: <?xm version="1.0" encoding="utf-8"?> <htm xmns="http://www.w3.org/1999/xhtm" xmns:xs="http://www.w3.org/1999/xsl/transform" xs:version="1.0"> <head> <tite><xs:vaue-of seect="play/title"/></tite> </head> <body> <h1><xs:vaue-of seect="play/title"/></h1> <xs:for-each seect="play/act"> <xs:for-each seect="scene"> <xs:if test="title"> <h2><xs:vaue-of seect="title"/></h2> </xs:if> <xs:for-each seect="speech"> <h3 stye="coor: red"><xs:vaue-of seect="speaker"/></h3> <xs:for-each seect="line"> <p><xs:vaue-of seect="."/></p> </xs:for-each> </xs:for-each> </xs:for-each> </xs:for-each> Introduction to XSL Max Froumentin - W3C 17 of 30

</body> </htm> Resut: <?xm version="1.0" encoding="utf-8"?> <htm xmns="http://www.w3.org/1999/xhtm"> <head> <tite>the Tragedy of Hamet, Prince of Denmark</tite> </head> <body> <h1>the Tragedy of Hamet, Prince of Denmark</h1> <h2>esinore. A patform beforethe caste.</h2> <h3 stye="coor: red">bernardo</h3> <p>who's there?</p> <h3 stye="coor: red">francisco</h3> <p>nay, answer me: stand, and unfod yoursef.</p>... Extended, output: numbering, TOC, etc. This uses the 'push' method where structure foows the input. Introduction to XSL Max Froumentin - W3C 17 of 30

"Pay" to HTML Roughy there is one tempate for each tag type in the input Introduction to XSL Max Froumentin - W3C 17 of 30

XPath... is another W3C specification; an expression anguage to seects parts of an XML document tree; is used in <xs:tempate match="..."> or <xs:vaue-of seect="...">, etc.; and can be as simpe as TITLE, or as compex as /ACT[3]/SCENE[position() &t; 5 and position() > 2]/SPEAKER[@name="Hamet"]/ LINE[contains(.,"shoe box")] Introduction to XSL Max Froumentin - W3C 18 of 30

Formatting Objects basics the FO vocabuary is one specia type of output from XSLT FOs are organized as an XML tree: Each node has associated properties, either directy specified (by attributes) or inherited. Introduction to XSL Max Froumentin - W3C 19 of 30

Pages A page is divided in 5 regions: body, before, after, start and end Introduction to XSL Max Froumentin - W3C 20 of 30

The area mode On the page wi be ayed out areas, that contain text, images and other areas. An area is a rectange, with padding and border: Introduction to XSL Max Froumentin - W3C 21 of 30

Bock/inine areas The concept of reative orientation and writing-modes. Where CSS defines top, bottom, eft, right, XSL adds before, after, start and end. Areas can be of type: bock or inine. Bocks are stacked from the 'before' side to the 'after' side, inines are stacked orthogonay. Introduction to XSL Max Froumentin - W3C 22 of 30

Formatting Objects: Define the ayout fo:ayout-master-set fo:page-master fo:page-sequence Generate areas fo:bock fo:inine fo:character Other fo:page-number fo:externa-graphics Introduction to XSL Max Froumentin - W3C 23 of 30

Properties Each area has a set of traits: coor, background, font-size, etc. Areas are inherited down the FO tree using the CSS inheritance mode They are specified in the source as attributes associated to Formatting Objects. <fo:bock font-famiy="hevetica" font-size="14pt"> This is Hevetica 14pt text. <fo:bock font-size="200%"> This is Hevetica 28pt text. </fo:bock> </fo:bock> Introduction to XSL Max Froumentin - W3C 24 of 30

Exampe: Pay to FO <?xm version="1.0" encoding="utf-8"?> <xs:styesheet xmns:xs="http://www.w3.org/1999/xsl/transform" xmns:fo="http://www.w3.org/1999/xsl/format" version="1.0"> <!-- ************************************************************ --> <xs:output method="xm" indent="yes"/> <xs:tempate match="/"> <xs:appy-tempates/> </xs:tempate> <xs:tempate match="*"> <xs:appy-tempates/> </xs:tempate> <xs:tempate match="play"> <fo:root> <fo:ayout-master-set> <fo:simpe-page-master master-name="tite-page" page-width="210mm" page-height="297mm" margin-top="2cm" margin-bottom="2cm" margin-eft="2cm" margin-right="2cm"> <fo:region-body region-name="body"/> </fo:simpe-page-master> <fo:simpe-page-master master-name="act-page" page-width="210mm" page-height="297mm" margin-top="2cm" margin-bottom="2cm" Introduction to XSL Max Froumentin - W3C 25 of 30

margin-eft="2cm" margin-right="2cm"> <fo:region-body region-name="body" margin-top="1cm" margin-bottom="1cm"/> <fo:region-before extent="1cm" region-name="header"/> <fo:region-after extent="1cm" region-name="footer"/> </fo:simpe-page-master> </fo:ayout-master-set> <fo:page-sequence master-name="tite-page"> <fo:fow fow-name="body"> <fo:bock dispay-aign="center"> <xs:appy-tempates seect="title"/> <xs:appy-tempates seect="fm"/> </fo:bock> </fo:fow> </fo:page-sequence> <fo:page-sequence master-name="tite-page"> <fo:fow fow-name="body"> <fo:bock space-before="5cm"> <fo:bock font-size="16pt" space-after="3em" text-aign="center"> <xs:text>tabe of Contents</xs:text> </fo:bock> <fo:bock start-indent="3cm" font-size="14pt"> <xs:appy-tempates seect="act" mode="toc"/> </fo:bock> Introduction to XSL Max Froumentin - W3C 25 of 30

Exampe: Pay to FO </fo:bock> </fo:fow> </fo:page-sequence> <fo:page-sequence master-name="tite-page"> <fo:fow fow-name="body"> <xs:appy-tempates seect="personae"/> </fo:fow> </fo:page-sequence> <fo:page-sequence master-name="tite-page"> <fo:fow fow-name="body"> <xs:appy-tempates seect="scndescr"/> </fo:fow> </fo:page-sequence> <xs:appy-tempates seect="act"/> </fo:root> </xs:tempate> <xs:tempate match="play/title"> <fo:bock text-aign="center" font-size="30pt" space-before="1em" space-after="1em"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="title"> Introduction to XSL Max Froumentin - W3C 25 of 30

<fo:bock text-aign="center" font-size="20pt" space-before="1em" space-after="1em"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="act/title"> <fo:bock id="{generate-id()}" text-aign="center" font-size="20pt" space-before="1em" space-after="1em"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="scene/title"> <fo:bock text-aign="center" font-size="16pt" space-before="1em" space-after="1em"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="fm"> Introduction to XSL Max Froumentin - W3C 25 of 30

Exampe: Pay to FO <fo:bock text-aign="center" font-size="10pt" space-before="1em" space-after="1em"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="personae/persona PERSONAE/PGROUP"> <fo:bock space-after=".5em"><xs:appy-tempates/></fo:bock> </xs:tempate> <xs:tempate match="personae/pgroup/persona"> <fo:bock><xs:appy-tempates/></fo:bock> </xs:tempate> <xs:tempate match="grpdescr"> <fo:bock start-indent="5mm"><xs:appy-tempates/></fo:bock> </xs:tempate> <xs:tempate match="scndescr"> <fo:bock text-aign="center" font-size="20pt"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="scene"> <fo:bock id="{generate-id()}" Introduction to XSL Max Froumentin - W3C 25 of 30

font-size="20pt" space-before.optimum="10pt" space-after.optimum="5pt" text-aign="center"> <xs:text>scene </xs:text> <xs:number/> </fo:bock> <xs:appy-tempates/> </xs:tempate> <xs:tempate match="act"> <fo:page-sequence master-name="act-page"> <fo:static-content fow-name="header"> <fo:bock text-aign="end"> <xs:vaue-of seect="/play/playsubt"/> <xs:text> - Act </xs:text> <xs:number format="i"/> </fo:bock> </fo:static-content> <fo:static-content fow-name="footer"> <fo:bock text-aign="end"> <fo:page-number/> </fo:bock> </fo:static-content> <fo:fow fow-name="body"> <fo:bock id="{generate-id()}" font-size="24pt" Introduction to XSL Max Froumentin - W3C 25 of 30

Exampe: Pay to FO space-before.optimum="10pt" space-after.optimum="5pt" text-aign="center"> <xs:text>act </xs:text> <xs:number format="i"/> </fo:bock> <xs:appy-tempates/> </fo:fow> </fo:page-sequence> </xs:tempate> <xs:tempate match="act" mode="toc"> <fo:bock> <fo:basic-ink interna-destination="{generate-id()}"> <xs:text>act </xs:text> <xs:number/> </fo:basic-ink> <fo:eader eader-ength="5cm" eader-pattern="dots" eader-aignment="reference-area"/> p. <fo:page-number-citation ref-id="{generate-id()}"/> </fo:bock> <xs:appy-tempates mode="toc"/> </xs:tempate> <xs:tempate match="scene" mode="toc"> <fo:bock text-indent="2em"> <fo:basic-ink interna-destination="{generate-id()}"> <xs:text>scene </xs:text> Introduction to XSL Max Froumentin - W3C 25 of 30

<xs:number/> </fo:basic-ink> <fo:eader eader-ength="5cm" eader-pattern="dots"/> p. <fo:page-number-citation ref-id="{generate-id()}"/> </fo:bock> </xs:tempate> <xs:tempate match="stagedir"> <fo:bock text-aign="center" font-size="10pt" font-stye="itaic" space-before=".5em"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="speaker"> <fo:bock text-aign="center" font-size="10pt" space-before="1em" space-after=".5em"> <xs:appy-tempates/> </fo:bock> </xs:tempate> <xs:tempate match="line"> <fo:bock> <xs:appy-tempates/> Introduction to XSL Max Froumentin - W3C 25 of 30

Exampe: Pay to FO </fo:bock> </xs:tempate> </xs:styesheet> Introduction to XSL Max Froumentin - W3C 25 of 30

Top-eve Tempate Here we set the page format, running headers and footers, and coumns Page Format <xs:tempate match="/"> <fo:root> <fo:ayout-master-set> <fo:simpe-page-master master-name="artice-page" page-height="297mm" page-width="210mm" margin-top="20mm" margin-bottom="10mm" margin-eft="10mm" margin-right="10mm"> <fo:region-body region-name="main" coumn-count="2"/> <fo:region-before region-name="header" extent="10pt"/> <fo:region-after region-name="header" extent="10pt"/> </fo:simpe-page-master> Page Sequence Master <fo:page-sequence-master master-name="artice-sequence"> <fo:singe-page-master-reference master-name="artice-page"> </fo:page-sequence-master> Introduction to XSL Max Froumentin - W3C 26 of 30

Page Sequence Fow Contains static-content (headers, footers, siders) And main text fow Contains bocks, which contains text and inines Introduction to XSL Max Froumentin - W3C 26 of 30

I18N Formatting Objects and Properties fonts and Unicode character sets: [exampe1], [exampe2] writing-mode Introduction to XSL Max Froumentin - W3C 27 of 30

baseine contro dominant-baseine(of the principa font) Modified font size. Baseine tabe is scaed and reaigned on the dominant baseine: <fo:inine>apguru <fo:inine font-size=".75em" dominant-baseine="reset-size" aignment-baseine="hanging">exji</fo:inine> </fo:inine> 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 fo:eader fo:externa-graphic, fo:instream-foreign-object fo:footnote fo:page-number, fo:page-number-reference fo:ist, fo:tabe, fo:foat Dynamic properties (e.g. inks) And Properties Aura Properties (pitch, azimuth, etc.) Hyphenation contro (country, hyphenation-character) Keeps and Breaks Introduction to XSL Max Froumentin - W3C 28 of 30

Introduction to XSL Max Froumentin - W3C 28 of 30

Exampe: mixed writing modes Introduction to XSL Max Froumentin - W3C 29 of 30

If you are sti interested... Status of the specifications XSLT 1.0 and XPath 1.0 are W3C recommendations Requirement documents for XSLT2.0 and XPath2.0 are avaiabe XPath2.0 is now being deveoped (with XML Query) XSL 1.0 (FO) is a Candidate Recommendation Impementations Many impementations of XSLT1.0 exist: xt, Saxon, Orace, Sun, Mozia, (cient side), MSXML (cient side), Lotus, Unicorn, ibxm, most of them free XSL 1.0: 7+ impementations: RenderX, Antenna House, FOP Introduction to XSL Max Froumentin - W3C 30 of 30

(does SVG), PassiveTeX (does MathML), etc. The Future XSL 1.0 wi move to Recommendation Interoperabiity: incude SVG and MathML in XSL. Appications: pubishers wi be abe to put pubications on the web as easiy as printing them Introduction to XSL Max Froumentin - W3C 30 of 30