Web Technology: What is XSL-FO? How is it related to XSLT?

XSL-FO is a language for formatting XML data for output to paper, screen display or media such as printers. XSL-FO is based on XML language and recommendation by W3C and now formally named XSL. With XSL-FO, users can deploy some output such as PDF, Microsoft Word document, or other format document from XML document and XML schema. Compare to XSLT (Extensible Stylesheet Language Transformations), the XSLT is a declarative language for transforming XML documents into other XML, HTML and text documents.

XSL-FO composes with XSLFO Documents, Areas, Output, Flow, Page, Block, Lists and Tables.

· XSL-FO Documents

XSL-FO documents are XML files with output information that are stored with .fo or a .fob file extension such as “Network.fo”, and the documents also save XSL-FO documents with an .xml extension, generally, using the common format with .fo extension.

· XSL-FO Areas

A number of rectangular areas(boxes) are defined by XSL-FO to display output, all the output including text, images, etc, will be formatted into these boxes and then displayed in screen or printed to a media such as printer.

· XSL-FO Output

XSL-FO output is nested inside <fo:block> elements, nested inside <fo:flow> elements, and in the <fo:page-sequence>. Figure 1 shows that the text “This is the XSL-FO Output” is nested inside the <fo:block> elements, and the output are also given in this table.

XSL-FO Coding	XSL-FO Output
<fo:page-sequence> <fo:flow flow-name="xsl-region-body"> <fo:block> This is the XSL-FO Output</fo:block> </fo:flow> </fo:page-sequence>	This is the XSL-FO Output

Figure 1 – XSL-FOOutput

· XSL-FO Pages

XSL-FO uses “Page Masters” templates to set the layout of pages, and each template must have a unique name, as Figure 2 shows some elements including REGION BODY (<fegion-body margin=”4cm”), REGION BEFORE (<fo:region-before extent="3cm"/>), REGION AFTER (<fo:region-after extent="3cm"/>), REGION START (<fo:region-start extent="3cm"/>) and REGION END (<fo:region-end extent="3cm"/>) map to Figure 3(coding).

Figure 2 – XSL-FO Page-A

XSL-FO Page

<fo:simple-page-master master-name="right-side" page-width="297mm" page-height="210mm" margin-top="2cm" margin-bottom="2cm" margin-left="1cm" margin-right="2cm">

<fo:region-body margin="4cm"/>

<fo:region-before extent="3cm"/>

<fo:region-after extent="3cm"/>

<fo:region-start extent="3cm"/>

<fo:region-end extent="3cm"/>

</fo:simple-page-master>

Figure 3 – XSL-FOPage-B

· XSL-FO List Block

There are four XSL-FO objects used to create lists including,

ü fo:list-block (<fo:list-block>) contains the whole list

ü fo:list-item (<fo:list-item>) contains each item in the list

ü fo:list-item-label (<fo:list-item-label>) contains the label for the list-item

ü fo:list-item-body (<fo:list-item-body>) contains the content or body of the list-item

An XSL-FO List given an example as showed in Figure 4.

XSL-FO List Block	XSL-FO Output
<fo:list-block> <fo:list-item> <fo:list-item-label> <fo:block>*</fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block>Block-List-Demo</fo:block> </fo:list-item-body> </fo:list-item> </fo:list-block>	*Block-list-Demo

Figure 4 – XSL-FOList Blocks

· XSL-FO Tables

The XSL-FO table is very similar with HTML table model. There are nine XSL-FO objects are used to define output tables as below,

ü fo:table-and-caption

ü fo:table

ü fo:table-caption

ü fo:table-column

ü fo:table-header

ü fo:table-footer

ü fo:table-body

ü fo:table-row

ü fo:table-cell

The <fo:table-and-caption> element is uses by XSL-FO to define a table. It contains a main <fo:table> element and an optional <fo:caption> element. Figure 5 give a sample for table definition, the input in the left side, and the output in the right side as below figure.

XSL-FO Tables

XSL-FO Output

<fo:table-and-caption>

<fo:table>

<fo:table-column column-width="20mm"/>

<fo:table-header>

<fo:table-row>

<fo:table-cell>

<fo:block font-weight="bold">iPhone</fo:block>

</fo:table-cell>

<fo:table-cell>

<fo:block font-weight="bold">Price</fo:block>

</fo:table-cell>

</fo:table-row>

</fo:table-header>

<fo:table-body>

<fo:table-row>

<fo:table-cell>

<fo:block>Apple</fo:block>

</fo:table-cell>

<fo:table-cell>

<fo:block>HK$4000</fo:block>

</fo:table-cell>

</fo:table-row>

</fo:table-body>

</fo:table>

Name	IPAddress
iPhone	HK$4000

Figure 5 - XSL-FOTables

· XSL-FO and XSLT help each other

XSL-FO and XSLT can help each other, and also can do the same things (such as the output functions). Figure 6 shows that using two methods (XSL-FO and XSLT) in the left table, and the output are same in the right side table.

XSL-FO and XSLT Coding	XSL-FO and XSLT Output
<!-- XSL-FO Coding --> <fo:block font-size="14pt" font-family="verdana" color="red" space-before="5mm" space-after="5mm"> Web Technologies </fo:block> <!-- XSLT Coding --> <xsl:template match="header"> <fo:block font-size="14pt" font-family="verdana" color="red" space-before="5mm" space-after="5mm"> <xsl:apply-templates/> </fo:block> </xsl:template>	Web Technologies

Figure 6 - XSL-FO and XSLT

· XSL-FO Software Tools Suggestion

Altova's StyleVision is one powerful tool and easy to use to design some format output such as PDF, Microsoft Office Word, HTML and RTF document output. Figure 7 to 10 demonstrated the sample steps for design the output result. The ref URL is http://www.altova.com.