11. Formatting documents for output XML tags convey semantics of - - PowerPoint PPT Presentation

11 formatting documents for output
SMART_READER_LITE
LIVE PREVIEW

11. Formatting documents for output XML tags convey semantics of - - PowerPoint PPT Presentation

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


slide-1
SLIDE 1

XML-11 J. Teuhola 2013 189

  • 11. Formatting documents for output
  • XML tags convey semantics of elements.
  • Additional declarations are needed for specifying the
  • utput 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.

slide-2
SLIDE 2

XML-11 J. Teuhola 2013 190

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.
slide-3
SLIDE 3

XML-11 J. Teuhola 2013 191

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 }

slide-4
SLIDE 4

XML-11 J. Teuhola 2013 192

Special selections in CSS

  • * {…} applies to all components that do not have an
  • verriding style.
  • e1 e2 {…} applies to e2-elements, but only as

descendants of e1.

  • e1 > e2 {…} applies to e2-elements, but only as children
  • f 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
  • n the screen (e.g. clicked hyperlink changes color).
slide-5
SLIDE 5

XML-11 J. Teuhola 2013 193

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

slide-6
SLIDE 6

XML-11 J. Teuhola 2013 194

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/ )

slide-7
SLIDE 7

XML-11 J. Teuhola 2013 195

XSL-FO formatting workflow

XSLT processor XSLT stylesheet XML doc XSL-FO docum. Images, fonts &

  • aux. files

FO-to-pdf formatter pdf doc

slide-8
SLIDE 8

XML-11 J. Teuhola 2013 196

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.
slide-9
SLIDE 9

XML-11 J. Teuhola 2013 197

XSL-FO layout overview

  • Box structure
  • Page regions

Content area Padding area Border Margin Top-margin Region-before Region-after Bottom-margin Region body Region-start Region-end Left-margin Right-margin

slide-10
SLIDE 10

XML-11 J. Teuhola 2013 198

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>

slide-11
SLIDE 11

XML-11 J. Teuhola 2013 199

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>

slide-12
SLIDE 12

XML-11 J. Teuhola 2013 200

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
  • bjects (graphics, footnotes, page number,
  • ther blocks).
slide-13
SLIDE 13

XML-11 J. Teuhola 2013 201

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>

slide-14
SLIDE 14

XML-11 J. Teuhola 2013 202

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>

slide-15
SLIDE 15

XML-11 J. Teuhola 2013 203

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>

slide-16
SLIDE 16

XML-11 J. Teuhola 2013 204

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> …

slide-17
SLIDE 17

XML-11 J. Teuhola 2013 205

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>

slide-18
SLIDE 18

XML-11 J. Teuhola 2013 206

Pdf document of the example, produced by Apache/FOP

slide-19
SLIDE 19

XML-11 J. Teuhola 2013 207

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; }

slide-20
SLIDE 20

XML-11 J. Teuhola 2013 208

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