XSL: Formatting Objects (FO)

XSL: Formatting Objects (FO) XSL-FO is about formatting XML data for output

Review (1)

Review (2) • The Object Formatting Process • Use an XSLT stylesheetto 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

Review (3) -- XSL-FO Document Most of the things in the figure never change • XSL-FO document structure at a glance

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

XSL-FO Graphics • Making a Complex Document • Table of Content Pages • XSL-FO vs. XSLT • Putting it all together

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>

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

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

XSL-FO Graphics (cont.) – Drawing lines • This table outlines three ways to use the <fo:leader> element and describes the effect of each example:

Part I: root element <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> 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 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

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,

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.

Document Type • For example, a simple SVG image of a rectangle might look like the following: <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="300" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="25" y="10" width="280" height="50" fill="red" stroke="blue" stroke-width="3"/> </svg> SVG graphic area SVG graphic drawing within the area Svg1.fo

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"?>. • The document should contain a DOCTYPE declaration, • which points to a list of allowed elements. • The DOCTYPE declaration for an SVG 1.0 document is: Make sure that the DTD file, provided with the SVGView download, is in the same directory as the SVG file <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

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

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

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

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 • Fiveregions of the page , how to use them? • Numbering pages • Numbering pages with the "Page x of y" style

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

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>

Defining Multiple Page Layouts (cont.) • 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"> • <fo:repeatable-page-master-alternatives> • <fo:conditional-page-master-reference • master-reference="first" page-position="first"/> • <fo:conditional-page-master-reference • master-reference="left" odd-or-even="even"/> • <fo:conditional-page-master-reference • master-reference="right" odd-or-even="odd"/> • </fo:repeatable-page-master-alternatives> • </fo:page-sequence-master> • </fo:layout-master-set> Defines appearance position of each page layout in the target document when to use them? you use a <fo:page-sequence> element with reference to the master-name to start writing the content of the document

Defining Multiple Page Layouts (cont.) • Here's how a simple (and not terribly useful) <fo:page-sequence> 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.

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>

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-region-before 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

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

Adding running heads and footers (cont.) • <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> • One example to put something in the running head and footers • No head? Why? FLR1.fo

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

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-page-number="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.

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

"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

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

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

Table of Content (PDF bookmarks) • Bookmark Extension Elements • To nest one bookmark inside another, simply put one <fox:outline> element inside another <fox:outlineinternal-destination="att"> <fox:label>About this tutorial</fox:label> <fox:outline …..> ……… </fox:outline>

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

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 • <?xmlversion="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>

XSL-FO vs. XSLT (cont.) • <?xmlversion="1.0"?> • <xsl:stylesheetversion="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:templatematch="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:templatematch="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> • 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

That’s it for today! • Demo “how to install XALAN tool” • Demo XSLT – XSL-FO transformation from Week11 homework

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:pathd="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

XSL: Formatting Objects (FO)