XSL-FO - Block and Inline Areas

Part:   1   2 

This tutorial helps you to understand:

• "block" Statements
• "inline" Statements
• XSL-FO Example - block.fo
• XSL-FO Example - simple_page.fo

"block" Statements

"block": An XSL-FO element serving as an action statement to generate one block area by working through the enclosed content.

"block" statements are used inside "flow" or "static-content" statement for form a flow of block areas to be mapped to specific region in a layout.

For example:

<fo:flow flow-name="body_region_name">
 <fo:block break-before="page|column|auto" color="#000000"
  keep-together="always|auto"
  linefeed-treatment="ignore|preserve|treat-as-space"
  span="all|none" space-before="0.2in" space-after="0.1in"
  padding-before="0.2pt" padding-after="0.1pt"
  text-align="start|center|end|justify" text-indent="0.5in"
  white-space-treatment="ignore|preserve"
  white-space-collapse="false|true" wrap-option="wrap|no-wrap"
  font-family="serif|sans-serif|cursive|monospace"
  font-size="12pt" font-style="normal|italic|oblique"
  font-weight="normal|bold|lighter">
  mixture of text, inline and block area generations statements
 </fo:block>   
</fo:flow>

Some attributes and rules used in "block" statements:

• If a block area is enclosed in the content, it will be stacked as a sub block in the block prograssion direction.
• If an inline area is enclosed in the content, it will be stacked into the current line area in the inline prograssion direction.
• If the current line area is full (reached the end edge of the block area), it will be stacked as a sub block.
• If a string of text is enclosed in the content, it will be broken into characters then converted into inline areas one area per character.
• break-before: Makes this block to be the first one on a new page or column.
• break-after: Makes this block to be the last one on a page or column.
• color: Specifies the color of the text content of this block.
• span: Specifies that this block spans to all columns or not.
• Other groups of attributes allowed include: margin, border, padding and background.
• space-before: Specifies blank space before the block and outside of the border.
• padding-before: Specifies blank space inside of the border before the content.

"inline" Statements

"inline": An XSL-FO element serving as an action statement to generate inline areas.

"inline" statements are used inside "inline" or "block" statements.

For example:

<fo:flow flow-name="body_region_name">
 <fo:block>
  <fo:inline color="#000000" keep-together="always|auto"
   font-family="serif|sans-serif|cursive|monospace"
   font-size="12pt" font-style="normal|italic|oblique"
   font-weight="normal|bold|lighter">
    mixture of text, inline and block area generations statements
  </fo:inline>
 </fo:block>
</fo:flow>

Some attributes and rules used in "block" statements:

• If block area is enclosed in the content, it will be break the current inline stacking and start block stacking.
• Other groups of attributes allowed include: margin, border, padding and background.

XSL-FO Example - block.fo

Let's do some interesting tests on block and inline statements:

<?xml version="1.0" encoding="utf-8"?>
<!-- block.fo
     Copyright (c) 2002 by Dr. Herong Yang
-->
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
  <fo:simple-page-master master-name="page" margin="0.5in">
   <fo:region-body/>
  </fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="page">
  <fo:flow flow-name="xsl-region-body">
   <fo:block background-color="#ffffff">
    1. Pure text in a block statement.
   </fo:block>
   <fo:block background-color="#dfdfdf">
    <fo:inline>2. Pure </fo:inline>
    <fo:inline font-weight="bold">inline elements</fo:inline>
    <fo:inline> in a block statement.</fo:inline>
   </fo:block>
   <fo:block background-color="#ffffff">
    <fo:block>3. Pure </fo:block>
    <fo:block font-weight="bold">block elements</fo:block>
    <fo:block> in a block statement.</fo:block>
   </fo:block>
   <fo:block background-color="#dfdfdf">
    4. Text mixed with 
    <fo:inline font-weight="bold">inline elements</fo:inline>
     in a block statement.
   </fo:block>
   <fo:block background-color="#ffffff">
    5. Text mixed with 
    <fo:block font-weight="bold">block elements</fo:block>
     in a block statement.
   </fo:block>
   <fo:block background-color="#dfdfdf">
    <fo:inline>6. Inline elements mixed with </fo:inline>
    <fo:block font-weight="bold">block elements</fo:block>
    <fo:inline> in a block statement.</fo:inline>
   </fo:block>
   <fo:block background-color="#ffffff">
    <fo:inline>
     7. Text mixed with 
     <fo:inline font-weight="bold">inline elements</fo:inline>
      in a block statement.
     </fo:inline>
   </fo:block>
   <fo:block background-color="#dfdfdf">
    <fo:inline>
     8. Text mixed with 
     <fo:block font-weight="bold">block elements</fo:block>
      in an inline statement.
    </fo:inline>
   </fo:block>
  </fo:flow>
 </fo:page-sequence>
</fo:root>

(Continued on next part...)

Part:   1   2