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

2. 2 Introduction Apache-FOP Document Structure Output –Page –Flow –Block –Inline List Table Links and Cross-Reference Graphics

3. 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. 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. 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. 6 Software Tool Set Up XSL-FO Processors FOP (Formatting Objects Processor) from apache –http://www.apache.org/dyn/closer.cgi/xml/fophttp://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. 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 RecommendationXSL-FO Version 1.0 W3C Recommendation

8. 8 Apache FOP (cont.)

9. 9 FOP process –Uses the standard XSL-FO file format as input –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. 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. 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. 12 XSL-FO Document (cont.) XSL-FO Document Structure XSL-FO documents have a structure like this: The contains a and a. The contains page layouts information, The contains actual content

13. 13 XSL-FO Document (cont.) The element contains the XSL-FO document. It also declares the namespace for XSL-FO: ……………. ……………. Typically, the root element contains A Followed by one or more s

14. 14 XSL-FO Document (cont.) The element contains one or more page templates: The element specifies page definitions. In a simple document, one layout might be enough, Complex documents typically have several page definitions. Use a element to define each of the page layouts you need; Then you store them in the element

15. 15 XSL-FO Document (cont.) Each 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. 16 XSL-FO Document (cont.) Here's an example, master-name Defines a name for this page master. You can create several different 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. 17 XSL-FO Document (cont.) 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"> <fo:region-body margin="50pt" />

18. 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: UnitMeaning cmcentimeters mmmillimeters ininches ptpoints (72 points = 1 inch) pcpicas (12 points = 1 pica, 6 picas = 1 inch) px pixels (sometimes different from one formatter or device to the next, so be careful) emthe width of a capital M

19. 19 The 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. 20 Margin Top MarginLeft MarginLeft MarginRightMarginRight Margin Bottom REGION BEFORE REGIONSTARTREGIONSTART REGION BODY REGIONENDREGIONEND REGION AFTER Note: These definitions assume that the text in your document goes from left to right and top to bottom

21. 21 XSL-FO Document (cont.) -- Page One or more 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 with the same name Each output page refers to a page master which defines the layout Each output page has a element defining the output Each output page is printed (or displayed) in 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. 22 XSL-FO Output Output? How to insert some content to be rendered XSL-FO defines output inside 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 elements, nested inside elements, nested inside elements Structure What’s this?

23. 23 An Output Example Hello W3Schools Hello Class of Web ProgrammingII Simple1 Error in the text book

24. 24 XSL-FO Output -- : refers to slides #20 XSL-FO pages are filled with data starts from elements 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. 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. 25 XSL-FO Output -- Two main XSL-FO elements for formatting content are and Blocks are sequences of output in rectangular boxes Think of it as similar to the HTML element. A element always causes a line break This block of output will have a one millimeter border around it.

26. 26 XSL-FO Output -- (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. 27 An XSL-FO Blocks Example <fo:block font-size="14pt" font-family="verdana" font-color="red“ space-before="5mm" space-after="5mm"> W3Schools <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. Simple2 Normally XSL-FO document do not combine formatting information and content like we have done here

28. 28 XSL-FO Output -- The formatting object is commonly used for formatting a portion of text It defines some text properties within an existing –If you want to italicize several words within a paragraph, as in the example, you use to do the job. This is a paragraph of text. font size = 20 pt, line height = 30pt, Notice that we applied fo:inline here: this meaningless prose, the inline stops here. drones on and on, the FOP software automatically calculates line breaks for us. Isn't that fascinating? Simple3

29. 29 XSL-FO Output -- Here's how you can use the attributes of XSL-FO element to format text: –Bold text: Use the element with an attribute of font- weight="bold". –Italicized text: Use the element with an attribute of font- style="italic". –Monospaced text: Use the element with an attribute of font- family="monospace". –Changing fonts: Use the 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.asphttp://www.w3schools.com/xslfo/obj_inline.asp

30. 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. 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. 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. 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 containing a number, character, etc.) –fo:list-item-body (contains the content/body of the list-item - typically one or more objects)

34. 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 (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 containing a number, character, etc.) –fo:list-item-body (contains the content/body of the list-item - typically one or more objects)... More s

35. 35 XSL-FO – list (cont.) The main structure is the It contains some number of s, each of which contains A ………… ………….. …………. ………….

36. 36 XSL-FO – list (cont.) An Example * Volvo * Saab list1

37. 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 – : defines the distance from the normal ending margin and the end of the elements – : defines the distance from the normal starting margin to the start of either the or. The body-start() function returns the value of the start-indent property of plus the provisional-distance- between-starts property of. label-end() function returns the value of the start-indent property of the element minus the value of the provisional-label- separation property of the element

38. 38 XSL-FO – list (cont.) In the picture, two properties of the element, –provisional-distance-between-starts : defines the distance between the start of the and the –provisional-label-separation: defines the distance between the end of the and the start of the Here's a typical 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. 39 XSL-FO – list (cont.) How to convert HTML tags to FO? for example: List item 1. List item 2. List item 3. Refers to “formatting objects for lists” http://www.w3.org/TR/xsl/slice6.html#section-N17076-Formatting- Objects-for-Lists lists

40. 40 XSL-FO – table The is used to format the tabular material of a table. The contains – Each of these elements has one or more objects, with one or more objects: XSL-FO elementDescription Formats the tabular material of a table Formats the columns of a table Defines a table header Container for table rows and table cells Defines a table footer Defines a table row Defines a table cell Formats a table and its caption

41. 41 XSL-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. 42 XSL-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. 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

44. 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: For more information, see Links and cross-references. interlink

45. 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 element for this. Here's what an XSL-FO reference to a html file in local drive would look like For all the technical information you'd ever want, visit <fo:basic-link color="blue" external-destination="file://CompSci196.htm"> KIMO and prepare to be amazed! Externlink

46. 46 XSL-FO : links and Cross-Reference Example demo –Cross reference:Internal link –Web reference:External link links

47. 47 XSL-FO Graphics To add graphics to a PDF file throughout the FO file, use the element. –Here's an example: 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. 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