Transcript XSL: Formatting Objects (FO)

1
XSL: Formatting Objects (FO)
XSL-FO is about formatting XML data for output
2
Review (1)
Review (2)
• 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
3
4
Review (3) -- XSL-FO Document
• XSL-FO document structure at a glance
Most of the things
in the figure never
change
5
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
6
• XSL-FO Graphics
• Making a Complex Document
• Table of Content Pages
• XSL-FO vs. XSLT
• Putting it all together
7
XSL-FO Graphics (cont.)
• A final note for graphic reference:
− The <fo:external-graphic> element doesn't cause a line break by default.
− If you want the graphic to appear separately, put the <fo:external-graphic>
inside a <fo:block>
8
XSL-FO Graphics (cont.) – Drawing lines
• The XSL-FO spec also defines a <fo:leader leader-pattern=“dot”>
element to draw lines in a document
• It is typically used in three cases:
• To draw separator lines between sections of a document (much like the
HTML <hr> element)
• To draw lines for fill-in-the-blank forms
• To draw dotted lines between headings and page numbers in the table of
contents.
line1
9
XSL-FO Graphics (cont.) – Drawing lines
• The valid values for the leader-pattern property are space, rule,
and dots.
• The default value is space, meaning the <fo:leader> element
merely creates blank white space.
• The XSL-FO spec defines another value, use-content, but it
is not supported by FOP.
• It isn't possible to add vertical rules to blocks; you have to use
SVG for that
10
XSL-FO Graphics (cont.) – Drawing lines
• This table outlines three ways to use the <fo:leader> element
and describes the effect of each example:
FO leader sample
The result
<fo:block>
<fo:leader leader-pattern="rule"/>
</fo:block>
A horizontal line that fills
the width of the current
column
<fo:block>
<fo:leader leader-pattern="rule"
leader-length="100pt"/>
</fo:block>
A horizontal line 100 points
long
<fo:block>
<fo:leader leader-pattern="dots"/>
</fo:block>
A horizontal line of dots
that fills the current
column
11
XSL-FO Graphics – An Example
• The example contains various kinds of text formatting, external graphics,
and an inline SVG graphic.
• There are also lines between sections of the page.
• Here’re the coding blocks of the example according to the XSL-FO
document structure
Part I: root element
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
12
Part II: layout master element
<fo:layout-master-set>
<fo:simple-page-master master-name="A4">
<fo:region-body margin="50pt" />
</fo:simple-page-master>
</fo:layout-master-set>
Part III: page element, one block
<fo:page-sequence master-reference="A4">
<fo:flow flow-name="xsl-region-body">
<fo:block font-size="20pt" color="red"
space-before="5mm" space-after="5mm">
1st case: A horizontal line that fills the width of the current column
</fo:block>
<fo:block>
<fo:leader leader-pattern="rule"/>
</fo:block>
…………………
</fo:page-sequence>
lines
13
XSL-FO Graphics -- SVG
• Scalable Vector Graphics (SVG) makes it possible to specify,
using text, graphical images that appear on the page
• SVG is an XML-based language for drawing two-dimensional
graphics
• The advantages are many, including
– The ability to easily generate graphics (such as graphs and charts) from
database information,
– The ability to add animation and interactivity to graphics.
• This tutorial demonstrates the concepts necessary for
– Building SVG documents, such as basic shapes, paths, text, and
painting models,
14
XSL-FO Graphics – SVG (cont.)
• Rasterized graphics (i.e., gif, jpg)
– Rasterized graphics: the file contains a color value for each and every pixel
in the image.
– The browser reads these values and acts accordingly.
– It has knowledge only of the individual parts, and no concept of the whole
– Disadvantages:
 Displaying an image at different sizes (distortion)
 The binary nature of rasterized file formats make it difficult (though certainly
not impossible) to dynamically create images based on database information
 Animation is mostly limited to "flip book" type animations, with individual
images displayed in rapid succession.
XSL-FO Graphics – SVG (cont.)
• Vector graphics (SVG, XML-related)
– Overcome some of these difficulties by specifying the instructions needed
to determine the values for each pixel
– The first vector images on the Web were probably Virtual Reality
Markup Language (VRML) images – too complex to use
– Macromedia's entry into the fray, Flash, However, Flash files are still
binary files
– Scalable Vector Graphics solve many of these problems by defining
images, animations, and interactivity using XML
– These text-based instructions are read by the browser (or more
specifically, by a plug-in to the browser), which then carries out the
instructions.
15
16
• For example, a simple SVG image of a rectangle might look like the
following:
Document
Type
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVGSVG graphic
20010904/DTD/svg10.dtd">
area
SVG graphic
drawing within
the area
<rect x="25" y="10" width="280" height="50"
fill="red" stroke="blue" strokewidth="3"/>
<svg width="300" height="100"
xmlns="http://www.w3.org/2000/svg">
</svg>
Svg1.fo
17
The Basic SVG Document
• An SVG document is, at its core, an XML document. That
means that SVG documents have certain basic attributes:
– Tag regulation defined in XML
– The document must have a single root. A single <svg></svg> element
contains all content for an SVG document
– The document should start with the XML declaration, <?xml
version="1.0"?>.
Make
sure
that theshould
DTD file,
provided
with
– The
document
contain
a DOCTYPE
declaration,
the SVGView download, is in the same
 which
points
to afile
list of allowed elements.
directory
as the
SVG
 The DOCTYPE declaration for an SVG 1.0 document is:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
18
The Basic SVG Document (cont.)
• Basic SVG shapes
– SVG defines six basic shapes along with paths may be combined to form
any possible image
– These shapes are:
 circle: Displays a perfect circle of the specified radius, with the center at the
specified point.
 ellipse: Displays an ellipse with the center at the specified point and the
major and minor radii as specified.
 rect: Displays rectangles (including squares) with the upper-left corner at the
point specified, and the height and width as specified. Rectangles can also be
drawn with rounded corners by specifying the x and y radii for the corner
circles.
 line: Displays a line between two coordinates.
 polyline: Displays a series of lines with vertices at the specified points.
 polygon: Similar to polyline, but adds a line from the last point back to the
first, creating a closed shape
19
The Basic SVG Document (cont.)
• Adding text
– One of the great strengths of SVG is its ability to control text to a
degree unheard-of in a standard HTML page without having to resort to
images or other plug-ins (which can create accessibility challenges).
– Any manipulation that can be performed on a shape or a path, such
as painting or filters, can be performed on text
– The one down-side is that SVG does not perform line-wrapping. If
text is longer than the allowed space, it is simply cut off.
– Creating multiple lines of text requires, in most cases, multiple text
elements.
SvgWave.fo
SvgText.fo
Svg4.fo
20
The Basic SVG Document (cont.)
• Rendering order
– When compositing a number of different graphic elements, keep in
mind the order in which items are laid down on the page,
– This affects which ones appear "on top."
– On an HTML page, this layering effect is controlled using the z-index
property,
– But with an SVG image, items are laid down in strict order.
– Each successive layer is placed "on top of" those that have already
been laid down.
– If an element has been specified as having no fill (using fill="none"),
the items below it show through
SvgOrder.fo
21
Making a Complex Document
• Defining multiple page layouts
– Multiple <fo:simple-page-master> elements to define several basic page
layout
• Adding running heads and footers
– Five regions of the page , how to use them?
• Numbering pages
• Numbering pages with the "Page x of y" style
22
Defining Multiple Page Layouts
• Complex document requires more than one page layout
• Different sections of your document to have different page
layouts
– For example, page numbers often appear at the bottom of the page,
appearing on the left side for even-numbered pages
– On the right side for odd-numbered pages.
– Running heads usually don't appear on the first page of a section, but
they do usually appear on the subsequent pages of a section
23
Defining Multiple Page Layouts (cont.)
• To handle these variations on the basic layout of a document,
you define several page layouts
• Then describe the contents of each one.
• Here, a more complicated <fo:layout-master-set> that contains
– Multiple <fo:simple-page-master> elements
– Other elements is required to achieve the goal
Defining Multiple Page Layouts (cont.)
• Example: defining 3 different page layouts: first, left, and right
<fo:layout-master-set>
<fo:simple-page-master master-name="first"
margin-right="75pt" margin-left="75pt"
page-height="11in" page-width="8.5in"
margin-bottom="25pt" margin-top="75pt">
<fo:region-body margin-bottom="50pt"/>
<fo:region-after region-name="ra-right" extent="25pt"/>
</fo:simple-page-master>
..............
</fo:layout-master-set>
no running head
appears before the
chapter title, so we
don’t need to define
<region-before> here
<fo:layout-master-set>
<fo:simple-page-master master-name="left"
..................
<fo:region-before region-name="rb-left" extent="25pt"/>
<fo:region-body margin-top="50pt" margin-bottom="50pt"/>
<fo:region-after region-name="ra-left" extent="25pt"/>
</fo:simple-page-master>
24
Defining Multiple Page Layouts (cont.)
25
• Once you’ve defined the page layouts, how do you use
them?
• Sequence of Page Layouts
– The <fo:conditional-page-master-reference> element : used to define
a sequence of page layouts
Defines a sequence of page
layouts named standard
<fo:layout-master-set>
<fo:simple-page-master master-name="left“>………… </fo:simple-page-master>
…………………………
<fo:page-sequence-master master-name="standard"> Defines appearance
position of each page layout
<fo:repeatable-page-master-alternatives>
<fo:conditional-page-master-reference
in the target document
master-reference="first" page-position="first"/>
<fo:conditional-page-master-reference
master-reference="left" odd-or-even="even"/>
when to use them? you use
<fo:conditional-page-master-reference
master-reference="right" odd-or-even="odd"/> a <fo:page-sequence>
element with reference to the
</fo:repeatable-page-master-alternatives>
</fo:page-sequence-master>
master-name to start writing
</fo:layout-master-set>
the content of the document
Defining Multiple Page Layouts (cont.)
• Here's how a simple (and not terribly useful) <fo:pagesequence> element might look:
<fo:page-sequence master-reference="standard">
<fo:flow flow-name="xsl-region-body">
...
</fo:flow>
</fo:page-sequence>
• This isn't very useful because it doesn't do anything with the
different page layouts.
• To really make the <fo:page-sequence> give the PDF file a
professional appearance, you need to create different
running heads and feet.
26
27
Adding running heads and footers
• The region body flow: use an <fo:flow> element to tell the
rendering engine
– That all of the content inside the <fo:flow> element is for the body of
the page
• Define the content of the main area of the page:
<fo:flow flow-name="xsl-region-body">
...
</fo:flow>
28
Adding running heads and footers (cont.)
• To create running heads and feet that float above and below
the main body of text on the page,
– Use an <fo:static-content> element with flow-names of xsl-regionbefore and xsl-region-after, respectively
– These are the generic region names for all page layouts
– What about specific page layout? Left or right pages? First page?
– The generic region names will be replaced by specific region names
defined in the <fo:simple-page-master> elements
29
Adding running heads and footers (cont.)
• We have defined four different region names in previous
example:
– ra-left, the region-after for left-hand pages
– rb-left, the region-before for left-hand pages
– ra-right, the region-after for right-hand pages (include first page)
– rb-right, the region-before for both the right-hand pages and first pages
– Note: If the layouts of these areas are the same, you don't have to give
them different names; it’s reusable.
• Use the <fo:static-content> element to apply template layout
defined above to bring the content in
30
Adding running heads and footers (cont.)
• One example to
put something
in the running
head and footers
• No head? Why?
FLR1.fo
<fo:static-content flow-name="ra-right">
<fo:table font-size="10pt" text-align-last="end">
<fo:table-column column-width="350pt"/>
<fo:table-column column-width="75pt"/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block text-align="start">
XSL Formatting Objects
</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block text-align="end">
Page <fo:page-number/>
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:static-content>
31
Adding running heads and footers (cont.)
• Making a bit change: to add several pages for the document
• Here and there,
– put all the four regions in
– and also add the following block to increase the pages
<fo:block break-before="page“ …….>
………..
</fo:block>
FLR2.fo
Numbering Pages (cont.)
• Page numbers
– The <fo:page-number> element is replaced by the current page number
<fo:block>Page <fo:page-number/></fo:block>
Generates text like this:
Page 7
• For other format, sorry, it’s not in the standard spec., check the
FO processor for detail information
– FOP: <fo:page-sequence master-reference="standard" format="i"/>
32
33
Numbering Pages (cont.)
• Changing the first page number
– In some cases, you may want to change the starting page number of a
section
– XSL-FO provides the initial-page-number property of the
<fo:page-sequence> element.
– Here's how it looks:
<fo:page-sequence master-reference="standard" initial-pagenumber="57"/>
– This markup starts numbering pages at 57.
– Whenever you use the <fo:page-number> or <page-number-citation>
elements, those values will start at 57.
34
"Page x of y" numbering style
• A common way of numbering pages is the "Page 3 of 47" style.
• How do you do this when you don't know how many pages are in the
document?
• The answer is to put a formatting object with an id at the end of the
<fo:flow> area.
• You can then do a <fo:page-number-citation> to the labeled block that
appears on the last page of the document.
• Here's how the markup looks
<fo:flow flow-name="xsl-region-body">
... Lots and lots of content here
<fo:block id="TheVeryLastPage"> </fo:block>
</fo:flow>
35
"Page x of y" numbering style (cont.)
• <fo:page-number-citation ref-id=" …”>: Now you can refer to that id to
get the page number of the last page of the document.
• Here's how the content in the <fo:static-content> area should look
<fo:block text-align="end">
Page <fo:page-number/> of
<fo:page-number-citation ref-id="TheVeryLastPage"/>
</fo:block>
FLR.fo
36
Table of Content (PDF bookmarks)
• Recent versions of the FOP tool
support PDF bookmarks.
• This is a useful feature that's not part
of the XSL-FO standard.
• PDF bookmarks allow you to create
an outline of your document's structure.
• In the image, the main headings (the
ones with plus or minus icons next to
them) are the major sections of the
document,
• The items that appear beneath them are
the subheadings
• You can click any of these bookmarks
to go directly to that part of the PDF
file
37
Table of Content (PDF bookmarks)
• Bookmark Extension Elements
– The FOP tool provides a set of two elements that allow you to add
bookmarks to the PDF file:
 <fox:outline>: defines the bookmark, The internal-destination attribute of
the element is the id of the link
 <fox:label>: defines the text for the bookmark
– These elements are from another namespace
http://xml.apache.org/fop/extensions
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"
xmlns:fox="http://xml.apache.org/fop/extensions">
38
Table of Content (PDF bookmarks)
• Bookmark Extension Elements
– To nest one bookmark inside another, simply put one <fox:outline>
element inside another
<fox:outline internal-destination="att">
<fox:label>About this tutorial</fox:label>
<fox:outline …..>
………
</fox:outline>
39
Table of Content (PDF bookmarks)
• Here are some hierarchical bookmarks:
<fox:outline internal-destination="toc">
<fox:label>Table of Contents</fox:label>
</fox:outline>
<fox:outline internal-destination="att">
<fox:label>About this tutorial</fox:label>
<fox:outline internal-destination="take">
<fox:label>Should I take this tutorial?</fox:label>
</fox:outline>
<fox:outline internal-destination="help">
<fox:label>Getting help</fox:label>
</fox:outline>
<fox:outline internal-destination="samples">
<fox:label>A word about the samples</fox:label>
</fox:outline>
</fox:outline>
Table of Content (PDF bookmarks)
• Put it together, an example pdf file with ToC.
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"
xmlns:fox="http://xml.apache.org/fop/extensions">
<fo:layout-master-set>
………………..
</fo:layout-master-set>
<fox:outline internal-destination="toc">
<fox:label>Table of contents</fox:label>
<fox:outline internal-destination="sect1">
<fox:label>Section one</fox:label>
</fox:outline>
<fox:outline internal-destination="sect2">
<fox:label>Section two</fox:label>
</fox:outline>
<fox:outline internal-destination="sect3">
<fox:label>Section three</fox:label>
</fox:outline>
</fox:outline>
TOC.fo
40
XSL-FO vs. XSLT
• Trouble for mass content to be presented in PDF output format?
– If your document has twenty or thirty headings and seventy or eighty
paragraphs,
– You don't want to type (or copy and paste) all of these into Formatting
Objects elements.
– This is where XSLT comes in.
• XSL-FO and XSLT can help each other
– A simple XML document
<?xml version="1.0"?>
<header>
W3Schools
<paragraph>
At W3Schools you will find all the Web-building tutorials you need, from
basic HTML and XHTML to advanced XML, XSL, Multimedia
and WAP.
</paragraph>
</header>
41
42
XSL-FO vs. XSLT (cont.)
• With a little help
from XSLT, it
can then be
transformed to
XSL-FO file
• The file is ready
to be formatting
to other type of
document: i.e.
PDF file
ex2
<?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"
xmlns:fox="http://xml.apache.org/fop/extensions">
<xsl:template match="header">
<fo:block
font-size="14pt" font-family="verdana" font-color="red"
space-before="5mm" space-after="5mm">
<xsl:apply-templates/>
</fo:block>
</xsl:template>
<xsl:template match="paragraph">
<fo:block
text-indent="5mm"
font-family="verdana" font-size="12pt"
space-before="5mm" space-after="5mm">
<xsl:apply-templates/>
</fo:block>
</xsl:template>
</xsl:stylesheet>
43
That’s it for today!
• Demo “how to install XALAN tool”
• Demo XSLT – XSL-FO transformation from Week11
homework
44
SVG Path
• A path is a series of commands that are used to create a precisely defined
shape as part of an image.
• This shape can be open (like a line) or closed (like a polygon), and can
contain one or more lines, curves, and segments.
• The code (below) generates a simple polygon according to the instructions
provided. Those instructions are as follows:
–
–
–
–
–
M 100 100 : Move to the point 100, 100.
L 300 50 : Draw a line to the point 300, 50.
L 300 250 : Draw a line to the point 300, 250.
L 100 300 : Draw a line to the point 100, 300.
Z : Close the shape by drawing a line back to the original point. (Or more
specifically, to the point specified by the last "move" command).
<fo:block>
<fo:instream-foreign-object width="30px" height="30px">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="400" height="400">
<svg:path d="M 100 100 L 300 50 L 300 250 L 100 300 Z" fill="red" stroke="blue"
stroke-width="3"/>
</svg:svg>
</fo:instream-foreign-object>
</fo:block>
Svg2.fo