SVG-To-Go with XSL-FO

SVG-To-Go with XSL-FO

HTML has excelled in delivering content reliably to a variety of Web browsers with different capabilities. It has achieved this to a large extent by carefully restricting the syntax of the HTML language from specifying exactly how content should be displayed. However, in some applications, such as printing apps, it is desirable to be able to specify exactly how content should be formatted. XSL-FO complements XSLT, as discussed ear-lier in this chapter, in enabling the specification of the exact layout of content. An XSL-FO document may be used, for example, both to transform content into other formats, such as PDF, and to print content. Figure 12.10 shows a simple flow diagram of how XSL-FO documents are created and used.

SVG diagrams may be embedded in XSL-FO diagrams. For example, Listing 12.8 shows an XSL-FO document with an embedded loan visualization.

LISTING 12.8  120MonthLoan_Advanced.xsl—Loan Visualization Document

with XSL-FO

<?xml  version=”1.0”  encoding=”UTF-8”?>

<xsl:stylesheet version=”1.0” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”> <xsl:template match=”/”>

<fo:root xmlns:fo=”http://www.w3.org/1999/XSL/Format”> <fo:layout-master-set>

<fo:simple-page-master master-name=”Loan” page-width=”8.5in” ➥ page-height=”11.0in” margin=”1.6in”>

<fo:region-body/> </fo:simple-page-master>

</fo:layout-master-set>

<fo:page-sequence master-name=”Loan”> <fo:flow flow-name=”xsl-region-body”>

<fo:block font-size=”24pt” space-after=”0.25in”> Loan

</fo:block>

<fo:block  space-after=”0.25in”>

This  loan  is  for  $<xsl:value-of  select=”loan/@principal”/>  over  a

➥ period  of  <xsl:value-of  select=”loan/@termInMonths”/>  months.  The

➥ interest rate is <xsl:value-of select=”loan/@interestRate”/>% and the ➥ monthly payment is $<xsl:value-of select=”loan/@monthlyPayment”/>.

</fo:block>

<fo:block>

<fo:external-graphic content-width=”485px” content-height=”290px” ➥ src=”120MonthLoan_Advanced.svg”/>

</fo:block>

</fo:flow> </fo:page-sequence>

</fo:root>

</xsl:template>

</xsl:stylesheet>

This XSL-FO example document, itself, contains information about the loan and, as in the case of an SVG loan visualization, may also be generated using an XSLT transforma-tion, where the source is the XML loan document. The key code from this document that involves embedding the SVG visualization is the fo:external-graphic element, which specifies the width and height of the SVG diagram in pixels, as well as the source file, where the SVG document for the diagram may be found in the content-width, content-height, and src attributes. For more information on XSL-FO, see Chapter 9. Figure 12.11 shows the XSL-FO document in Listing 12.8 displayed using the Antenna House XSL Formatter (www.antennahouse.com). Once this tool is started, you may load both the XML document named 120MonthLoan.xml and the XML style sheet named 120MonthLoan_Advanced.xsl and then invoke the Run Formatter option of the tool to view the results shown in Figure 12.11. Using this tool, the XSL-FO document may be printed. Alternatively, this XSL-FO document may be converted into PDF format using the Apache FOP engine (xml.apache.org/fop) .