Presentation of XML Documents Patryk Czarnik Institute of Informatics University of Warsaw XML and Modern Techniques of Content Management – 2012/13 Stylesheets Separation of content and formatting Separating content and formatting According to XML best practices, documents should contain: “pure” content / data markup for structure and meaning (“semantic” or “descriptive” markup) no formatting How to present? “hard-coded” interpretation of known document types, e.g. Libre Office rendering Writer document importing or pasting content into word processor or DTP tool and manual or automatic formatting, e.g. Adobe InDesign approach external style sheets Patryk Czarnik 05 – Presentation XML 2012/13 4 / 1 Idea of stylesheet <person id="102103" position="specialist"><person id="102105" position="assistant"> <first-name>Dawid</first-name> <first-name>Arkadiusz</first-name> <last-name>Paszkiewicz</last-name> <last-name>Gierasimczyk</last-name> <phone type="office">+48223213203</phone> <phone type="office">+48223213213</phone> <phone type="fax">+48223213200</phone> <phone type="mobile">+48501502503</phone> <email>[email protected]</email> <email>[email protected]</email> </person> </person> * font 'Times 10pt' * yellow backgorund * 12pt for name * blue font and border * abbreviation before * italic font for name phone number * typewritter font for email Stylesheets Separation of content and formatting Benefits of content and formatting separation General advantages of descriptive markup better content understanding and easier analysis Ability to present in the same way: the same document after modification another document of the same structure Formatting managed in one place easy to change style of whole class of documents Ability to define many stylesheets for a document class, depending on purpose and expectations: medium (screen / paper / voice) expected number of details (full report / summary) reader preferences (font size, colors, . ) Patryk Czarnik 05 – Presentation XML 2012/13 6 / 1 Stylesheets Separation of content and formatting Standards related to XML presentation General: Associating Style Sheets with XML Documents Stylesheet languages: DSSSL (historical, applied to SGML) Document Style Semantics and Specification Language CSS Cascading Style Sheets XSL Extensible Stylesheet Language Patryk Czarnik 05 – Presentation XML 2012/13 7 / 1 Stylesheets Associating style with document Associating Style Sheets with XML Documents W3C Recommendation Processing instruction xml-stylesheet . One style sheet . .<?xml-stylesheet type="text/xsl" href="default.xsl"?> . Alternative style sheets . <?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" ?> Patryk Czarnik 05 – Presentation XML 2012/13 8 / 1 CSS Idea and applications Cascading Style Sheets Beginnings of style sheets idea: 1970s motivation — different printer languages and properties CSS beginnings: 1994 CSS Level 1 Recommendation: December 1996 CSS Level 2 Recommendation: May 1998 implemented (more or less completely) in present-day internet browsers CSS 2.1 Recommendation: June 2011 CSS 2 corrected and made less ambiguous also, a bit less ambitious (unsupported features thrown out) CSS Level 3 — work still in progress: modularisation new features supported in modern browsers Patryk Czarnik 05 – Presentation XML 2012/13 10 / 1 CSS Idea and applications Applications of CSS First and main application: style for Web sites Separation of content and formatting for HTML Simple style sheets for XML . Idea of accessibility . Content should be accessible for all people, despite their personal or technical disabilities. Support in CSS: media-dependent styles alternative presentation methods (e.g. voice) enabling reader to provide her/his own style (e.g. larger font and contrast colors for people with eyesight disability) . Patryk Czarnik 05 – Presentation XML 2012/13 11 / 1 CSS CSS sheet structure Example XML . <company> <name>Extremely professional company</name> <department id="acc"> <name>Accountancy</name> <person id="102103" position="specialist"> <first-name>Dawid</first-name> <last-name>Paszkiewicz</last-name> <phone type="office">+48223213203</phone> <phone type="fax">+48223213200</phone> <email>[email protected]</email> </person> <person id="102104" position="chief"> <first-name>Monika</first-name> <last-name>Domżałowicz</last-name> <phone type="office">+48223213200</phone> <phone type="mobile">+48501502513</phone> <email>[email protected]</email> </person> <person id="102105" position="assistant"> <first-name>Arkadiusz</first-name> <last-name>Gierasimczyk</last-name> .... Patryk Czarnik 05 – Presentation XML 2012/13 12 / 1 CSS CSS sheet structure Example stylesheet . person { Terminology display: block; . margin: 10px auto 10px 20px; rule padding: 0.75em 1em; selector { width: 200px; property: value; border-style: solid; property: value border-width: 2px; } border-color: #003399; . background-color: #F6F6F6; } person[position='chief'] { background-color: #DDFFDD; } first-name, last-name { display: inline; font-size: 12pt; } person[position='chief'] last-name { font-weight: bold; } .... Patryk Czarnik 05 – Presentation XML 2012/13 13 / 1 CSS CSS sheet structure Result of formatting Patryk Czarnik 05 – Presentation XML 2012/13 14 / 1 CSS CSS sheet structure Selectors person — element name first-name, last-name — two elements department name — descendant department > name — child A + B — element B directly following A name:first-child — ‘name’ being first child person[position] — test of attribute existence person[position='chief'] — attribute value test person[position~='chief'] — value is element of list person#k12 — value of ID-type attribute ol.staff — equivalent to ol[class~='staff'] (HTML specific) Patryk Czarnik 05 – Presentation XML 2012/13 15 / 1 CSS Formatting CSS visualisation principles . Blocks . Content arranged into blocks of different kind display property establishes kind of block: block — regular block with height and width inline — fragment of text, subject to line wrapping other specific objects (tables, lists, etc.) . Box model . Blocks nesting reflects nesting of elements in source document Additionally: borders, margins, relative or absolute positioning . Patryk Czarnik 05 – Presentation XML 2012/13 16 / 1 CSS Formatting CSS visualisation principles (2) . Inheritance . Nested elements inherit properties from parents does not apply to all properties . Formatting . Properties for various aspects of formatting size, position, borders, and margins text and fonts colour and background user interaction basic pagination properties aural properties . Patryk Czarnik 05 – Presentation XML 2012/13 17 / 1 CSS Formatting Some other capabilities of CSS . CSS 2 . Medium-dependent style Inserting content not existing in source document (labels etc.) Multi-level counters . CSS 3 . Animation and effects Multi-column text More selectors Support for XML namespaces . Patryk Czarnik 05 – Presentation XML 2012/13 18 / 1 CSS Formatting CSS capabilities and advantages Rich visual formatting capabilities especially for single elements Elements distinguished basing on name placement within document tree existence and value of attributes Support internet browsers authoring tools Easy to write simple stylesheets :) Patryk Czarnik 05 – Presentation XML 2012/13 19 / 1 CSS Formatting CSS lacks and drawbacks Only visualisation not conversion to other formats Some visual formatting issues e.g. confusing block size computing (moreover, for years incorrectly implemented in IE) Not possible: distinguish elements basing on their contents repeating the same content several times presenting elements in different order than in source (no general solution, only relative/absolute positioning) complex logical conditions data processing (e.g. summing numeric values) Patryk Czarnik 05 – Presentation XML 2012/13 20 / 1 XSL Presentation by transformation Presentation by transformation <xsl:template> <h2> <xsl:value-of> <table> <person> <xsl:variable> <tr> <first-name> <td> <last-name> <salary> Definition of transformation (in role of styelsheet) XML Document for ("pure data") direct presentation In order to present a document, we can transform it into a format, that we know how to present. Examples of “presentable” XML formats: XHTML XSL Formatting Objects Patryk Czarnik 05 – Presentation XML 2012/13 22 / 1 XSL Presentation by transformation Extensible Stylesheet Language (XSL) First generation of recommendations (1999 and 2001): XSL (general framework, XSL Formatting Objects language) XSLT (transformation language) XPath (expression language, in particular paths addressing document fragments) XSL stylesheet — transformation from XML to XSL-FO usually for a class of documents (XML application) in practice, transformation to other formats, often (X)HTML Patryk Czarnik 05 – Presentation XML 2012/13 23 / 1 XSL Presentation by transformation Original idea of XSL cite: W3C, XSL 1.0 Patryk Czarnik 05 – Presentation XML 2012/13 24 / 1 XSL Introduction to XSL Transformations XSLT — XSL Transformations Application of XML (of course) Transformation definition (“transformation” or “stylesheet”) specifies how a source document translates into a result document Transformation at document tree level Patryk Czarnik 05 – Presentation XML 2012/13 25 / 1 XSL Introduction to XSL Transformations XSLT — stylesheet example . Transformation from staff-XML