1 XSL Formatting Objects FO XSLFO is about

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 W 3 C Recommendation XSL-FO became a W 3 C 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

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 W 3 C Recommendation 7

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: <? xml The <fo: root> contains a <fo: layout-master-set> and a <fo: page-sequence>. 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. w 3. org/1999/XSL/Format"> <fo: layout-master-set> <fo: simple-page-master-name="A 4">  </fo: simple-page-master> </fo: layout-master-set> <fo: page-sequence master-reference="A 4">  </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. w 3. 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-name="A 4">  </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-name="main" margin-top="36 pt" margin-bottom="36 pt" page-width="8. 5 in" page-height="11 in" margin-left="72 pt" margin-right="72 pt"> <fo: region-body margin="50 pt" /> </fo: simple-page-master>

17 XSL-FO Document (cont. ) • page-width and page-height <fo: simple-page-master-name="main" margin-top="36 pt" • Define the size of the physical page. margin-bottom="36 pt" page-width="8. 5 in" • This example defines a letter-sized page; page-height="11 in" • To use A 4 -sized paper, the attributes page- margin-left="72 pt" margin-right="72 pt"> width="21 cm" and page-height="29. 7 cm" 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="50 pt" /> </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="50 pt" /> – 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 S T A R T REGION BODY M a r g i n R i g h t R E G I O N E N D 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="A 4">  </fo: page-sequence> Note: The master-reference "A 4" does not actually describe a predefined page format. It is just a name. You can use any name like "My. Page", "My. Template", 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-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. w 3. org/1999/XSL/Format"> <fo: layout-master-set> <fo: simple-page-master-name="A 4"> <fo: region-body margin="50 pt" /> Error in the text book </fo: simple-page-master> </fo: layout-master-set> <fo: page-sequence master-reference="A 4"> <fo: flow-name="xsl-region-body"> <fo: block>Hello W 3 Schools</fo: block> <fo: block>Hello Class of Web Programming. II</fo: block> </fo: flow> </fo: page-sequence> Simple 1 </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-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 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="1 mm"> 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 W 3 c 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="14 pt" font-family="verdana" Normally XSL-FO document font-color="red“ do not combine formatting space-before="5 mm" information and content like space-after="5 mm"> we have done here W 3 Schools </fo: block> <fo: block text-indent="5 mm" font-family="verdana" font-size="12 pt“ space-before="5 mm" space-after="5 mm"> At W 3 Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP. </fo: block> Simple 2

28 XSL-FO Output -- <fo: inline> • The <fo: inline> formatting object is commonly used 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="20 pt" line-height="30 pt"> This is a paragraph of text. font size = 20 pt, line height = 30 pt, 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? Simple 3 </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. w 3 schools. 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 – 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 <fo: list-block> <fo: list-item> • There are four XSL-FO objects used to create lists: <fo: list-item-label> – fo: list-block (contains the whole list) <fo: list-item-body> – fo: list-item (contains each item in the list) <fo: block/> – 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: block/> </fo: list-item-label> </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-item> <fo: list-item-label> …………. <fo: list-item-label> • It contains some number of <fo: list-item>s, • 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-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-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> list 1

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> element minus the value start-indent property of Time to look at some 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 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 ending margin and the end of the <fo: list-item-body> elements <fo: list-block>. – <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. 75 cm" provisional-label-separation="0. 5 cm"> • Let’s applied these properties to the previous example list 2

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. w 3. org/TR/xsl/slice 6. html#section-N 17076 -Formatting. Objects-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: table 1

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 <fo: block id=“BID" font-size="18 pt" line-height="21 pt" font-weight="bold"> cross-references </fo: block> – 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 • 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: //Comp. Sci 196. htm"> KIMO </fo: basic-link> and prepare to be amazed! </fo: block> Externlink

46 XSL-FO : links and Cross-Reference • Example demo – Cross reference: – Web reference: Internal link External 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. exm. Graph

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