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

Jul 22, 2023 832 likes •1.06k views

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