Footnotes and Floats

In this lesson of the XSL-FO tutorial, you will learn...
  1. To add footnotes to pages.
  2. 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:

Syntax
<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>
Code Explanation

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>

Footnotes and Floats Conclusion

In this lesson of the XSL-FO tutorial, you have seen examples of how to create footnotes and floats in XSL-FO.

To continue to learn XSL-FO go to the top of this page and click on the next lesson in this XSL-FO Tutorial's Table of Contents.

Use of this website implies agreement to the following:

Copyright Information

All pages and graphics on this Web site are the property of Webucator, Inc. unless otherwise specified.

None of the content on this website may be redistributed or reproduced in any way, shape, or form without written permission from Webucator, Inc.

No Printing or saving of web pages

This content may not be printed or saved. It is for online use only.


Linking to this website

You may link to any of the pages on this website; however, you may not include the content in a frame or iframe without written permission from Webucator, Inc.


Warranties

This website is provided without warranty of any kind. There are no guarantees that use of the site will not be subject to interruptions. All direct or indirect risk related to use of the site is borne entirely by the user. All code and explanations provided on this site are provided without warranties to correctness, performance, fitness, merchantability, and/or any other warranty (whether expressed or implied).

For individual private use only

You agree not to use this online manual to deliver or receive training. If you are delivering or attending a class that is making use of this online manual, you are in violation of our terms of service. Please report any abuse to courseware@webucator.com. If you would like to deliver or receive training using this manual, please fill out the form at http://www.webucator.com/Contact.cfm.