XSL-FO Blocks (Blocks)

The output of XSL-FO is located within the block area.

XSL-FO pages, flows, and blocks

Content 'blocks' flow into 'pages', and then are output to the medium.

XSL-FO output is usually nested within <fo:block> elements, which are nested within <fo:flow> elements, and these are nested within <fo:page-sequence> elements:

<fo:page-sequence>
  <fo:flow flow-name="xsl-region-body">
    <fo:block>
      <!-- Output goes here -->
    </fo:block>
  </fo:flow>
</fo:page-sequence>

Block area properties

A block is a sequence of output located within a rectangular box:

<fo:block border-width="1mm">
There is a one-millimeter border around this output block.
</fo:block>

Since the block area is a rectangular box, it can share many common area properties:

  • Space before and space after
  • margin
  • border
  • padding
  • Space before

Illustration:

Space before and Space after Is the blank area that separates blocks from each other.

margin Is the blank area outside the block.

border The rectangular outline of the area outside the rectangular edge. Its four sides can have different widths. It can also be filled with different colors and background images.

padding Is the area located between the content area and the border.

ContentThe area can contain actual content, such as text, images, graphics, etc.

Block margin

  • margin
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

Block border

Border style property:

  • border-style
  • border-before-style
  • border-after-style
  • border-start-style
  • border-end-style
  • border-top-style (equivalent to border-before)
  • border-bottom-style (equivalent to border-after)
  • border-left-style (equivalent to border-start)
  • border-right-style (equivalent to border-end)

Border color property:

  • border-color
  • border-before-color
  • border-after-color
  • border-start-color
  • border-end-color
  • border-top-color (equivalent to border-before)
  • border-bottom-color (equivalent to border-after)
  • border-left-color (equivalent to border-start)
  • border-right-color (equivalent to border-end)

Border width properties:

  • border-width
  • border-before-width
  • border-after-width
  • border-start-width
  • border-end-width
  • border-top-width (equivalent to border-before)
  • border-bottom-width (equivalent to border-after)
  • border-left-width (equivalent to border-start)
  • border-right-width (equivalent to border-end)

Block padding

  • padding
  • padding-before
  • padding-after
  • padding-start
  • padding-end
  • padding-top (equivalent to padding-before)
  • padding-bottom (equivalent to padding-after)
  • padding-left (equivalent to padding-start)
  • padding-right (equivalent to padding-end)

Block background

  • background-color
  • background-image
  • background-repeat
  • background-attachment (scroll or fixed)

Block style properties:

A block is a sequence of output that can be styled individually:

<fo:block
  font-size="12pt"
  font-family="sans-serif">
This block of output will be written in a 12pt sans-serif font.
</fo:block>

Font properties:

  • font-family
  • font-weight
  • font-style
  • font-size
  • font-variant

Text properties:

  • text-align
  • text-align-last
  • text-indent
  • start-indent
  • end-indent
  • wrap-option (Define automatic line break, word wrap)
  • break-before (Define pagination symbol, page breaks)
  • break-after (defines page breaks)
  • reference-orientation (defines text rotation within 90")

Example

<fo:block
    font-size="14pt" font-family="verdana" color="red"
    space-before="5mm" space-after="5mm">
W3School
</fo:block>
<fo:block
    text-indent="5mm"
    font-family="verdana" font-size="12pt"
    space-before="5mm" space-after="5mm">
At CodeW3C.com you will find all the Web-building tutorials you
need, from basic HTML and XHTML to advanced XML, XSL, Multimedia
and WAP.
</fo:block>

Result:

See the example above, if you want to generate a document with many titles and paragraphs, you will need a lot of code.

Typically, XSL-FO documents do not combine formatting information and content as we did just now.

With a little help from XSLT, we can insert formatting information into templates and then write cleaner content.

You will learn how to use XSLT templates to combine XSL-FO in the later chapters of this tutorial.