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

2 Review (1)

3 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

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

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 element doesn't cause a line break by default. − If you want the graphic to appear separately, put the inside a

8 XSL-FO Graphics (cont.) – Drawing lines The XSL-FO spec also defines a 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 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 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 element and describes the effect of each example: FO leader sampleThe result A horizontal line that fills the width of the current column A horizontal line 100 points long 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

12 Part II: layout master element <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 ………………… Part III: page element, one block 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.

15 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.

16 For example, a simple SVG image of a rectangle might look like the following: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " /DTD/svg10.dtd"> <rect x="25" y="10" width="280" height="50" fill="red" stroke="blue" stroke- width="3"/> Document Type SVG graphic area SVG graphic drawing within the area 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 element contains all content for an SVG document –The document should start with the XML declaration,. –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

18 The Basic SVG Document (cont.) Basic SVG shapes –SVG defines six basic shapes along with paths may be combined to form any possible imagepaths –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. SvgText.foSvg4.foSvgWave.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 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 that contains –Multiple elements –Other elements is required to achieve the goal

24 Defining Multiple Page Layouts (cont.) Example: defining 3 different page layouts: first, left, and right <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:simple-page-master master-name="left" no running head appears before the chapter title, so we don’t need to define here

25 Defining Multiple Page Layouts (cont.) Once you’ve defined the page layouts, how do you use them? Sequence of Page Layouts –The element : used to define a sequence of page layouts ………… ………………………… <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"/> Defines a sequence of page layouts named standard Defines appearance position of each page layout in the target document when to use them? you use a element with reference to the master-name to start writing the content of the document

26 Defining Multiple Page Layouts (cont.) Here's how a simple (and not terribly useful) element might look: This isn't very useful because it doesn't do anything with the different page layouts. To really make the give the PDF file a professional appearance, you need to create different running heads and feet....

27 Adding running heads and footers The region body flow: use an element to tell the rendering engine –That all of the content inside the element is for the body of the page Define the content of the main area of the page:...

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 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 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 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? XSL Formatting Objects Page FLR1.fo

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 ……….. FLR2.fo

32 Numbering Pages (cont.) Page numbers –The element is replaced by the current page number Page 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:

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 element. –Here's how it looks: –This markup starts numbering pages at 57. –Whenever you use the or 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 area. You can then do a to the labeled block that appears on the last page of the document. Here's how the markup looks... Lots and lots of content here

35 "Page x of y" numbering style (cont.) : 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 area should look Page of 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:  : defines the bookmark, The internal-destination attribute of the element is the id of the link  : defines the text for the bookmark –These elements are from another namespace

38 Table of Content (PDF bookmarks) Bookmark Extension Elements –To nest one bookmark inside another, simply put one element inside another About this tutorial ………

39 Table of Content (PDF bookmarks) Here are some hierarchical bookmarks: Table of Contents About this tutorial Should I take this tutorial? Getting help A word about the samples

40 Table of Content (PDF bookmarks) Put it together, an example pdf file with ToC. <fo:root xmlns:fo=" xmlns:fox=" ……………….. Table of contents Section one Section two Section three TOC.fo

41 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 W3Schools At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

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 <xsl:stylesheet version="1.0" xmlns:xsl=" xmlns:fo=" xmlns:fox=" <fo:block font-size="14pt" font-family="verdana" font-color="red" space-before="5mm" space-after="5mm"> <fo:block text-indent="5mm" font-family="verdana" font-size="12pt" space-before="5mm" space-after="5mm"> ex2

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 : Move to the point 100, 100. –L : Draw a line to the point 300, 50. –L : Draw a line to the point 300, 250. –L : 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). <svg:path d="M L L L Z" fill="red" stroke="blue" stroke-width="3"/> Svg2.fo