facebook google plus twitter
Webucator's Free Introduction to XSL-FO Tutorial

Lesson: Footnotes and Floats

Welcome to our free Introduction to XSL-FO tutorial. This tutorial is based on Webucator's Introduction to XSL-FO course.

Lesson Goals

  • To add footnotes to pages.
  • To work with floats.

Footnotes

Footnotes can be added to any element with the footnote FO, which takes two children: inline and footnote-body. The syntax is shown below:

<fo:footnote> <fo:inline>1</fo:inline> <fo:footnote-body> <fo:block>1. This is the footnote.</fo:block> </fo:footnote-body> </fo:footnote>

By default, footnotes inherit the properties of their parent elements. If you want a footnote to be formatted differently, which you usually do, you should specify them in the footnote tags.

xsl-footnote-separator

There is a special region called "xsl-footnote-separator," which is used to create a separator between body content and footnotes.

The example below illustrates how footnotes are created.

Code Sample:

FootnotesAndFloats/Demos/Footnote.fo
<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="Page" margin="1in" page-height="4in" page-width="8.5in">
			<fo:region-body/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="Page">
		<fo:static-content flow-name="xsl-footnote-separator">
			<fo:block>
				<fo:leader leader-pattern="rule" leader-length="100%"/>
			</fo:block>
		</fo:static-content>
		<fo:flow flow-name="xsl-region-body">
			<fo:block>
				This is the text.
				<fo:footnote>
					<fo:inline font-size="8pt" alignment-baseline="hanging">1</fo:inline>
					<fo:footnote-body>
						<fo:block font-size="8pt">1. This is the footnote.</fo:block>
					</fo:footnote-body>
				</fo:footnote>
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

The output is shown below.

Floats

Floats are usually used to wrap content around images as shown in the image below.

This is accomplished with the float FO whose float attribute specifies where the content should float. In this case, we've specified that the content (i.e, the image) should float to the right. The content that follows will wrap around it. The code used to output the page shown above is shown below.

Code Sample:

FootnotesAndFloats/Demos/Float.fo
<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="Page" margin="1in" page-height="11in" page-width="8.5in">
			<fo:region-body/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="Page">
		<fo:static-content flow-name="xsl-footnote-separator">
			<fo:block>
				<fo:leader leader-pattern="rule" leader-length="100%"/>
			</fo:block>
		</fo:static-content>
		<fo:flow flow-name="xsl-region-body">
			<fo:float float="right">
				<fo:block margin-left="1cm">
					<fo:external-graphic src="url('Images/beatles.jpg')"/>
				</fo:block>
			</fo:float>
			<fo:block>
				So much has been said and written about the Beatles - and their story is so mythic in its sweep - that it's difficult to summarize their career without restating clichés that have already been digested by tens of millions of rock fans. To start with the obvious, they were the greatest and most influential act of the rock era, and introduced more innovations into popular music than any other rock band of the 20th century. Moreover, they were among the few artists of any discipline that were simultaneously the best at what they did and the most popular at what they did. Relentlessly imaginative and experimental, the Beatles grabbed a hold of the international mass consciousness in 1964 and never let go for the next six years, always staying ahead of the pack in terms of creativity but never losing their ability to communicate their increasingly sophisticated ideas to a mass audience. Their supremacy as rock icons remains unchallenged to this day, decades after their breakup in 1970.
			<fo:footnote>
					<fo:inline font-size="8pt" alignment-baseline="hanging">*</fo:inline>
					<fo:footnote-body>
						<fo:block font-size="8pt">
							*From <fo:basic-link external-destination="url('http://www.vh1.com/artists/az/beatles/bio.jhtml')"> http://www.vh1.com/artists/az/beatles/bio.jhtml</fo:basic-link>.
						</fo:block>
					</fo:footnote-body>
				</fo:footnote>
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>