XSL: Formatting Objects (FO)

Transcript XSL: Formatting Objects (FO)

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
other 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
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
5
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
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
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 XSLFO, 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
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
Output
slide
12
XSL-FO Document (cont.)
XSL-FO Document Structure
XSL-FO documents have a structure like this:
The <fo:root> contains a <fo:layout-master-set>
and a <fo:page-sequence>.
<?xml version="1.0" The
encoding="ISO-8859-1"?>
<fo:layout-master-set> contains page layouts information,
The <fo:page-sequence> contains actual content
<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>
13
XSL-FO Document (cont.)
• 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
XSL-FO Document (cont.)
The <fo:layout-master-set> element contains one or more
page templates:
<fo:layout-master-set>

</fo:layout-master-set>
• 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
XSL-FO Document (cont.)
• 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):
<fo:simple-page-master master-name="A4">

</fo:simple-page-master>
16
XSL-FO Document (cont.)
• 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" />
</fo:simple-page-master>
17
XSL-FO Document (cont.)
• page-width and page-height
<fo:simple-page-master
master-name="main"
margin-top="36pt"
• Define the size of the physical page.
margin-bottom="36pt"
page-width="8.5in"
• This example defines a letter-sized page;
page-height="11in"
• To use A4-sized paper, the attributes page- margin-left="72pt"
margin-right="72pt">
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:region-body
margin="50pt" />
</fo:simple-page-master>
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:
<fo:region-body margin="50pt" />
– 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
REGION BEFORE
M
a
r
g
i
n
L
e
f
t
R
E
G
I
O
N
REGION BODY
S
T
A
R
T
R
E
G
I
O
N
E
N
D
M
a
r
g
i
n
R
i
g
h
t
REGION AFTER
Margin Bottom
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:simplepage-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
Structure
– "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>
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:layout-master-set>
<fo:simple-page-master master-name="A4">
<fo:region-body margin="50pt" />
Error in the
text book
</fo:simple-page-master>
</fo:layout-master-set>
<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>
Simple1
</fo:root>
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
space before
margin
border
padding
Note: for the attributes of each,
refers to W3c spec.
content
• The content area contains the
actual content like text, pictures,
graphics, or whatever.
space after
27
An XSL-FO Blocks Example
<fo:block
font-size="14pt"
font-family="verdana"
Normally XSL-FO document
font-color="red“
do not combine formatting
space-before="5mm"
information and content like
space-after="5mm">
we have done here
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
28
XSL-FO Output -- <fo:inline>
• The <fo:inline> formatting object is commonly used for
formatting 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
example, 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?
Simple3
</fo:block>
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 fontweight="bold".
– Italicized text: Use the <fo:inline> element with an attribute of fontstyle="italic".
– Monospaced text: Use the <fo:inline> element with an attribute of fontfamily="monospace".
– Changing fonts: Use the <fo:inline> element with an attribute of fontfamily="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
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 – list (cont.)
• 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 – list (cont.)
• XSL-FO uses list-blocks to define
lists
• There are four XSL-FO objects used
to create lists:
<fo:list-block>
<fo:list-item>
<fo:list-item-label>
<fo:block/>
</fo:list-item-label>
– 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-item-body>
<fo:block/>
</fo:list-item-body>
</fo:list-item>
... More <fo:list-item>s
</fo:list-block>
35
XSL-FO – list (cont.)
• The main structure is the
<fo:list-block>
<fo:list-block>
<fo:list-item>
• It contains some number
of <fo:list-item>s,
<fo:list-item-label>
………….
<fo:list-item-label>
• each of which contains
<fo:list-block>
………….
<fo:list-block>
•A <fo:list-item-label>
•A <fo:list-item-block>
</fo:list-item>
…………
<fo:list-item>
…………..
</fo:list-item>
</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
XSL-FO – list (cont.)
•
•
•
37
label-end() function returns the
value of the start-indent
The body-start() function
Trouble
to
separate
the
label
and
content?
property of the <fo:list-itemreturns the value of the
body>to
element
value
start-indent property of
Time
look atminus
somethe
properties
that can make a change
of the provisional-label<fo:list-item-label> plus
Taking
a
look
at
this
drawing
that
outlines
a
list
and
its
properties
separation property of the
the provisional-distance<fo:list-item-block>
element
between-starts
property of
– <fo:list-item-label
end-indent="label-end()">: defines the distance
from the normal
<fo:list-block>.
ending 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:listitem-body>.
38
XSL-FO – list (cont.)
• 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 example
list2
39
XSL-FO – list (cont.)
• 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-FormattingObjects-for-Lists
lists
40
XSL-FO – table <fo:table>
XSL-FO element
Description
• The <fo:table> is used to
format the tabular
material of a table.
<fo:table>
• The <fo:table> contains
<fo:table-column> Formats the columns of a table
– <fo:table-column>
<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-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:
Formats the tabular material of a
table
<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
<fo:block id=“BID"
font-size="18pt"
line-height="21pt"
font-weight="bold">
cross-references
</fo:block>
• 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.
44
XSL-FO : links and Cross-Reference
• 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
XSL-FO : links and Cross-Reference
• 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

XSL: Formatting Objects (FO)

Transcript XSL: Formatting Objects (FO)

Directory