Creating XSL-FO Lists

As you saw in Chapter 11, XSL-FO tables work much as they do in HTML, and it turns out that lists do, too. Just as in HTML, an XSL list displays a vertical list of items. You use four XSL-FO elements to create lists:

<fo: list-block >
<fo:list-item>
<fo:list-item-label>
<fo:list-item-body>

You enclose the whole list in an <fo:list-block> element, and each item in the list in an <fo:list-item> element.To create a label for the list item, you use an <fo:list-item-label> element, and to insert the actual data for each list item, you use an <fo:list-item-body> element.

Heres an example, lists.xsl, that transforms planets.xml into XSL-FO list format, with each list item displaying the name of a planet:

Listing 12.1 lists.xsl

 <?xml version='1.0'?>  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"      xmlns:fo="http://www.w3.org/1999/XSL/Format"      version="1.0">      <xsl:template match="PLANETS:">          <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">             <fo:layout-master-set>                 <fo:simple-page-master master-name="page"                     page-height="400mm" page-width="300mm"                     margin-top="10mm" margin-bottom="10mm"                     margin-left="20mm" margin-right="20mm">                     <fo:region-body                         margin-top="0mm" margin-bottom="10mm"                         margin-left="0mm" margin-right="0mm"/>                     <fo:region-after extent="10mm"/>                 </fo:simple-page-master>             </fo:layout-master-set>             <fo:page-sequence master-name="page">                 <fo:flow flow-name="xsl-region-body">                     <fo:block font-size="24pt">The Planets Table</fo:block>                     <fo:list-block                         provisional-distance-between-starts="15mm"                         provisional-label-separation="5mm">                         <xsl:apply-templates/>                     </fo:list-block>                 </fo:flow>             </fo:page-sequence>          </fo:root>      </xsl:template>      <xsl:template match="PLANET">         <fo:list-item line-height="20mm">             <fo:list-item-label>                 <fo:block font-family="sans-serif"                     font-size="36pt">                     <xsl:number/>                     <xsl:text>. </xsl:text>                  </fo:block>              </fo:list-item-label>              <xsl:apply-templates/>          </fo:list-item>      </xsl:template>      <xsl:template match="NAME">          <fo:list-item-body>              <fo:block font-family="sans-serif"                  font-size="36pt">                  <xsl:value-of select="."/>              </fo:block>          </fo:list-item-body>      </xsl:template>      <xsl:template match="MASS">      </xsl:template>      <xsl:template match="RADIUS">      </xsl:template>      <xsl:template match="DENSITY">      </xsl:template>      <xsl:template match="DAY">      </xsl:template>      <xsl:template match="DISTANCE">      </xsl:template>  </xsl:stylesheet>

Heres the resulting XSL-FO document, lists.fo:

Listing 12.2 lists.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 margin-right="20mm" margin-left="20mm"              margin-bottom="10mm" margin-top="10mm" page-width="300mm"              page-height="400mm" master-name="page">              <fo:region-body margin-right="0mm" margin-left="0mm"                  margin-bottom="10mm" margin-top="0mm"/>              <fo:region-after extent="10mm"/>          </fo:simple-page-master>      </fo:layout-master-set>      <fo:page-sequence master-name="page">          <fo:flow flow-name="xsl-region-body">              <fo:block font-size="24pt">The Planets Table</fo:block>              <fo:list-block provisional-label-separation="5mm"                  provisional-distance-between-starts="15mm">                  <fo:list-item line-height="20mm">                      <fo:list-item-label>                          <fo:block font-size="36pt"                              font-family="sans-serif">1. </fo:block>                      </fo:list-item-label>                      <fo:list-item-body>                          <fo:block font-size="36pt"                              font-family="sans-serif">Mercury</fo:block>                      </fo:list-item-body>                  </fo:list-item>                  <fo:list-item line-height="20mm">                      <fo:list-item-label>                          <fo:block font-size="36pt"                              font-family="sans-serif">2. </fo:block>                      </fo:list-item-label>                      <fo:list-item-body>                          <fo:block font-size="36pt"                              font-family="sans-serif">Venus</fo:block>                      </fo:list-item-body>                  </fo:list-item>                  <fo:list-item line-height="20mm">                      <fo:list-item-label>                          <fo:block font-size="36pt"                              font-family="sans-serif">3. </fo:block>                      </fo:list-item-label>                      <fo:list-item-body>                          <fo:block font-size="36pt"                              font-family="sans-serif">Earth</fo:block>                      </fo:list-item-body>                  </fo:list-item>              </fo:list-block>          </fo:flow>      </fo:page-sequence>  </fo:root>

You can see the resulting PDF file in Adobe Acrobat in Figure 12.1, showing the list.

Figure 12.1. An XSL-FO formatted list in Adobe Acrobat.

Its time to take a look at the list formatting objectsand how lists.fo worksin more detail now.

Creating a List: <fo:list-block>

To start, you use the <fo:list-block> element to create an XSL-FO list; this object encloses the actual <fo:list-item> elements that contain the list data.

You can use the following properties with the <fo:list-block> element:

Common accessibility properties: source-document, role
Common aural properties: azimuth, cue-after, cue-before, elevation, pause-after, pause-before, pitch, pitch-range, play-during, richness, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, voice-family, volume
Common border, padding, and background properties: background-attachment , background- color , background-image, background-repeat , background-position-horizontal, background-position-vertical, border-before-color, border-before-style, border-before-width, border-after-color, border-after-style, border-after-width, border-start-color, border-start-style, border-start-width, border-end-color, border-end-style, border-end-width, border-top-color, border-top-style, border-top-width, border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, padding-before, padding-after, padding-start, padding-end, padding-top, padding-bottom, padding-left, padding-right
Common margin properties: margin-top, margin-bottom, margin-left, margin-right, space-before, space-after, start-indent, end-indent
break-after
break-before
id
keep-together
keep-with- next
keep-with-previous
provisional-distance-between-starts
provisional-label-separation
relative-position

Heres how the list in Listing 12.2, lists.fo, starts. In this case, Im specifying values for the provisional-distance-between-starts property, which is the preferred distance between the starting indent of the list items label and the starting indent of the list items body, and the provisional-label-separation property, which is the preferred distance between the end of the list items label (such as a bullet or a number) and the start of the list items body:

 <fo:list-block provisional-label-separation="5mm"                  provisional-distance-between-starts="15mm">              .              .              .              </fo:list-block>

Creating List Items: `<fo:list-item>`

Next, you use an <fo:list-item> element to contain the label and the body of an item in a list. There must be one of these elements for each item in the list.

You can use the following properties with the <fo:list-item> element:

Common accessibility properties: source-document, role
Common aural properties: azimuth, cue-after, cue-before, elevation, pause-after, pause-before, pitch, pitch-range, play-during, richness, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, voice-family, volume
Common border, padding, and background properties: background-attachment, background-color, background-image, background-repeat, back-ground-position-horizontal, background-position-vertical, border-before-color, border-before-style, border-before-width, border-after-color, border-after-style, border-after-width, border-start-color, border-start-style, border-start-width, border-end-color, border-end-style, border- end-width, border-top-color, border-top-style, border-top-width, border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, padding-before, padding-after, padding-start, padding-end, padding-top, padding-bottom, padding-left, padding-right
Common margin properties: margin-top, margin-bottom, margin-left, margin-right, space-before, space-after, start-indent, end-indent
break-after
break-before
id
keep-together
keep-with-next
keep-with-previous
relative-align
relative-position

Here are the three <fo:list-item> elements in lists.fo:

 <fo:list-block provisional-label-separation="5mm"      provisional-distance-between-starts="15mm">      <fo:list-item line-height="20mm">      .      .      .      </fo:list-item>      <fo:list-item line-height="20mm">      .      .      .      </fo:list-item>      <fo:list-item line-height="20mm">      .      .      .      </fo:list-item>  </fo:list-block>

Now its time to create a label and add the data for each list item.

Creating List Item Labels: <fo:list-item-label>

To create a label for a list item, you use the <fo:list-item-label> element. You can use this element to enumerate or decorate the body of the list item.

You can use the following properties with the fo:list-item-label object:

Common accessibility properties: source-document, role
id
keep-together

In lists.fo, I use <fo:block> elements to display the planet number as the list items label (lists.xsl uses <xsl:number> to find that number and insert it into lists.fo):

 <fo:list-block provisional-label-separation="5mm"      provisional-distance-between-starts="15mm">      <fo:list-item line-height="20mm">          <fo:list-item-label>              <fo:block font-size="36pt"              font-family="sans-serif">                  1.              </fo:block>          </fo:list-item-label>          .          .          .      </fo:list-item>      <fo:list-item line-height="20mm">          <fo:list-item-label>              <fo:block font-size="36pt"                  font-family="sans-serif">                      2.                  </fo:block>          </fo:list-item-label>          .          .          .      </fo:list-item>      <fo:list-item line-height="20mm">          <fo:list-item-label>              <fo:block font-size="36pt"                  font-family="sans-serif">                      3.              </fo:block>          </fo:list-item-label>          .          .          .      </fo:list-item>  </fo:list-block>

All thats left is to add the actual data to display to this list.

Creating List Item Bodies: <fo:list-item-body>

You use the <fo:list-item-body> element to hold the actual body of a list item. Note that to format the items body the way you want it, you can enclose an <fo:block> object in an <fo:list-item-body> element.

You can use the following properties with the <fo:list-item-body> object:

Common accessibility properties: source-document, role
id
keep-together

Here are the <fo:list-item-body> elements in lists.fo, which hold the names of the planets:

 <fo:list-block provisional-label-separation="5mm"      provisional-distance-between-starts="15mm">      <fo:list-item line-height="20mm">          <fo:list-item-label>              <fo:block font-size="36pt"                 font-family="sans-serif">                    1.                 </fo:block>          </fo:list-item-label>          <fo:list-item-body>              <fo:block font-size="36pt"                  font-family="sans-serif">                  Mercury              </fo:block>          </fo:list-item-body>      </fo:list-item>      <fo:list-item line-height="20mm">          <fo:list-item-label>              <fo:block font-size="36pt"                  font-family="sans-serif">                  2.              </fo:block>          </fo:list-item-label>          <fo:list-item-body>              <fo:block font-size="36pt"                  font-family="sans-serif">                  Venus              </fo:block>          </fo:list-item-body>      </fo:list-item>      <fo:list-item line-height="20mm">          <fo:list-item-label>              <fo:block font-size="36pt"                  font-family="sans-serif">                      3.              </fo:block>          </fo:list-item-label>          <fo:list-item-body>              <fo:block font-size="36pt"                  font-family="sans-serif">                  Earth              </fo:block>          </fo:list-item-body>      </fo:list-item>  </fo:list-block>

That completes the list, which you saw in Figure 12.1. Working with lists is viable in XSL-FO, but personally I find myself using tables to display data or simple blocks. On the other hand, its useful to know that lists are there if you want them.

Creating XSL-FO Lists