Latest web development tutorials

XSL-FO block

XSL-FO output of the block located in the area.

XSL-FO page (Page), flow (Flow) and a block (Block)

Content "block" will "flow" into the "page", and then output to the media.

XSL-FO output is usually nested within <fo: block> element inside, <fo: block> nested <fo: flow> element inside, <fo: flow> nested <fo: page-sequence> element within :

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

Properties of the block area

Block is located in a rectangular box output sequence:

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

Since the block area is a rectangular box, so you can share a lot of common area properties:

  • space before and space after
  • margin
  • border
  • padding
Content Margins and Padding

space before and space afteris a block from the division between the block and the role of the gaps.

margin is a blank area outside the block.

rectangularborder region of the outer edge.Its four sides may have different widths. It can also be filled with different colors and background images.

padding is located between the border and the content area of the region.

content area can contain the actual content, such as text, pictures, graphics, and so on.

Margins block (Block Margin)

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

Block border (Block Border)

BorderStyle 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 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 attributes:

  • 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)

Filling block (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)

Background block (Block Background)

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

Block style attributes (Block Styling Attributes)

Block is individually styled output sequence:

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

Font attributes:

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

Text attributes:

  • text-align
  • text-align-last
  • text-indent
  • start-indent
  • end-indent
  • wrap-option (defined wrap)
  • break-before (defined page break)
  • break-after (defined page break)
  • reference-orientation (defined 90 "increments text rotation)


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

<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.



At W3CSchool you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

Look at the above example, if you want to generate a title and paragraphs with many documents, it will require a lot of code.

Typically, XSL-FO documents are not just like we did with the formatting information and content can be combined.

By XSLT of little help, we can put the formatting information into the template, and then write a more pure content.

You will learn in a later chapter of this tutorial on how to use XSLT templates to combine XSL-FO.