XSL-FO block

XSL-FO block

The output of XSL-FO is in the block area.

XSL-FO page (Page), Flow, and Block

The content "block" will "stream" into the page and then output to the media.

XSL-FO outputs are usually nested within the elements of the .lt;fo:block>

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

The property of the block area

A block is an output sequence that is located in a rectangular box:

<fo:block border-width="1mm">
This block of output will have a one millimeter border around it.
</fo:block>

Because block areas are rectangular boxes, many common area properties can be shared:

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

Space before and space after are gaps that split between blocks.

Margin is a blank area on the outside of the block.

Border is a rectangle at the outer edge of the area. A ll four sides can have different widths. It can also be filled with different colors and background images.

Padding is the area between the border and the content area.

Content areas can contain actual content, such as text, pictures, graphics, and so on.

Block Margin

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

Block Border

Border style properties:

• 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 properties:

• 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 (Block Styling Attributes)

Blocks are output sequences 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 wrap wrap)
• break-before (define page break)
• break-after (define page break)
• reference-orientation (defines 90" incremental text rotation)

<fo:block font-size="14pt" font-family="verdana" color="red"
space-before="5mm" space-after="5mm">
W3CSchool
</fo:block>

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

Results:

Look at the example above, if you want to generate a document with many headings and paragraphs, you'll need a lot of code.

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

With a little help from XSLT, we can put formatted information into templates and write something purer.

You'll learn how to combine XSL-FO using XSLT templates later in this tutorial.

Related tutorials

CSS reference manual