Presentation of XML Documents Patryk Czarnik Institute of Informatics University of Warsaw XML and Modern Techniques of Content Management – 2010/11 Stylesheets Separating content and presentation Associating style with document CSS Idea and applications CSS sheet structure Formatting XSL Presentation by transformation XSLT — Introduction XSL-FO Separating content and presentation I According to XML best practices documents contain: I content/data I markup for structure and meaning (semantical markup) I no formatting I How to present? I “hard-coded” interpretation of known document types I external style sheets Stylesheets idea <person position="starszy <personreferent position="> "starszy referent"> <name>Dawid</name> <name>Arkadiusz</name> <surname>Paszkiewicz</surname> <surname>Gierasimczyk</surname> <phone type="office">+48223213203 <phone type="off</telefon>ice">+48223213213</phone> <phone type="mobile">+48501502503 <phone type="mob</telefon>ile">+48501502503</phone> <email>[email protected] <email>gieras@su</email> perfirma.pll</email> </pracownik> </pracownik> * yellow backgorund * font 'Times 10pt' * blue font and border * 12pt for name * italic font for name * abbreviation before * typewritter font for email phone number Advantages of separating content and formatting I General advantages of semantical markup I better content understanding and easier analysis I Ability to show again I the same document after modification I another document of the same structure I Formatting managed in one place I easy to change look of whole class of documents I Ability to define many stylesheets for a document, depending on: I purpose I medium (screen, paper, voice) I detail level (full report, summary) I reader preferences (font size, colors, . ) Standards related to XML presentation I General: I Associating Style Sheets with XML documents I Stylesheet languages: I DSSSL (deprecated, applied to SGML) Document Style Semantics and Specification Language I CSS Cascading Style Sheets I XSL Extensible Stylesheet Language Associating Style Sheets with XML documents I W3C Recommendation I Processing instruction xml-stylesheet One stylesheet <?xml-stylesheet type="text/xsl" href="default.xsl"?> Alternative stylesheets <?xml-stylesheet title="Blue" type="text/css" href="blue.css" ?> <?xml-stylesheet title="Yellow" alternate="yes" type="text/css" href="yellow.css" ?> <?xml-stylesheet title="Big fonts" alternate="yes" type="text/css" href="big.css" ?> Cascading Style Sheets I Style sheets idea beginnings: 1970s I motivation — different printer languages and properties I CSS beginnings: 1994 I CSS Level 1 Recommendation: December 1996 I CSS Level 2 Recommendation: May 1998 I implemented (more or less completly) in present-day internet browsers I CSS Level 3 — work still in progress: I modularisation, I new features. I CSS 2.1 — Candidate Recommendation: I CSS 2 corrected and made less ambiguous I also, a bit less ambitious (unsupported features thrown out) CSS applications I First and main application: style for WWW sites I Separation of content and formatting for HTML I Simple stylesheets for XML Ideologically important ! especially from Level 2 ! according to web accessibility I support for alternative presentation methods (e.g. voice) I enabling reader to provide her/his own style (e.g. larger font and contrast colors for people with eyesight disability) Example XML <department id="D07"> <name>Accountancy</name> <person position="accountant" id="102103"> <name>Dawid</name><surname>Paszkiewicz</surname> <phone type="office">+48223213203</phone> <phone type="mobile">+48501502503</phone> <email>[email protected]</email> </person> < person position="manager" id="102104"> <name>Monika</name><surname>Domzałowicz</surname>˙ <phone type="office">+48223213200</phone> <phone type="mobile">+48501502513</phone> <email>[email protected]</email> </person> ... </department> Example stylesheet person { display: block; margin: 10px auto 10px 30px; padding: 0.75em 1em; width: 200px; border-style: solid; border-width: 2px; border-color: #002288; background-color: #FFFFFF; } person[position=’manager’] { background-color: #DDFFDD; } name, surname { display: inline; font-size: larger; } person[position=’manager’] name { font-weight: bold; } Result of formatting Selectors I person — element name I name, surname — two elements I department name — descendant I department > name — child I A + B — element B directly following A I name:first-child — ‘name’ being first child I person[position] — test of attribute existence I person[position=’manager’] — attribute value test I person[position~=’manager’] — value is element of list I person#k12 — ID-type attribute value I ol.staff — equivalent to ol[class~=’staff’] (HTML specific). Style depending on media type Example @media print { person { background-color: white; font-family: serif; } } @media screen { person { background-color: yellow; font-family: sans-serif; } } @media all { person { border-style: solid; } } display property I Kind of visual object representing an element I Allowed values: inline, block, list-item, run-in inline-block table, table-cell,..., none I Basic property in case of XML visualisation I Rare exeplicit use for HTML (browsers know default values for HTML elements) Boxes and positions I Blocks nested according to nesting of elements in document I Blocks layout handled by CSS I Custom positioning possible I margin, padding — external and internal margins I border-style, border-color, border-width — border properties I position (static | relative | absolute | fixed)— positioning policy I left, right, top, bottom — position coordinates I width, height, min-width, max-height, . — size Boxes, margins, borders cite: W3C, CSS Level 2 Recommendation Margins and borders — example person { display: block; margin: 10px auto 10px 30px; padding: 0.75em 1em; width: 200px; border-style: solid; border-width: 2px; border-color: #002288; background-color: #FFFFFF; } Text and font properties I color, background-color, background-image — color and background, I font-family — name or generic family of font I font-size I font-style, font-weight I text-decoration I text-align Fonts and colors example company { display: block; background-color: #EEFFFF; color: rgb(0, 0, 33%); font-family: ’Bookman’, ’Times New Roman’, serif; font-size: 14pt; } company > name { font-size: 1.5em; font-family: ’Verdana’, ’Arial’, sans-serif; font-weight: bold; text-align: center; } department > name { font-size: 1.3em; font-family: ’Verdana’, ’Arial’, sans-serif; font-weight: bold; font-style: italic; } Generated content I Ability to show text not occurring in document text content I Access to attribute values I Automatic numbering Example person:before { content: attr(position); } phone[type=’office’]:before { content: ’tel. ’; } phone[type=’mobile’]:before { content: ’kom. ’; } CSS capabilities and advantages I Great visual formatting capabilities I especially for single elements I Elements distinguished basing on I name I placement within document tree I existence and value of attributes I Support I internet browsers I authoring tools I Easy to write simple stylesheets :) CSS lacks and drawbacks I Only visualisation I no conversion to other formats I Some visual formatting issues I e.g. confusing block size computing (moreover, incorrectly performed in the most popular Web browser) I Not possible (CSS Level 2): I repeating the same content several times I distinguish elements basing on their contents I complex logical conditions I data processing (e.g. summing numeric values) I access to many documents at once I Some things require more work than they should, e.g.: I to show attribute values I to change elements order Presentation by transformation I In order to present a document, we can transform it into a format, that we know how to present. I Examples of “presentable” XML formats: I XHTML I XSL Formatting Objects Extensible Stylesheet Language (XSL) I First generation of recommendations (1999 and 2001): I XSL (general framework, XSL Formatting Objects language) I XSLT (transformation language) I XPath (expression language, in particular paths addressing document fragments) I XSL stylesheet — transformation from XML to XSL-FO I usually for a class of documents (XML application) I in practice, transformation to other formats, often (X)HTML XSL Idea cite: W3C, XSL 1.0 XSLT — status I Created within XSL I Applications beyond XML visualisation I Version 1.0: I October 1999, connected with XPath 1.0 I good support in tools and libraries I Version 2.0: I January 2007, connected with XPath 2.0 and XQuery 1.0, I new features I less software support XSLT — support I XSLT 2.0 processors: I Saxon I Java and .NET libraries, command-line applications I free (Open Source) basic version I commercial schema aware version I XML Spy (commercial windows application) I XSLT 1.0 processors: I internet browsers I Xalan (Java and C++ libraries) I xsltproc, part of libxml (C, basically for Linux) I XML extensions of database engines I ... I Authoring tools I raw text editors and programmer environments (e.g. Eclipse) I specialised tools — rather paid (e.g. XML Spy, oXygen). XSLT — sheet example 1/2 <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" encoding="utf-8" /> <xsl:template match="/"> <html> <head> <title>Staff list</title> </head> <body> <h1>Staff list</h1> <ul> <xsl:apply-templates select="//person"/> </ul> </body> </html> </xsl:template>