1 xsl: formatting objects (fo) xsl-fo is about formatting xml data for output

1

XSL: Formatting Objects (FO)

XSL-FO is about formatting XML data for output

2

• Introduction

• Apache-FOP

• Document Structure

• Output

– Page

– Flow

– Block

– Inline

• List

• Table

• Links and Cross-Reference

• Graphics

3

Introduction• What is XSL-FO (formatting objects)?

– XSL-FO stands for Extensible Stylesheet Language Formatting Objects

Styling is both about transforming and formatting information – XSL-FO is about formatting

XSL-FO is an XML based markup language describing the formatting of XML data for output to screen, paper or other media

– XSL-FO is a W3C Recommendation

XSL-FO became a W3C Recommendation 15. October 2001. Formally named XSL

– XSLFO is an XML vocabulary that is used to specify a pagination and othe

r styling for page layout output

4

Introduction (cont.)

• XSLFO can be used in conjunction with XSLT to convert from any XML format into a paginated layout ready for printing or displaying

• XSLFO defines a set of elements in XML that describes the way pages are set up.

• The contents of the pages are filled from flows.

• There can be static flows that appear on every page (for headers and footers) and the main flow which fills the body of the page

5

Introduction (cont.)

• The Object Formatting Process

– Use an XSLT stylesheet to transform the XML document into a file of XSL-FO elements

– To perform the transformation, you simply invoke the XSLT processor with the XML document and the stylesheet

An XSLT stylesheet that converts XHTML elements into formatting objects

– Use a rendering engine (for example, FOP) to convert the XSL-FO elements into a PDF file

6

Software Tool Set Up

• XSL-FO Processors

• FOP (Formatting Objects Processor) from apache

– http://www.apache.org/dyn/closer.cgi/xml/fop

– Version: the 0.20.5 version of FOP

• Requirement

– XML parser

– XSLT Processor

– Apache Batik: an SVG library

http://www.apache.org/dyn/closer.cgi/xml/fop

7

Apache FOP

• Introduction

– FOP (Formatting Objects Processor) is the world's first print formatter driven by XSL formatting objects (XSL-FO)

– The world's first output independent formatter

– A Java application that reads a formatting object (FO) tree and renders the resulting pages to a specified output

– Output formats currently supported include PDF, PCL, PS, SVG, XML (area tree representation), Print, AWT, MIF and TXT

– The primary output target is PDF

– The latest version of FOP (0.20.5) is a partial implementation of the XSL-FO Version 1.0 W3C Recommendation

http://www.w3.org/TR/2001/REC-xsl-20011015/

8

Apache FOP (cont.)

9

Apache FOP (cont.)

• FOP process

– Uses the standard XSL-FO file format as input

<fo:XXX>

– Lays the content out into pages

– Renders it to the requested output

– One great advantage to using XSL-FO as input is that XSL-FO is itself an XML file, which means that it can be conveniently created from a variety of sources

– The most common method is to convert semantic XML to XSL-FO, using an XSLT transformation

10

Apache FOP (cont.)

• FOP Objectives

– The goals of the Apache XML FOP Project are to deliver an XSL-FO file to a PDF formatter

– Conformance to the XML 1.0 Recommendation, XSLT 1.0 Recommendation and the XML Namespaces Recommendation

– The FOP layout system is currently being rewritten to better support the XSL-FO standard

• For detail information regarding the spec. of FOP, visit:

http://xml.apache.org/fop/index.html

http://xml.apache.org/fop/index.html

11

XSL-FO Document

• XSL-FO documents are XML files with output information

– They contain information about the output layout and output contents

– XSL-FO documents are stored in files with a *.fo or a *.fob extension

• XSL-FO document structure at a glance

Most of the things in the figure never change

Outputslide

12

XSL-FO Document (cont.)

XSL-FO Document StructureXSL-FO documents have a structure like this:

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master master-name="A4">



</fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-reference="A4">



</fo:page-sequence>

</fo:root>

The <fo:root> contains a <fo:layout-master-set> and a <fo:page-sequence>. The <fo:layout-master-set> contains page layouts information, The <fo:page-sequence> contains actual content

13


• The <fo:root> element contains the XSL-FO document.

• It also declares the namespace for XSL-FO:

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> …………….  ……………. </fo:root>

Typically, the root element contains

• A <fo:layout-master-set>

• Followed by one or more <fo:page-sequence>s

14


The <fo:layout-master-set> element contains one or more page templates:





• The <fo:layout-master-set> element specifies page definitions.

• In a simple document, one layout might be enough,

• Complex documents typically have several page definitions.

• Use a <fo:simple-page-master> element to define each of the page layouts you need;

• Then you store them in the <fo:layout-master-set> element

15


• Each <fo:simple-page-master> element contains a single page template

• The element defines the layout for a particular page

• Each template must have a unique name (master-name):

16


• Here's an example,

• master-name

• Defines a name for this page master.

• You can create several different <fo:simple-page-master> elements

• Then refer to each of them as you need to use different page layouts throughout your document.

• margin-top and margin-bottom

• Define the margins at the top and bottom of the page.

• Acceptable units are points, picas, inches, and centimeters

<fo:simple-page-master master-name="main" margin-top="36pt" margin-bottom="36pt" page-width="8.5in" page-height="11in" margin-left="72pt" margin-right="72pt">

<fo:region-body margin="50pt" />


17


• page-width and page-height

• Define the size of the physical page.

• This example defines a letter-sized page;

• To use A4-sized paper, the attributes page-width="21cm" and page-height="29.7cm" would do the trick.

• margin-left and margin-right

• Define the margins at the left and right side of the page.

<fo:simple-page-master master-name="main" margin-top="36pt" margin-bottom="36pt" page-width="8.5in" page-height="11in" margin-left="72pt" margin-right="72pt">



18

Units in XSL-FO documents

XSL-FO supports these actual units for length properties, for measuring items such as margin-left, page-width, and page-height:

Unit Meaning

cm centimeters

mm millimeters

in inches

pt points (72 points = 1 inch)

pc picas (12 points = 1 pica, 6 picas = 1 inch)

px pixels (sometimes different from one formatter or device to the next, so be careful)

em the width of a capital M

19

The <fo:region-body> element

• The XSL-FO spec defines five regions on a page

– region-body defines the dimensions of the main area in the center of the page. Here's a sample:


– margins for the region-body area.

– region-before, the area at the top of the page (normally used for running heads)

– region-after, the area at the bottom of the page (normally used for running feet)

– region-start, the area to the left of the page

– region-end, the area to the right of the page

20

Margin Top

MarginLeft

Margin

Right

Margin Bottom

REGION BEFORE

REGION

START

REGION BODY

REGION

END

REGION AFTER

Note: These definitions assume that the text in your document goes from left to right and top to bottom

21

XSL-FO Document (cont.) -- Page

• One or more <fo:page-sequence> elements describe page contents (i.e., output pages)

• It defines the sequence of page layouts to be used within the document

• The master-reference attribute refers to the “master-name” of the <fo:simple-page-master> with the same name

• Each output page refers to a page master which defines the layout

• Each output page has a <fo:flow> element defining the output

• Each output page is printed (or displayed) in sequence

<fo:page-sequence master-reference="A4"> </fo:page-sequence>

Note: The master-reference "A4" does not actually describe a predefined page format. It is just a name. You can use any name like "MyPage", "MyTemplate", etc.

22

XSL-FO Output

• Output? How to insert some content to be rendered

• XSL-FO defines output inside <fo:flow> elements

• XSL-FO Page, Flow, and Block

– "Blocks" of content "Flows" into "Pages" and then to the output media

– XSL-FO output is normally nested inside <fo:block> elements, nested inside <fo:flow> elements, nested inside <fo:page-sequence> elements

<fo:page-sequence> <fo:flow flow-name="xsl-region-body"> <fo:block>  </fo:block> </fo:flow></fo:page-sequence>

Structure

What’s this?

23

An Output Example

<?xml version="1.0" encoding="ISO-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">






<fo:page-sequence master-reference="A4">

<fo:flow flow-name="xsl-region-body">

<fo:block>Hello W3Schools</fo:block>

<fo:block>Hello Class of Web ProgrammingII</fo:block>

</fo:flow>

</fo:page-sequence>

</fo:root>Simple1

Error in the text book

C:\WINDOWS\system32\cmd.exe

24

XSL-FO Output -- <fo:flow>

• <fo:page-sequence>: refers to slides #20

• XSL-FO pages are filled with data starts from <fo:flow> elements

• <fo:flow> defines some content that will be flowed within the current layout

• When the page is full, the same page master will be used over (and over) again until all the text is printed.

<fo:flow flow-name="xsl-region-body">

The legal values are:xsl-region-body (into the region-body) xsl-region-before (into the region-before) xsl-region-after (into the region-after) xsl-region-start (into the region-start) xsl-region-end (into the region-end)

format

25

XSL-FO Output -- <fo:block>

• Two main XSL-FO elements for formatting content are <fo:block> and <fo:inline>

• Blocks are sequences of output in rectangular boxes

• Think of it as similar to the HTML <p> element.

• A <fo:block> element always causes a line break

<fo:block border-width="1mm">

This block of output will have a one millimeter border around it.

</fo:block>

26

XSL-FO Output -- <fo:block>(cont.)

Since block areas are rectangular boxes, they share many common area properties:

space before and space after

margin

border

padding

Note: for the attributes of each,

refers to W3c spec.

• The content area contains the

actual content like text, pictures,

graphics, or whatever.

space before

margin

border

padding

content

space after

27

An XSL-FO Blocks Example

<fo:blockfont-size="14pt" font-family="verdana" font-color="red“space-before="5mm" space-after="5mm">W3Schools

</fo:block><fo:block

text-indent="5mm"font-family="verdana" font-size="12pt“space-before="5mm" space-after="5mm">At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

</fo:block>

Simple2

Normally XSL-FO document do not combine formatting information and content like we have done here


28

XSL-FO Output -- <fo:inline> • The <fo:inline> formatting object is commonly used for format

ting a portion of text

• It defines some text properties within an existing <fo:block>– If you want to italicize several words within a paragraph, as in the examp

le, you use <fo:inline> to do the job.

<fo:block font-size="20pt" line-height="30pt">This is a paragraph of text. font size = 20 pt, line height = 30pt, Notice that we applied fo:inline here: <fo:inline font-style="italic" font-weight="bold" color="red">

this meaningless prose</fo:inline> , the inline stops here. drones on and on, the FOP software automatically calculates line breaks for us. Isn't that fascinating?

</fo:block>Simple3


29

XSL-FO Output -- <fo:inline>

• Here's how you can use the attributes of XSL-FO <fo:inline> element to format text:– Bold text: Use the <fo:inline> element with an attribute of font-weight

="bold".

– Italicized text: Use the <fo:inline> element with an attribute of font-style="italic".

– Monospaced text: Use the <fo:inline> element with an attribute of font-family="monospace".

– Changing fonts: Use the <fo:inline> element with an attribute of font-family="serif" for a serif font (usually similar to Times-Roman).

– Use the attribute font-family="sans-serif" for a sans serif font (usually similar to Arial).

– See the FOP documentation for information on how to convert the fonts installed on your machine into fonts FOP can use

• Others: http://www.w3schools.com/xslfo/obj_inline.asp

http://www.w3schools.com/xslfo/obj_inline.asp

30

XSL-FO Properties

• Many XSL-FO properties are identical to the CSS properties you might recognize.

• XSL-FO and CSS also share the same way that elements usually inherit properties from their ancestors

• An XSL-FO property is just an XML attribute

31

XSL-FO -- list

• The three most common types of lists in HTML :

– unordered lists

– ordered lists

– definition lists

• When building these lists with XSL-FO, you must handle a number of things yourself:

– How much horizontal space separates the label of a list item (the bullet or number) and the item itself

– How much the list items are indented from the normal margins

32

XSL-FO – list (cont.)

• When building these lists with XSL-FO, you must handle a number of things yourself (cont.):

– What the bullet character is

– How much vertical spacing falls between list items

• Other properties

• Almost all of these properties are handled automatically in an HTML browser,

• but when you use formatting objects, it's up to you to define them.

33


• XSL-FO uses list-blocks to define lists

• There are four XSL-FO objects used to create lists:

– fo:list-block (contains the whole list)

– fo:list-item (contains each item in the list)

– fo:list-item-label (contains the label for the list-item - typically an <fo:block> containing a number, character, etc.)

– fo:list-item-body (contains the content/body of the list-item - typically one or more <fo:block> objects)

34


• XSL-FO uses list-blocks to define lists

• There are four XSL-FO objects used to create lists:

– fo:list-block (contains the whole list)

– fo:list-item (contains each item in the list)

– fo:list-item-label (contains the label for the list-item - typically an <fo:block> containing a number, character, etc.)

– fo:list-item-body (contains the content/body of the list-item - typically one or more <fo:block> objects)

<fo:list-block>

<fo:list-item>

<fo:list-item-label>

<fo:block/>

</fo:list-item-label>

<fo:list-item-body>

<fo:block/>

</fo:list-item-body>

</fo:list-item>

... More <fo:list-item>s

</fo:list-block>

35


• The main structure is the <fo:list-block>

• It contains some number of <fo:list-item>s,

• each of which contains

•A <fo:list-item-label>

•A <fo:list-item-block>

<fo:list-block>

…………

</fo:list-block>

<fo:list-item>

</fo:list-item>

<fo:list-item>…………..</fo:list-item>

<fo:list-item-label>………….<fo:list-item-label>

<fo:list-block>………….<fo:list-block>

36

XSL-FO – list (cont.) An Example

<fo:list-block><fo:list-item>

<fo:list-item-label> <fo:block>*</fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block>Volvo</fo:block> </fo:list-item-body>

</fo:list-item><fo:list-item>

<fo:list-item-label> <fo:block>*</fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block>Saab</fo:block> </fo:list-item-body>

</fo:list-item></fo:list-block>

list1


37

XSL-FO – list (cont.)• Trouble to separate the label and content?

• Time to look at some properties that can make a change

• Taking a look at this drawing that outlines a list and its properties – <fo:list-item-label end-indent="label-end()">: defines the distance from the normal endi

ng margin and the end of the <fo:list-item-body> elements

– <fo:list-item-body start-indent="body-start()">: defines the distance from the normal starting margin to the start of either the <fo:list-item-label> or <fo:list-item-body>.

The body-start() function returns the value of the start-indent property of <fo:list-item-label> plus the provisional-distance-between-starts property of <fo:list-block>.

label-end() function returns the value of the start-indent property of the <fo:list-item-body> element minus the value of the provisional-label-separation property of the <fo:list-item-block> element

38


• In the picture, two properties of the <fo:list-block> element,

– provisional-distance-between-starts : defines the distance between the start of the <fo:list-item-label> and the <fo:list-item-body>

– provisional-label-separation: defines the distance between the end of the <fo:list-item-label> and the start of the <fo:list-item-block>

• Here's a typical <fo:list-block> with these properties specified:

<fo:list-block provisional-distance-between-starts="0.75cm" provisional-label-separation="0.5cm">

• Let’s applied these properties to the previous examplelist2


39


• How to convert HTML tags to FO?

for example: <ol>

<item>List item 1.</item> <item>List item 2.</item> <item>List item 3.</item>

</ol>

• Refers to “formatting objects for lists”

http://www.w3.org/TR/xsl/slice6.html#section-N17076-Formatting-Objects-for-Lists

lists




40

XSL-FO – table <fo:table>

• The <fo:table> is used to format the tabular material of a table.

• The <fo:table> contains

– <fo:table-column>

– <fo:table-header>

– <fo:table-body>

– <fo:table-footer>

• Each of these elements has one or more <fo:table-row> objects, with one or more <fo:table-cell> objects:

XSL-FO element Description

<fo:table> Formats the tabular material of a

table

<fo:table-column> Formats the columns of a table

<fo:table-header> Defines a table header

<fo:table-body>Container for table rows and table

cells

<fo:table-footer> Defines a table footer

<fo:table-row> Defines a table row

<fo:table-cell> Defines a table cell

<fo:table-caption> Formats a table and its caption

41

XSL-FO – table <fo:table>

• The basic table structure

– Information of the table: caption, header, and footer

– The main complication in formatting XSL-FO tables with FOP is that you must specify the widths of all columns in the table

• A typical example:

table1


42

XSL-FO – table <fo:table>: An Example

• Three different styles of tables are presented in this example

• We can only demo here, refers the example code after class

tables


43

XSL-FO : links and Cross-Reference

• Related topics

– Creating anchor points

– Creating cross-references

– Creating Web links

• Anchor points

– Creating an anchor point is pretty simple; all you have to do is add an id attribute to an XSL-FO element

– You can add this attribute to just about any formatting object.

– Here's an example document heading with an id of “BID”

– This ID creates an anchor point in the XSL-FO file with the name “BID”.

– If the XSL-FO file contains another element with an id of “BID”, you'll get an error.

<fo:block id=“BID" font-size="18pt" line-height="21pt" font-weight="bold">

cross-references </fo:block>

44


• Cross-Reference

•Once you've created an anchor point, you can create a reference to it.

•Here's what a reference might look like:

<fo:block> For more information, see <fo:basic-link color="blue" internal-destination=“BID">

Links and cross-references</fo:basic-link>.

</fo:block>

interlink


45

XSL-FO : links and Cross-Reference• Web-Reference

• The main difference here is that the thing you're linking to isn't part of the PDF file.

• XSL-FO defines the external-destination property of the <fo:basic-link> element for this.

• Here's what an XSL-FO reference to a html file in local drive would look like

<fo:block>

For all the technical information you'd ever want, visit

<fo:basic-link color="blue"

external-destination="file://CompSci196.htm">

KIMO

</fo:basic-link>

and prepare to be amazed!

</fo:block> Externlink


46


• Example demo– Cross reference: Internal link

– Web reference: External link

links


47

XSL-FO Graphics

• To add graphics to a PDF file throughout the FO file, use the <fo:external-graphic> element.

– Here's an example:

<fo:external-graphic src="images/x.gif">

• You can use this element to embed GIF and JPEG images in PDF files.

• The XSL-FO spec also defines the height and width attributes;

• Those element and attributes help the FOP engine figure out how much room the graphic requires.

exmGraph


48

That’s it for today!

• Next week We’ll have

– XSL-FO vs. XSLT!

– XSL-FO Graphics – SVG

– Content pages

– Some advanced XSL-FO technologies

1 xsl: formatting objects (fo) xsl-fo is about formatting xml data for output

Documents