11. Formatting documents for output
• XML tags convey semantics of elements. • Additional declarations are needed for specifying the output format. • Two main alternatives: – Cascading Style Sheets (CSS): * Straightforward, non-XML syntax, * maintains the element order, * no transformation needed. – XSL Formatting Objects (XSL-FO): * XML application, XML syntax, * usually result of XSLT transformation, * describes the resulting page structure.
XML-11 J. Teuhola 2013 189 Cascading Style Sheets (CSS)
• Three levels: CSS1, CSS2, CSS3; CSS2 best supported, CSS3 rather new. • A CSS stylesheet is a separate file, attached to the source XML document by the processing instruction: css” charset=”...” title=”…” media=”…” …?> • Media alternatives: screen, print, handheld, tv, … • CSS does not follow the XML syntax.
XML-11 J. Teuhola 2013 190 CSS syntax
• Consists of property lists attached to elements, describing the style and layout, e.g.
/* Heading style for course name */ course-name { display: block; font-family: Helvetica, Arial, sans-serif; font-size: 24pt; font-weight: bold; text-align: center }
XML-11 J. Teuhola 2013 191 Special selections in CSS
• * {…} applies to all components that do not have an overriding style. • e1 e2 {…} applies to e2-elements, but only as descendants of e1. • e1 > e2 {…} applies to e2-elements, but only as children of e1. • e1 + e2 {…} applies to e2-elements, but only as next siblings of e1. • e1[a1] {…} applies to e1-elements having attribute a1. • e1[a1=v1] {…} applies to e1-elements having an attribute a1 with value = v1. • Other selectors exist that are sensitive to user actions on the screen (e.g. clicked hyperlink changes color).
XML-11 J. Teuhola 2013 192 Various properties in CSS • Style properties: display (inline, block, list-item, table, inline-table, table- row, table-cell, …, none), list-style-type, list-style- position, … • Font properties: font-family, font-style, font-size, font-variant, font-weight, font-stretch • Text properties: text-indent, text-align, text-decoration, text-transform, white-space • Color properties: color, background-color, border-color
XML-11 J. Teuhola 2013 193 XSL Formatting Objects (XSL-FO) • ’Second half’ of the XSL recommendation • Is an XML application, uses XML syntax • Typical steps: XSLT-transform to XSL-FO, then rendering by a special utility, e.g. to PDF. • The rendering engine decides the exact placement, but XSL-FO document gives hints and instructions. • Example engines: –Apache FOP Æ PDF, SVG (http://xml.apache.org/fop/) – IBM XSL Formatting Object Composer (XFC) Æ screen, PDF (http://www.xml-ces.org/download/ibm- xsl-formatting-object-composer/ )
XML-11 J. Teuhola 2013 194 XSL-FO formatting workflow
XML doc XSLT XSL-FO processor docum. FO-to-pdf pdf doc XSLT formatter stylesheet Images, fonts & aux. files
XML-11 J. Teuhola 2013 195 XSL-FO general layout
• Page-oriented layout consisting of nested rectangular boxes. •Box types: block area, inline area, line area, glyph area. • Three ’layers’ around the box content: padding, border and margin. • Text properties of the nearest enclosing box are applied. Properties are described by attributes in the box-defining elements. • Most of the properties are the same as in CSS.
XML-11 J. Teuhola 2013 196 XSL-FO layout overview
• Box structure • Page regions
Top-margin Region-before
Content area Region body Left-margin Region-start Region-end Padding area Right-margin Border Margin
Region-after Bottom-margin
XML-11 J. Teuhola 2013 197 Structure of an XSL-FO document
XML-11 J. Teuhola 2013 198 XSL-FO page master declaration example
XML-11 J. Teuhola 2013 199 Including data content in XSL-FO pages
XML-11 J. Teuhola 2013 200 XSLT Æ XSL-FO example
XML-11 J. Teuhola 2013 201 XSLT Æ XSL-FO example (cont.)
XML-11 J. Teuhola 2013 202 Sample document corresponding to the example stylesheet
XML-11 J. Teuhola 2013 204 Result of XSLT transformation (cont.)
XML-11 J. Teuhola 2013 206 XSL-FO text block properties vs. CSS • Example:
•CSS: – Straightforward, easy-to-learn – The right tool for web pages – Rather good support among browsers • XSL-FO: – More powerful than CSS: multi-column, footnotes, running headers, page numbers, conditional formatting, etc. – Will possibly compete with TEX / LaTex – Not meant for browsers
XML-11 J. Teuhola 2013 208