1 XSL Formatting Objects FO XSLFO is about
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 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
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-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. line 1
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-pattern="rule"/> </fo: block> A horizontal line that fills the width of the current column <fo: block> <fo: leader-pattern="rule" leader-length="100 pt"/> </fo: block> A horizontal line 100 points long <fo: block> <fo: 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 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. w 3. org/1999/XSL/Format">
12 Part II: layout master element <fo: layout-master-set> <fo: simple-page-master-name="A 4"> <fo: region-body margin="50 pt" /> </fo: simple-page-master> </fo: layout-master-set> Part III: page element, one block <fo: page-sequence master-reference="A 4"> <fo: flow-name="xsl-region-body"> <fo: block font-size="20 pt" color="red" space-before="5 mm" space-after="5 mm"> 1 st case: A horizontal line that fills the width of the current column </fo: block> <fo: 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 "-//W 3 C//DTD SVG 1. 0//EN" "http: //www. w 3. org/TR/2001/REC-SVGSVG graphic 20010904/DTD/svg 10. 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. w 3. org/2000/svg"> </svg> Svg 1. 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 file a list of allowed elements. directory as the SVG § The DOCTYPE declaration for an SVG 1. 0 document is: <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 1. 0//EN" "http: //www. w 3. org/TR/2001/REC-SVG-20010904/DTD/svg 10. 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. Svg. Wave. fo Svg. Text. fo Svg 4. 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 Svg. Order. 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 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 22
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 23
Defining Multiple Page Layouts (cont. ) • Example: defining 3 different page layouts: first, left, and right <fo: layout-master-set> <fo: simple-page-master-name="first" margin-right="75 pt" margin-left="75 pt" page-height="11 in" page-width="8. 5 in" margin-bottom="25 pt" margin-top="75 pt"> <fo: region-body margin-bottom="50 pt"/> <fo: region-after region-name="ra-right" extent="25 pt"/> </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-name="left". . . . <fo: region-before region-name="rb-left" extent="25 pt"/> <fo: region-body margin-top="50 pt" margin-bottom="50 pt"/> <fo: region-after region-name="ra-left" extent="25 pt"/> </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-name="left“>………… </fo: simple-page-master> …………… <fo: page-sequence-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="left" odd-or-even="even"/> when to use them? you use a <fo: conditional-page-master-reference="right" odd-or-even="odd"/> <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-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
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-name="xsl-region-body">. . . </fo: flow> 27
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 28
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 29
Adding running heads and footers (cont. ) • One example to put something in the running head and footers • No head? Why? FLR 1. fo <fo: static-content flow-name="ra-right"> <fo: table font-size="10 pt" text-align-last="end"> <fo: table-column-width="350 pt"/> <fo: table-column-width="75 pt"/> <fo: table-body> <fo: table-row> <fo: table-cell> <fo: block text-align="start"> XSL Formatting Objects </fo: block> </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> 30
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> FLR 2. fo 31
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-name="xsl-region-body">. . . Lots and lots of content here <fo: block id="The. Very. Last. Page"> </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="The. Very. Last. Page"/> </fo: block> FLR. fo 35
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. w 3. 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>
Table of Content (PDF bookmarks) • Put it together, an example pdf file with To. C. <fo: root xmlns: fo="http: //www. w 3. 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="sect 1"> <fox: label>Section one</fox: label> </fox: outline> <fox: outline internal-destination="sect 2"> <fox: label>Section two</fox: label> </fox: outline> <fox: outline internal-destination="sect 3"> <fox: label>Section three</fox: label> </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> W 3 Schools <paragraph> 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. </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 ex 2 <? xml version="1. 0"? > <xsl: stylesheet version="1. 0" xmlns: xsl="http: //www. w 3. org/1999/XSL/Transform" xmlns: fo="http: //www. w 3. org/1999/XSL/Format" xmlns: fox="http: //xml. apache. org/fop/extensions"> <xsl: template match="header"> <fo: block font-size="14 pt" font-family="verdana" font-color="red" space-before="5 mm" space-after="5 mm"> <xsl: apply-templates/> </fo: block> </xsl: template> <xsl: template match="paragraph"> <fo: block text-indent="5 mm" font-family="verdana" font-size="12 pt" space-before="5 mm" space-after="5 mm"> <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 Week 11 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 : 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="30 px" height="30 px"> <svg: svg xmlns: svg="http: //www. w 3. org/2000/svg" width="400" height="400"> <svg: path d="M 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> Svg 2. fo
- Slides: 44