| XSL-FO (Formatting Objects )provides two elements for embedding pictures in a rendered document. The fo:external-graphic element inserts a non-XML graphic, such as a JPEG image. The fo:instream-foreign-object element inserts an XML document that is not an XSL-FO document, such as an SVG picture or a MathML equation. |
|
| fo:external-graphic |
|
| The fo:external-graphic element provides the equivalent of an HTML IMG element. That is, it loads an image, probably in a non-XML format, from a URL. fo:external-graphic is always an empty element with no children. The src attribute contains a URI identifying the location of the image to be embedded. For example, consider this standard HTML IMG element: |
|
| <IMG SRC=”cup.gif”> |
|
| The fo:external-graphic equivalent looks like this: |
|
| <fo:external-graphic src=”cup.gif”/> |
|
| Of course, you can use an absolute URL if you like: |
|
| <fo:external-graphic src=”http://www.cafeconleche.org/cup.gif”/> |
|
| Just as with Web browsers and HTML, there’s no guarantee that any particular formatting engine recognizes and supports any particular graphic format. Currently, FOP supports GIF, JPEG, and SVGimages. PNG is supported if you have Sun’s JIMI library installed. More formats may be added in the future. |
|
| fo:external-graphic is an inline element. You can make it a block-level picture simply by wrapping it in a fo:block element like this: |
|
| <fo:block><fo:external-graphic src=”cup.gif”/></fo:block> |
|
| An XSL style sheet that references an external graphic |
|
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="A4"
page-width="297mm" page-height="210mm"
margin-top="0.5in" margin-bottom="0.5in"
margin-left="0.5in" margin-right="0.5in">
<fo:region-before extent="1.0in"/>
<fo:region-body margin-top="1.0in"
margin-bottom="1.0in"/>
<fo:region-after extent="1.0in"/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="A4"
initial-page-number="1" language="en" country="us">
<fo:static-content flow-name="xsl-region-before">
<fo:block>
<fo:external-graphic
src="/images/atom.jpg"
/>
The Periodic Table
</fo:block>
</fo:static-content>
<fo:static-content flow-name="xsl-region-after">
<fo:block>
<fo:leader leader-pattern="rule"
leader-length="18cm"/>
</fo:block>
<fo:block>p. <fo:page-number/></fo:block>
</fo:static-content>
<fo:flow flow-name="xsl-region-body">
<xsl:apply-templates select="//ATOM"/>
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>
<xsl:template match="ATOM">
<fo:block><xsl:value-of select="NAME"/></fo:block>
</xsl:template>
</xsl:stylesheet>
|
|
|
| shows the first page of the PDF file . The picture appears at the top of this and every other page in the document. |
|
|
|
|
| Inserting an external graphic in the header |
|
| fo:instream-foreign-object |
|
| The fo:instream-foreign-object inserts a graphic element that is described in XML and that is included directly in the XSL–FO document. For example, a fo:instream-foreign-object element might contain an SVG picture. |
|
| The formatter would render the picture in the finished document. Listing 19-8 is an XSL-FO document that places the pink triangle SVG example from Chapter 2 on the header of each page: |
|
| An XSL style sheet that contains an instream SVG picture |
|
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="A4"
page-width="297mm" page-height="210mm"
margin-top="0.5in" margin-bottom="0.5in"
margin-left="0.5in" margin-right="0.5in">
<fo:region-before extent="1.0in"/>
<fo:region-body margin-top="1.0in"/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="A4"
initial-page-number="1" language="en" country="us">
<fo:static-content flow-name="xsl-region-before">
<fo:block> The Periodic Table
<fo:instream-foreign-object>
<svg xmlns="http://www.w3.org/2000/svg"
width="1.5cm" height="1cm">
<polygon style="fill:#FFCCCC" points="0,31 18,0 36,31"/>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:static-content>
<fo:flow flow-name="xsl-region-body">
<xsl:apply-templates select="//ATOM"/>
</fo:flow>
</fo:page-sequence>
</fo:root>
</xsl:template>
<xsl:template match="ATOM">
<fo:block><xsl:value-of select="NAME"/></fo:block>
</xsl:template>
</xsl:stylesheet>
|
|
| Figure below shows the first page of the PDF file . The triangle appears at the top of this and every other page in the document. |
|
|
|
|
| Embedding an instream graphic in the header |
|
| Not all formatters support all possible XML graphics formats. For instance, FOP does not support MathML at all, and only supports a subset of SVG. Still this is a useful technique, especially when you want XSLT to generate pictures at runtime. |
|
| For instance, you could write an XSLT style sheet that produced nicely formatted annual reports, including all the charts and graphics, simply by transforming some of the input document into XSL-FOand other parts of the input document into SVG. |
|
| Graphic properties |
|
| fo:external-graphic and fo:instream-foreign-object share a number of properties designed to scale, position, crop, align, and otherwise adjust the appearance of the image on the page. |
|
| Content type |
|
| The content-type attribute specifies the type of the graphic. You can give this as a MIME media type, such as image/jpg or image/svg+xml, by prefixing the actual type with content-type:. For example, to specify that the fo:external-graphic element refers to a GIF image you would write it as |
|
| <fo:external-graphic content-type=”content-type:image/gif” src=”cup.gif” /> |
|
| This can also be given in terms of a namespace prefix by using a value in the form namespace-prefix:prefix. For example, to specify that the fo:instream-foreign-object includes an SVG picture you write it as |
|
| <fo:instream-foreign-object xmlns:svg=”http://www.w3.org/2000/svg” content-type=”namespace-prefix:svg”> |
|
| The namespace prefix does not have to be declared on the fo:instream-foreign-object element. It simply needs to be declared somewhere in the ancestors of the element. |
|
| Size |
|
| The height and width attributes specify the vertical and horizontal size of the rectangle set aside on the page for the image. Either or both of these can be set to the keyword auto, rather than to an absolute length, to indicate that the size of the image itself should be used. |
|
| The content-height and content-width attributes specify the vertical and horizontal size of the image itself. If either or both of these is not the same as height and width, respectively, then the image has to be scaled. |
|
| Scaling |
|
| The scaling attribute can be set to either uniform or non-uniform. Uniform scaling maintains the height-to-width ratio of the image as it’s scaled. This is the default. Non-uniform scaling may scale the height and width differently, so that the image is distorted. |
|
| You can also choose the algorithm by which scaling occurs by using the scaling-method attribute. This can be set to auto, integer-pixels, or resample-any-method. Integer scaling maintains an integral ratio between original and scaled images such as 2:1 or 3:1, but not 1.5:1. In most cases, integer-scaled images are smaller than images scaled by resample-any-method, but won’t require dithering. The value auto lets the formatter decide what to do. |
|
| In addition, you can set a variety of common properties for inline elements. These include the common accessibility, aural, background, border, padding, and margin properties. Because graphics shouldn’t be split across multiple pages, they don’t support the usual break properties, but they do support keep-with-next and keep-with-previous. |