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: <?xml-stylesheet type=”text/css” href=”xxx.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 version=”1.0” encoding=”UTF-8”?> <fo:root xmlns:fo=”http://www.w3.org/1999/xsl/Format”> <fo:layout-master-set> <!-- page masters --> </fo:layout-master-set> <fo:page-sequence master-reference=”xxx”> <!-- page data --> </fo:page-sequence> </fo:root> XML-11 J. Teuhola 2013 198 XSL-FO page master declaration example <fo:simple-page-master margin-left=”1.5in” margin-right=”1in” margin-top=”1.5in” margin-bottom=”1in” page-width=”8.5in” page-height=”11in” master-name=”xxx”> <fo:region-before extent=”0.5in”/> <fo:region-after extent=”0.5in”/> <fo:region-start extent=”1in”/> <fo:region-end extent=”1in”/> <fo:region-body margin-left=”0.5in” margin-right=”0.5in” margin-top=”0.5in” margin-bottom=”0.5in”/> </fo:simple-page-master> XML-11 J. Teuhola 2013 199 Including data content in XSL-FO pages <fo:page-sequence master-reference=”xxx”> <fo:flow flow-name=”xsl-region-body”> <!-- Contents --> </fo:flow> </fo:page-sequence> • Specifies the region where the contents ’flow’. • Components of fo:flow: fo:block, fo:block-container, fo:list-block, fo:table, fo:table-and-caption, … • Blocks: Raw text plus possibly formatting objects (graphics, footnotes, page number, other blocks). XML-11 J. Teuhola 2013 200 XSLT Æ XSL-FO example <?XML version=”1.0”?> <xsl:stylesheet version=”1.0” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:fo=”http://www.w3.org/1999/XSL/Format”> <xsl:template match=”/”> <fo:root> <fo:layout-master-set> … </fo:layout-master-set> <fo:page-sequence master-reference=”xxx”> <fo:flow flow-name=”xsl-region-body” <xsl:apply-templates/> </fo:flow> </fo:page-sequence> </fo:root> </xsl:template> XML-11 J. Teuhola 2013 201 XSLT Æ XSL-FO example (cont.) <xsl:template match="heading"> <fo:block font-family="Helvetica, Arial, sans-serif" font-size="18pt" padding-bottom="0.5in"> <xsl:apply-templates/> </fo:block> </xsl:template> <xsl:template match="paragraph"> <fo:block font-family="Times, 'Times New Roman', serif" font-size="12pt" padding-bottom="0.3in"> <xsl:apply-templates/> </fo:block> </xsl:template> </xsl:stylesheet> XML-11 J. Teuhola 2013 202 Sample document corresponding to the example stylesheet <?xml version="1.0" encoding="UTF-8"?> <story> <heading> This is the title </heading> <paragraph> This is the plain text that is supposed to be printed using a different font family and a smaller font size, compared to the heading. </paragraph> <paragraph> This is the second paragraph, which is included to test how multiple subsequent paragraphs are formatted into pdf, using Apache's FOP utility. </paragraph> </story> XML-11 J. Teuhola 2013 203 Result of XSLT transformation to XSL-FO <?xml version="1.0" encoding="UTF-8"?><fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master margin-left="1.5in" margin-right="1in“ margin-top="1.5in" margin-bottom="1in" page-width="8.5in“ page-height="11in" master-name="xxx"> <fo:region-before extent="0.5in"/> <fo:region-after extent="0.5in"/> <fo:region-start extent="1in"/> <fo:region-end extent="1in"/> <fo:region-body margin-left="0.5in" margin-right="0.5in“ margin-top="0.5in“ margin-bottom="0.5in"/> </fo:simple-page-master> </fo:layout-master-set> … XML-11 J. Teuhola 2013 204 Result of XSLT transformation (cont.) <fo:page-sequence master-reference="xxx"> <fo:flow flow-name="xsl-region-body"> <fo:block font-family="Helvetica, Arial, sans-serif“ font-size="18pt" padding-bottom="0.5in"> This is the title </fo:block> <fo:block font-family="Times, 'Times New Roman', serif“ font-size="12pt" padding-bottom="0.3in"> This is the plain text that is supposed to be printed using a different font family and a smaller font size, compared to the heading. </fo:block> <fo:block font-family="Times, 'Times New Roman', serif" font-size="12pt" padding-bottom="0.3in"> This is the second paragraph, which is included to test how multiple subsequent paragraphs are formatted into pdf, using Apache's FOP processor. </fo:block> </fo:flow> </fo:page-sequence> </fo:root> XML-11 J. Teuhola 2013 205 Pdf document of the example, produced by Apache/FOP XML-11 J. Teuhola 2013 206 XSL-FO text block properties vs. CSS • Example: <fo:block font-family=”Helvetica, Arial, sans-serif”> font-size=”24pt” font-weight=”bold” margin-top=”12pt” margin-left=”10pt” text-align=”center”> • Corresponding CSS definition: elem-name { display=block; font-family=Helvetica, Arial, sans-serif; font-size=24pt; font-weight=bold; margin-top=12pt; margin-left=10pt; text-align=center; } XML-11 J. Teuhola 2013 207 CSS or XSL-FO? •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.