XSL Formatting Objects Tutorial (二)

  

Font and Text Attributes (字体)

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page">
			<fo:region-body margin="1cm"/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<!-- flow标签上定义全局的font属性 -->
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<!-- 重新定义font属性 -->
			<fo:block font="24pt Arial">
				<fo:inline color="red">A</fo:inline>
				<fo:inline color="pink">B</fo:inline>
			</fo:block>
			<!-- 继承flow标签上定义的属性 -->
			<fo:block>
				 The inherited font for this block is 12pt Times.
			</fo:block>
			<fo:block>
				Font attributes:
				<!-- 颜色 -->
				<fo:inline color="blue">colored</fo:inline>,
				<!-- 加粗 -->
				<fo:inline font-weight="bold">bold</fo:inline>,
				<!-- 字体样式(fop目前不支持itailc) -->
				<fo:inline font-style="normal">normal</fo:inline>,
				<!-- 百分比设置字体大小 -->
				<fo:inline font-size="75%">small</fo:inline>,
				<!-- 百分比设置字体大小 -->
				<fo:inline font-size="125%">large</fo:inline>.
			</fo:block>
			<fo:block>
				Text attributes:
				<!-- 下划线 -->
				<fo:inline text-decoration="underline">underline</fo:inline>,
				<!-- 每个字母间距 -->
				<fo:inline letter-spacing="3pt"> expanded </fo:inline>,
				<!-- 单词间距 -->
				<fo:inline word-spacing="6pt"> 
					text with extra spacing between words
				</fo:inline>,
				<!-- 英文字母全部大写 -->
				<fo:inline text-transform="uppercase">all capitals</fo:inline>,
				<!-- 单词首字母大写 -->
				<fo:inline text-transform="capitalize">capitalized</fo:inline>,
				<!-- 下标 -->
				text with <fo:inline baseline-shift="sub" font-size="smaller">subscripts</fo:inline>
				<!-- 上标 -->
				and <fo:inline baseline-shift="super" font-size="smaller">superscripts</fo:inline>.
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 
 

<fo:inline>相当于HTML中的<span>标签，用来定义block中的行内属性

 

font属性具有继承效果

比如，fo:flow中定义了字体属性，则其内部的block块将继承其设置的字体属性

 

一般，默认字体设置到<fo:flow>,<fo:page>,or even <fo:root>标签上

 

为了简化书写，可以使用快捷方式定义字体属性

The font property has the following syntax:

[<style, weight, and/or variant>] <size>[/<line height>] <family>

font="14pt Times" equivalent to font-size="14pt"  &  font-family="Times"

 

text-level properties:

text-decoration

underline/overline/strikethrough

letter and word spacing

a positive value expands text, a negative value condenses it

text transformations

upper/lower case, capitalize

shifted text

subscripts and superscripts

 

 

 

 

 

Blocks (块)

Line Height

行高

 

The line-height property specifies the line height

It can be expressed as a length, as a numeric value, or as a percent. 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page">
			<fo:region-body margin="1cm"/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<!-- flow标签上定义全局的font属性 -->
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<!-- 文本填充满整行(最后一行/只有一行时，需要使用text-align-last="justify"单独定义) -->
			<fo:block text-align="justify">
				This is an normal line height of align-justify text.
				The space between lines is 1.2 of the normal font weight.
			</fo:block>
			
			<!-- 横线 -->
			<fo:block border-top="1pt solid black"/>
			
			<!-- 定义行高为字体高度的2倍 -->
			<fo:block line-height="2" text-align="justify">
				This is an example of double-align-justify text.
				The space between lines is 2 of the normal font weight.
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 

 

Text Alignment

文本对齐与缩进

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page">
			<fo:region-body margin="1cm"/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<!-- flow标签上定义全局的font属性 -->
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<fo:block text-align="justify"  text-indent="0.5cm"
					  text-align-last="end" last-line-end-indent="1cm">
				This is an example of double-justify text with an indented first line.
				The last line of the text is aligned to the right, and indented 
				by 1cm from the right.
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

text-align="justify" 文本自动左右对齐，并填充满整行  

text is double justified

text-indent="0.5cm" 第1行从左往右缩进

the first line is indented by 1 inch from the left

text-align-last="end" 最后1行靠右对齐

the last line is aligned to the right (text-align-last);

last-line-end-indent="1cm" 从右往左缩进

the last line is indented by 1 inch from the right

 

By specifying a negative value for text-indent/last-line-end-indent, it is possible to create outdents(反向缩进). 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page">
			<fo:region-body margin="1cm"/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<!-- flow标签上定义全局的font属性 -->
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<fo:block text-align="justify">
				The is an normal text of double-justify example.
			</fo:block>
			<fo:block text-align="justify"  text-indent="0.5cm"
					  text-align-last="end" last-line-end-indent="1cm">
				This is an example of double-justify text with an indented first line.
				The last line of the text is aligned to the right, and indented 
				by 1cm from the right.
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 

[整体缩进，针对所有行都有效]

To make the text within the limites, two more properties are used that control indentation of text as a whole.

start-indent controls white space added at the begining of every line

end-indent adds a margin at the end of every line

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page">
			<fo:region-body margin="1cm"/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<!-- flow标签上定义全局的font属性 -->
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<fo:block text-align="justify">
				The is an normal text of double-justify example.
			</fo:block>
			<fo:block text-align="start"  text-indent="-1cm"
					  text-align-last="end" last-line-end-indent="-1cm"
					  start-indent="1cm" end-indent="1cm">
				This is an example of left-aligned text with an outdented first line.
				The last line of the text is aligned to the right, and outdented 
				by 1cm from the right.
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 

上图中，

text-indent="-1cm" block块中第1行文本往左侵入1cm，由于start-indent="1cm"使文本从左边缩进1cm，这样就抵消了。所以，没有缩进效果。

 

text-align-last="end" 控制最后1行文本靠右对齐

 

last-line-end-indent="-1cm" block块中最后1行文本从右往左缩进1cm，由于 end-indent="1cm" 控制文本与右边的margin为1cm。所以，最后1行实际也没有缩进效果

 

 

Space

隔离区

 

Position blocks vertically with respect to each other.

space-before & space-after

before means "before the first line"

after implies "after the last line"

Spaces are specified multiple value, as a vector of several components:

space-before.minimum

space-before.optimum

space-before.maximum

An important property of spaces is that they aren't addtive!

Apparently, spaces merge and don't sum up.

 

By default, space-before at the top of the page and space-after at the bottom of the page are supressed.To force them, specify .conditionality="retain".

&#8217; &#8220; &#8221; is UTC code for single quote, left and right double quotes.

  

 

 

 

Borders

边框

Blocks may have borders from either side.

Sides can be either in an absolute orientation scheme(left, right,top,and bottom),

or in a writing-mode relative scheme(start, end, before, and after) 

 

Every border has the following properties, that may get the following values in XSL-FO

color

one of 16 predefined HTML system colors, or an RGB value;

style

solid, dashed, dotted, double, inset, outset, groove, ridge, or none;

width

thin, medium, thick, or an explicit width specification.

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page" page-height="100mm" page-width="210mm">
			<fo:region-body margin="1cm" />
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<!-- You can specify each property for each border separately by writing several attributes of the form border-{side}-{property} -->
			<fo:block border-top-color="black"
					  border-top-style="solid"
					  border-top-width="thick"
					  text-align="center">
				Thick black border at the top
			</fo:block>
			
			<fo:block space-after="20pt"/>
			
			<!-- You can also specify properties for all the four sides as a whole, using a shorthand notation border-{property} -->
			<fo:block border-color="gray"
					  border-style="groove"
					  border-width="medium"
					  text-align="center">
				Medium gray groove around the whole block
			</fo:block>
			
			<fo:block space-after="20pt"/>
			
			<!-- You can also group properties that refer to one side into a single shorthand attribute border-{side}. However, only absolutely oriented side names (top, bottom, left, and right) are permitted in this position. Elements inside the attribute can be specified in any order, separated by spaces. -->
			<fo:block text-align="justify"
			          border-top="dashed 1pt #C00000"
			          border-bottom="1pt dashed #C00000">
				1pt dashed red border at the top and bottom
			</fo:block>
			
			<fo:block space-after="20pt"/>
			
			<!-- Finally, a single border attribute can accumulate properties that are ascribed to all the four sides -->
			<fo:block border="thin silver ridge"
			          text-align="center">
				The silver ridge around the whole block
			</fo:block>
			
			<fo:block space-after="20pt"/>
			
			<!-- When printed, a block may be split by a page break or a column break. What happens to the borders adjacent to the breakline? For some block types, you may want to box every part of the original block separately, i.e. draw a border line where the break occurs; this is the default behaviour in XSL FO (XSLFO). For some other blocks, you may prefer to “keep the box open” suppressing borders at column/page breaks. This behavior is controlled by a special component of the border's width — border-{side}-width.conditionality  Only writing-mode oriented sides (before, after, start, and end) are permitted in the conditional border expressions -->
			<fo:block border="thin blue groove"
					  border-before-width.conditionality="discard"
					  border-after-width.conditionality="discard">
				If this block happens to be split by a page break,
				no line will be draw on either side of the break.
				If this block happens to be split by a page break,
				no line will be draw on either side of the break.
				If this block happens to be split by a page break,
				no line will be draw on either side of the break.
				If this block happens to be split by a page break,
				no line will be draw on either side of the break.
				If this block happens to be split by a page break,
				no line will be draw on either side of the break.
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 

 

 

Padding

内边距

Once you have set a border around an object, you may normally want to specify a padding between the text and the border.

This is done by padding-{side} attributes:

There also exists a shorthand padding attribute:

You can also specify several numbers as a value for padding attributes:

If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second;

If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom one is set to the third;

If there are four values, they apply to the top, right, bottom, and left, respectively.

 

Like borders, padding may be conditional at page breaks:

specifying padding-{side}.conditionality="discard" suppresses padding before or after a page break. Like for borders, only writing-mode oriented sides (before, after, start, and end) are permitted in this position.

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page" page-height="297mm" page-width="210mm">
			<fo:region-body margin="1cm" />
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<fo:block border="thin solid navy"
					  text-align="center"
					  padding-before="18pt"
					  padding-bottom="18pt">
				<fo:block border="thin solid maroon">
					The outer block has a 18pt padding from top and bottom
				</fo:block>		  
			</fo:block>
			
			<fo:block space-after="20pt"/>
			
			<fo:block border="thin solid navy"
					  text-align="center"
					  padding="2cm"
					  margin-left="0" margin-right="0">
				<fo:block border="thin solid maroon">
					The outer block has a 2cm padding from all sides
				</fo:block>
			</fo:block>
			
			<fo:block space-after="20pt"/>
			
			<fo:block border="thin solid navy"
					  text-align="justify"
					  text-indent="1cm"
					  padding="1cm 3cm"
					  margin-left="0" margin-right="0">
				<fo:block border="thin solid maroon">
					The outer block has a 1cm padding from top and bottom,
					and 3cm padding from right and left.
				</fo:block>
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 

 

 

Background

背景颜色/图片

 

Blocks may have different backgrounds - colored or even decorated with a grpaphic.

To specify a color for the background, use background-color property:

 

Note:

XSL Recommendation defines no method to scale the background image!

设置背景图片时，将根据block中文本实际所暂用的空间显示图片或者图片的一部分。

背景图片显示多少是由文本区大小决定的。

所以，当背景图片没有完整显示的时候，说明对应的文本区大小不够！

解决办法：

1. 使用space-before/spage-after 制造空白区域来填满当前的Page

2. 使用图片处理软件，将其大小调整为文本区域的实际大小

3. 使用fo:external-graphic 引入图片，设置z-index=-1实现背景图片的目的

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page" page-height="297mm" page-width="210mm">
			<fo:region-body margin="1cm" />
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<fo:flow flow-name="xsl-region-body" font="12pt Microsoft YaHei">
			<fo:block color="yellow"
					  background-color="red"
					  padding="12pt"
					  text-align="center">
				Yellow on red!
			</fo:block>
			
			<fo:block space-after="20pt"/>
			
			<fo:block border="thick solid yellow"
					  background-image="url('src/main/resources/images/spots.jpg')"
					  background-color="white"
					  padding="12pt"
					  color="blue"
					  text-align="center">
				The whole background tiled with colored spots
				The whole background tiled with colored spots
			</fo:block>
			
			
			<fo:block space-after="20pt"/>
			
			<fo:block border="thick solid yellow"
					  background-image="url('src/main/resources/images/spots.jpg')"
					  background-repeat="no-repeat"
					  background-position-horizontal="center"
					  background-position-vertical="center"
					  background-color="white"
					  padding="12pt"
					  color="blue"
					  text-align="center">
				The whole background tiled with colored spots
				The whole background tiled with colored spots
			</fo:block>
			
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 

 

 

 

 

 

Page Layout

 

Page Sequence Masters

页面格式管理器

 

So far, we used only single page masters in examples.In this section, more complex cases will be analyzed.

To start, let's design a page sequence with two page masters: One for the first page, the other for the rest of the document.

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="first-page">
			<fo:region-body margin="1cm" background-color="green"/>
		</fo:simple-page-master>
		<fo:simple-page-master master-name="rest-pages">
			<fo:region-body margin="2cm"/>
		</fo:simple-page-master>
		
		<fo:page-sequence-master master-name="page-sequence">
			<!-- 第1页引用"first-page" -->
			<fo:single-page-master-reference master-reference="first-page"/>
			<!-- 余下的也重复引用"rest-pages"-->
			<fo:repeatable-page-master-reference master-reference="rest-pages"/>
		</fo:page-sequence-master>
	</fo:layout-master-set>
	
	<!-- 页面格式定义引用name="page-sequence"的page-sequence-master -->
	<fo:page-sequence master-reference="page-sequence">
		<fo:flow flow-name="xsl-region-body" font="72pt Microsoft YaHei">
			<fo:block>
				First block
			</fo:block>
			<!-- 页面的第1行定义space-before属性延长空白区，需要联合定义space-before.conditionality="retain" -->
			<fo:block break-before="page" space-before="2cm" space-before.conditionality="retain">
				Second block
			</fo:block>
			<fo:block break-before="page" space-before="2cm">
				Third block
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

(1) In XSL FO, you can specify borders, padding, and background on regions in exactly the same way as you do it on blocks. (FOP doesn't support borders, padding attribute defined on region-body);

(2) The page-sequence-master defines the chain of page master to use for page sequence.

(3) <fo:single-page-master> inserts a single page master in the chain.

(4) <fo:repeatable-page-master-reference> makes the specified page masters repeat up to the end of the chain.

(5) Note that master-reference attribute of a <fo:page-sequence> can refer to either a <fo:page-sequence-master> or a <fo:simple-page-master>. In the latter, all pages generated by this <fo:page-sequence> will be use the same page master.

(6) Space are not inheritable.

 

 

You can also specify different page master for odd and even pages, blank pages, first/last pages, etc.

This achieve by using a more complex sequence specifier:

<fo:repeatable-page-master-alternatives>

It contains one or more <fo:conditional-page-master-reference> elements.

Each of these elements specifies a name of a page master and a set of conditions that should be satisfied for this page master to apply. When generating a page chain, the alternatives inside <fo:conditional-page-master-reference> are looked from left to right, and the first one for which all the conditions hold will be chosen.

 

In the example below, the first page, the last page, the odd pages, the even pages will reference different master.

Note:

Last page master must defined before odd-page-master and even-page-master!

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="fisrt-page" page-height="50mm">
			<fo:region-body margin="1cm" background-color="red"/>
		</fo:simple-page-master>
		<fo:simple-page-master master-name="odd-page"   page-height="50mm">
			<fo:region-body margin="1cm" background-color="yellow"/>
		</fo:simple-page-master>
		<fo:simple-page-master master-name="even-page"  page-height="50mm">
			<fo:region-body margin="1cm" background-color="blue"/>
		</fo:simple-page-master>
		<fo:simple-page-master master-name="last-page"  page-height="50mm">
			<fo:region-body margin="1cm" background-color="white"/>
		</fo:simple-page-master>
		
		<fo:page-sequence-master master-name="my-sequence">
			<fo:repeatable-page-master-alternatives>
				<fo:conditional-page-master-reference page-position="first" master-reference="fisrt-page"/>
				<fo:conditional-page-master-reference page-position="last" master-reference="last-page"/>
				<fo:conditional-page-master-reference odd-or-even="odd" master-reference="odd-page"/>
				<fo:conditional-page-master-reference odd-or-even="even" master-reference="even-page"/>
			</fo:repeatable-page-master-alternatives>
		</fo:page-sequence-master>
	</fo:layout-master-set>
	
	<fo:page-sequence master-reference="my-sequence">
		<fo:flow flow-name="xsl-region-body" text-align="center" start-indent="0.5cm" end-indent="0.5cm">
			<fo:block break-after="page" 
					  space-before="1cm" space-before.conditionality="retain" 
					  border="thick solid black" padding="12pt">
				First page
			</fo:block>
			<fo:block break-after="page" 
					  space-before="1cm" space-before.conditionality="retain" 
					  border="thick solid black" padding="12pt">
				Even page
			</fo:block>
			<fo:block break-after="page" 
					  space-before="1cm" space-before.conditionality="retain" 
					  border="thick solid black" padding="12pt">
				Odd page
			</fo:block>
			<fo:block break-after="page" 
					  space-before="1cm" space-before.conditionality="retain" 
					  border="thick solid black" padding="12pt">
				Last page
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>

 

 

 
 

 

Areas, Flows, Static Contents

区域，流，静态内容

 

So far, we only placed contents into the body region of the page master. There are other regions on the page, used to display static elements of page layout:

headers, footers, and sidebars.

 

<fo:region-body>

the central part of the page; required

<fo:region-before>

header region

<fo:region-after>

footer region

<fo:region-start>

left sidebar region

<fo:region-end>

right sidebar region

 

All regions may have borders, padding and background.

However, XSL 1.0 Recommendation is contrationary with respect to borders and padding on all region areas but <fo:region-body>, but it not support by FOP!

 

Region are named using a special region-name property, you can give the region a name!

But there is a default region-name for each region:

"xsl-region-body" for <fo:region-body>

"xsl-region-before" for <fo:region-before>

"xsl-region-after" for <fo:region-after>

"xsl-region-start" for <fo:region-start>

"xsl-region-end" for <fo:region-end>

 

To put contents into side regions, a special formtting object <fo:static-content> is placed inside <fo:page-sequence>. It is bounded to a specific region by the "flow-name" property that should math the region-name of a region in a page-master.

上下左右region中的内容通过<fo:static-content>进行设置

 

The contents of <fo:static-content> is formatted in the respective region on every page produced by this page-master!

同1个page-master生成的页面中，<fo:static-content>中的内容到将填充到对应的region中

 

注意：

为了避免主体区(region-body)的文本覆盖到其它区域(region-before,region-after,region-start,region-end),主体区的外边距(margin)至少要等于其它区所延伸(extend)的尺寸。

即，region-body的边距必须大于等于其它region的边距(通过extend所扩展的区域尺寸) 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <fo:layout-master-set>
    <fo:simple-page-master master-name="my-page" 
    					   page-width="297mm" 
    					   page-height="100mm" 
    					   margin="1cm">
      <fo:region-body margin="1.1cm"/>
      <fo:region-before extent="1cm" 
      					display-align="center" 
      					background-color="silver"/>
      <fo:region-after extent="1cm" 
      				   display-align="after"/>
    </fo:simple-page-master>
  </fo:layout-master-set>
  
  <fo:page-sequence master-reference="my-page">
  	<!-- 页眉：xxx -->
    <fo:static-content flow-name="xsl-region-before" font="bolder Arial" text-align-last="end">
       <fo:block>This is Header!</fo:block>
    </fo:static-content>
    <!-- 页脚：页码 -->
    <fo:static-content flow-name="xsl-region-after">
    	<fo:block border-top="thin solid black" text-align-last="end">
    		Page <fo:page-number/> of <fo:page-number-citation ref-id="end"/>
    	</fo:block>
    </fo:static-content>
    <fo:flow flow-name="xsl-region-body">
       
       <fo:block margin-top="20pt" text-align="center">Hello, world!</fo:block>
       
       <!-- 计算页码的标记 -->
       <fo:block id="end"/>
    </fo:flow>
  </fo:page-sequence>

</fo:root>

  

 

 

 

Another examples uses sidebars.

It draws a right sidebar on odd pages, and a left sidebar on even pages.

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<!-- 奇数页 -->
 	<fo:simple-page-master master-name="odd-page" page-height="50mm">
 		<fo:region-body margin="1cm 1.5cm"
 					    column-count="3" column-gap="0.5cm"/>
 		<fo:region-end extent="1cm"
 						region-name="right-sidebar"
 						reference-orientation="-90"
 						display-align="after"
 						background-color="red"/>
 	</fo:simple-page-master>
 	<!-- 偶数页 -->
 	<fo:simple-page-master master-name="even-page" page-height="50mm">
 		<fo:region-body margin="1cm 1.5cm"
 						column-count="2" column-gap="2cm"/>
 		<fo:region-start extent="1cm"
 						 region-name="left-sidebar"
 						 reference-orientation="90"
 						 display-align="after"
 						 background-color="green"/>
 	</fo:simple-page-master>
 	<fo:page-sequence-master master-name="my-sequence">
 		<fo:repeatable-page-master-alternatives>
 			<fo:conditional-page-master-reference odd-or-even="odd" 
 												  master-reference="odd-page"/>
 			<fo:conditional-page-master-reference odd-or-even="even" 
 												  master-reference="even-page"/>
 		</fo:repeatable-page-master-alternatives>
 	</fo:page-sequence-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-sequence">
 	<fo:static-content flow-name="left-sidebar">
 		<fo:block>
 			Left sidebar on an even page
 		</fo:block>
 	</fo:static-content>
 	<fo:static-content flow-name="right-sidebar">
 		<fo:block>
 			Right sidebar on an odd page
 		</fo:block>
 	</fo:static-content>
 	<fo:flow flow-name="xsl-region-body">
 		<fo:block>
 			(1)Body region may have multiple columns; other regions may not. The last attribute specifies the gap between columns. 
			Note: 
 				Number of columns may differ across pages within a single flow. In this example, all odd pages will have three columns while all even pages will have two. 
			(2)reference-orientation attribute specifies rotation of coordinate axes for the region; its value is an angle of rotation counterclockwise (in degrees; must be multiple of 90; negative values rotate clockwise). 
			(3)Note that sides of the region are referenced with respect to the original (not rotated) orientation! 
 		</fo:block>
 	</fo:flow>
 </fo:page-sequence>
</fo:root>

 

 

 

 

Page Number and Page Number References

 

To insert page current page number, use <fo:page-number> element.

Page number citation can be used to obtain the total number of pages in the document.

Just place an empty block at the end of the text and refer to its page number.

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page" page-height="50mm">
			<fo:region-body margin="1cm" />
			<fo:region-after extent="1cm"/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<!-- 页脚 -->
		<fo:static-content flow-name="xsl-region-after">
			<fo:block border-top="thin solid black" text-align="end">
				Page <fo:page-number/>
				of <fo:page-number-citation ref-id="terminator"/>
			</fo:block>
		</fo:static-content>
		<fo:flow flow-name="xsl-region-body">
			<fo:block>
				<fo:block>Page number sample.</fo:block>
				<fo:block id="terminator"/>
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>	

 

 

 

 

 

Lists & Tables

 

Lists

 

provisional-distance-between-starts="18pt"

Specifies how far the left side of the label is distant from the left side of the body.

provisional-label-separation="3pt"

Specifies the distance between the right side of the label and the left edge of the body

end-indent attribute specifies the offset of the right edge of <fo:list-item-label> from the right edge of the reference area (i.e. page). You have to specify end-indent="label-end()" on each <fo:list-item-label> in the list. Alternatively, you can use an explicit value of end-indent.

start-indent attribute specifies the left offset of the <fo:list-item-body> from the left.

Like for the <fo:list-item-label>, this is not a default value; don't forget to specify it on each <fo:list-item-body>. start-indent="body-start()"

 

 Another example - Using <fo:list-block> to align text in a header:

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<fo:simple-page-master master-name="my-page">
 		<fo:region-body margin="1cm"/>
 		<fo:region-before extent="1cm"/>
 	</fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-page">
 	<fo:static-content flow-name="xsl-region-before">
 		<fo:list-block border-bottom="1pt gray ridge" padding-after="6pt">
 			<fo:list-item>
 				<fo:list-item-label>
 					<fo:block text-align="start">RenderX XSL FO Manual</fo:block>
 				</fo:list-item-label>
 				<fo:list-item-body>
 					<fo:block text-align="end">List Example</fo:block>
 				</fo:list-item-body>
 			</fo:list-item>
 		</fo:list-block>
 	</fo:static-content>
 	<fo:flow flow-name="xsl-region-body">
 		<fo:list-block provisional-distance-between-starts="18pt"
 					   provisional-label-separation="3pt">
 			<fo:list-item>
 				<fo:list-item-label end-indent="label-end()">
 					<fo:block>&#x2022;</fo:block>
 				</fo:list-item-label>
 				<fo:list-item-body start-indent="body-start()">
 					<fo:block>First Item</fo:block>
 				</fo:list-item-body>
 			</fo:list-item>
 			<fo:list-item>
 				<fo:list-item-label end-indent="label-end()">
 					<fo:block>&#x2022;</fo:block>
 				</fo:list-item-label>
 				<fo:list-item-body start-indent="body-start()">
 					<fo:block>Second item</fo:block>
 				</fo:list-item-body>
 			</fo:list-item>
 		</fo:list-block>
 	</fo:flow>
 </fo:page-sequence>
</fo:root>	

 

 

 

 

  

Tables

 

Tables in XSL-FO is resemble HTML ones.

They are made of cells grouped into rows; rows are futher gourped into groups:

table header, table footer, and table bodies(one or more)

There are also column descriptors.

(1) border-spacing corresponds to CELLSPACING attribute of the HTML table model.

(2) Instead of repeating the same specifier for two consecutive(连续的) columns, used an number-columns-repeated attribute.

It just clones the description the specified number of items.

(3) Table header is repeated at the top of page after page breaks

unless you specify table-omit-head-at-break="true" on the embracing <fo:table>.

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<fo:simple-page-master master-name="my-page">
 		<fo:region-body margin="1cm"/>
 	</fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-page">
 	<fo:flow flow-name="xsl-region-body">
 		<fo:table table-layout="fixed" width="100%"
 				  border="thin solid black" 
 				  text-align="center"
 				  border-collapse="collapse">
 				  
 			<!-- 配置列的属性 -->	  
			<fo:table-column column-width="1in"/>
			<fo:table-column column-width="0.5in" number-columns-repeated="2"/>
			
			<!-- 表头 -->
			<fo:table-header>
				<fo:table-row>
					<fo:table-cell padding="6pt"
								   border="1pt solid blue"
								   background-color="silver"
								   number-columns-spanned="3">
						<fo:block>Header</fo:block>
					</fo:table-cell>
				</fo:table-row>
			</fo:table-header>
			
			<!-- 表格正文 -->
			<fo:table-body>
				<fo:table-row>
					<fo:table-cell padding="6pt" display-align="center"
								   border="1pt solid blue"
								   background-color="silver"
								   number-rows-spanned="2">
						<fo:block text-align="center" font-weight="bold">
							Items:
						</fo:block>
					</fo:table-cell>
					<fo:table-cell padding="6pt" border="0.5pt solid black">
						<fo:block>1:1</fo:block>
					</fo:table-cell>
					<fo:table-cell padding="6pt" border="0.5pt solid black">
						<fo:block>1:2</fo:block>
					</fo:table-cell>
				</fo:table-row>
				<fo:table-row>
					<fo:table-cell padding="6pt" border="0.5pt solid black">
						<fo:block>2:1</fo:block>
					</fo:table-cell>
					<fo:table-cell padding="6pt" border="0.5pt solid black">
						<fo:block>2:2</fo:block>
					</fo:table-cell>
				</fo:table-row>
			</fo:table-body>
 		</fo:table>
 	</fo:flow>
 </fo:page-sequence>
</fo:root>	

 
 

 

 

Graphics

There is a special inline element for including graphics into XSL-FO:

<fo:external-graphic>

The source image is specified by th src attribute whose value is a URL.

It's path is calculated from the root of the project!

 

In this example, the height and the width of the image are expressed in units(1em) relative to the normal font size. This is a convient technique to scale small inlined images proportionally to the text height. [图片缩放：高度与行高一致，保持在行内显示]

 

If you need a block-level graphic, you should wrap the element in a <fo:block> .

keep-with-next.within-column="always"

content-width & content-height expressed as percents denote scaling the image from its original(intrinsic本质的) size.

 

It's possible to create an image directly in the XSL-FO, using the embedded SVG feature.

(1) Embedded images can be scaled with the same attributes as external ones.

(2) SVG elements resides in a separate namespace that has to be declared.Otherwise, SVG images will not be recognized. 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<fo:simple-page-master master-name="my-page">
 		<fo:region-body margin="1cm"/>
 	</fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-page">
 	<fo:flow flow-name="xsl-region-body">
		<fo:block font-size="40pt">
			This text include a picture:
			<fo:external-graphic src="src/main/resources/images/smile.jpg"
							     content-width="1em" content-height="1em"/>
		</fo:block>
		
		<fo:block font-weight="bold"
				  keep-with-next.within-column="always">
			Figure 1: A Smile Face
		</fo:block>
		<fo:block>
			<fo:external-graphic src="src/main/resources/images/smile.jpg"
								 content-width="50%" content-height="50%"/>
		</fo:block>

		<fo:block>
			Here is the image of a typical roadsign:
			<fo:instream-foreign-object content-height="1em">
				<svg:svg xmlns:svg="http://www.w3.org/2000/svg" height="100"
					width="100" viewBox="-50 -50 100 100">
					<svg:circle r="50" style="fill:red; stroke:none" />
					<svg:rect x="-40" y="-10" width="80" height="20"
						style="fill:white; stroke:none" />
				</svg:svg>
			</fo:instream-foreign-object>
		</fo:block>
		
 	</fo:flow>
 </fo:page-sequence>
</fo:root>	

 

 

 

 

 

Advance Features

Containers and Reference Orientation

<fo:block-container> objects group blocks in a separate area that can have a different orientation of conrdinate axes or writing direction. A special reference-orientation property sets the orientation of the "top" direction for the area.

 

It's value is the rotation angle, mesured in degress: 0, 90, 180, 270, -90, -180, -270.

Positive values rotate the coordinate system conterclockwise 逆时针方向旋转，左旋

Negative ones turn it clockwise 顺时针方向旋转，右旋

 

The container has a default reference-orientation of 0.

Note that the size of the rectangular area occupied by the container is explicitly specified.

必须为container指定所占区域的大小

 

Block in both container have text-align="left". Since "left" is determined with respect to "top", the text in this block should be aligned to the opposite side than in the previouse one. [text-align相对于旋转后的上方进行定位]

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<fo:simple-page-master master-name="my-page">
 		<fo:region-body margin="1cm"/>
 	</fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-page">
	<fo:flow flow-name="xsl-region-body">
		<fo:block-container width="250pt" height="20pt"
							border="1pt solid black"
							reference-orientation="0">
			<fo:block text-align="left">
				Regular text.
			</fo:block>
		</fo:block-container>	
		
		<fo:block space-after.optimum="10pt"/>	
		
		<fo:block-container width="250pt" height="20pt"
							border="1pt solid black"
							reference-orientation="180">
			<fo:block text-align="right">
				Text shown upside down.
			</fo:block>
		</fo:block-container>
		
		<fo:block space-after.optimum="10pt"/>	
		
		<fo:block>
			Rest text.
		</fo:block>
	</fo:flow>
 </fo:page-sequence>
</fo:root>	

 

 

 

Besides container, reference-orientation property can apply to <fo:single-page-master> and <fo:region-*> formatting objects.

 

The rotation angle specified by reference-orientation is measured from the orientation of the parent area. In this case, 180° specified on the <fo:block-container> will be added to -90° already on the <fo:region-body>;

The resulting text rotation will be 90°counterclockwise.

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<fo:simple-page-master master-name="my-page">
 		<fo:region-body margin="1cm"
 						reference-orientation="-90"/>
 	</fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-page">
	<fo:flow flow-name="xsl-region-body">
		<fo:block>
			Text and image on the page
		</fo:block>
		<fo:block>
			<fo:external-graphic src="url('src/main/resources/images/smile.jpg')"
								 content-width="50%" content-height="50%"/>
		</fo:block>
		<fo:block-container width="250pt" height="20pt"
							border="1pt solid black"
							reference-orientation="180">
			<fo:block>
				Text flips upside down.
			</fo:block>
		</fo:block-container>
	</fo:flow>
 </fo:page-sequence>
</fo:root>	

 
 

Links

 

There are two kinds of links in XSL-FO.

links to locations inside the document

links to external entities/locaitons

Both are achieved using the same formatting object: <fo:basic-link>

To make an internal link, the reference object must have an id attribute that is cited in the internal-destination attribute of the link object.

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<fo:simple-page-master master-name="my-page">
 		<fo:region-body margin="1cm"/>
 	</fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-page">
	<fo:flow flow-name="xsl-region-body">
	
		<!-- link inside document -->
		<fo:block>
			<fo:basic-link internal-destination="smiley"
						   text-decoration="underline">
				Click here to see the smile image.
			</fo:basic-link>
		</fo:block>
		
		<!-- link to Internet -->
		<fo:block>
			<fo:basic-link external-destination="url(http://www.RenderX.com)"
						   text-decoration="underline"
						   color="blue">
				RenderX Home
			</fo:basic-link>
		</fo:block>
		
		<!-- target -->
		<fo:block text-align="center">
			<fo:external-graphic id="smiley" 
								 src="url('src/main/resources/images/smile.jpg')"
								 content-width="50%" content-height="50%"/>
		</fo:block>
	</fo:flow>
 </fo:page-sequence>
</fo:root>	

 
 

Leaders

A leader is an object used in XSL-FO to create

horizontal rules(水平线),

lengthy white spaces(冗长的空白),

dot filled tabs(点划线) etc.

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
 	<fo:simple-page-master master-name="my-page">
 		<fo:region-body margin="1cm"/>
 	</fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="my-page">
	<fo:flow flow-name="xsl-region-body">
	<fo:block text-align="start">
	  	<fo:leader leader-length="100%"
	  			   leader-pattern="rule"
	  			   alignment-baseline="before-edge"
	  			   rule-thickness="1pt" color="black"/>
	</fo:block>
	<fo:block text-align="start">
	  	<fo:leader leader-length="100%"
	  			   leader-pattern="rule"
	  			   alignment-baseline="mathematical"
	  			   rule-thickness="1em" color="red"/>
	</fo:block>
	<fo:block text-align="center">
  		<fo:leader leader-length="2in"
             leader-pattern="rule"
             alignment-baseline="middle"
             rule-thickness="0.5pt" color="black"/>
  		<fo:inline font="16pt ZapfDingbats"
             color="#E00000">&#x274B;</fo:inline>
  		<fo:leader leader-length="2in" leader-pattern="rule"
	alignment-baseline="middle" rule-thickness="0.5pt" color="black" />
        </fo:block>
        </fo:flow>
 </fo:page-sequence>
</fo:root>	

 

 

 

Footnotes

 

To insert a footnote at the bottom of page, you should use a <fo:footnote> formatting object. It contains two formatting objects as its children:

<fo:inline> contains an inline content used as a footnote anchor;

<fo:footnote-body> object shores the text of the footnote body; its content will be placed at the bottom of the page(region-body's bottom).

 

Note:

(1) Footnote opening tag is placed immediately after the word which need footnotes.

Breaking a new line would cause the footnote citation to detach from the word.

(2) space-after.optimum="6pt" severs to seperate adjacent footnote bodies.

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DTD SYSTEM "fo.dtd">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<fo:layout-master-set>
		<fo:simple-page-master master-name="my-page" page-height="50mm">
			<fo:region-body margin="1cm" />
			<fo:region-after extent="1cm"/>
		</fo:simple-page-master>
	</fo:layout-master-set>
	<fo:page-sequence master-reference="my-page">
		<!-- 脚注与正文的分离线 -->
		<fo:static-content flow-name="xsl-footnote-separator">
			<fo:block>
				<fo:leader leader-pattern="rule" leader-length="100%"
					rule-style="solid" rule-thickness="0.5pt" />
			</fo:block>
		</fo:static-content>
		
		<!-- 页脚 -->
		<fo:static-content flow-name="xsl-region-after">
			<fo:block border-top="thin solid black" text-align="end">footer</fo:block>
		</fo:static-content>
		
		<!-- 正文 -->
		<fo:flow flow-name="xsl-region-body">
			<fo:block>
				This text contains a footnote<fo:footnote>
					<!-- 添加脚注 -->
					<fo:inline baseline-shift="super" font-size="smaller">
						(1)
					</fo:inline>
					<fo:footnote-body>
						<!-- space-after.optimum 相邻脚注相互分离  -->
						<fo:list-block provisional-label-separation="0pt"
									   provisional-distance-between-starts="18pt" 
									   space-after.optimum="6pt">
							<fo:list-item>
								<!-- 脚注标签 -->
								<fo:list-item-label end-indent="label-end()">
									<fo:block>(1)</fo:block>
								</fo:list-item-label>
								<!-- 脚注内容-->
								<fo:list-item-body start-indent="body-start()">
									<fo:block>Footnote text</fo:block>
								</fo:list-item-body>
							</fo:list-item>
						</fo:list-block>
					</fo:footnote-body>
				</fo:footnote>
				after the word "footnote".
			</fo:block>
		</fo:flow>
	</fo:page-sequence>
</fo:root>	

 

 

 

 

评论

1 楼 shihengli2010 2016-11-23  

赞！！！！