XSL-FO Beispiele
Im Folgenden werden anhand von Beispielprogrammen viele Eigenschaften von XSL-FO erklärt.
Hier ein erstes Beispiel, welches einige Seitenlayout Eigenschaften beschreibt.
<?xml version="1.0" encoding="iso-8859-1"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master
master-name="MasterI"
page-height="12cm"
page-width="19cm"
margin-top="1cm"
margin-bottom="1.5cm"
margin-left="1cm"
margin-right="0cm">
<fo:region-body />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="MasterI">
<fo:flow flow-name="xsl-region-body">
<fo:block>
Hello World
</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
Im layout-master-set wird das genaue aussehen des Documentes festgelegt. Page-height und page-width geben Höhe sowie
Breite der Seite an. Mit margin- befehlen wird dem body Bereich Einzüge von allen Seiten gegeben. Beispiel 2
Es folgt ein zweites Beispiel indem erste Text-Eigenschaften erklärt werden:
<fo:page-sequence master-reference="MasterI">
<fo:flow flow-name="xsl-region-body">
<fo:block
font-family="Times"
font-size="20pt"
font-weight="bold"
font-style="italic"
color="blue"
text-align="center">
Hello World
</fo:block>
<fo:block
color="rgb(255,0,0)"
border-width="2pt"
border-style="solid"
border-color="red"
margin-right="14.2cm"
margin-left="1mm"
text-align="center">
08.07.2004
</fo:block>
<fo:block
font-size="12pt">
<fo:inline text-decoration="underline">
XSL-FO</fo:inline>
ist ein XML-Vokabular für die Formatierung
<fo:inline color="red">
v</fo:inline><fo:inline color="green">
o</fo:inline><fo:inline color="yellow">
n</fo:inline> Daten
</fo:block>
<fo:block
font-size="14pt"
font-weight="500">
Man kann mit <fo:inline font-weight="900">
XSL-FO</fo:inline>
auch einfache Formeln <fo:inline font-variant="small-caps">
schreiben
</fo:inline> z.b. f<fo:inline vertical-align="sub">
(x)</fo:inline>=x<fo:inline vertical-align="super">
15</fo:inline>
</fo:block>
<fo:block
margin-right="8cm">
<fo:external-graphic src="file:foto.jpg" />
</fo:block>
Zuerst wird hier Das Hello World zu einer Überschrift umfunktioniert. font-family verändert die Schriftart, font-size die Schriftgrösse, font-weigt="bold" macht den Text Fett,
font-style="italic" steht für kursiv, color legt die Farbe fest und text-align die Ausrichtung, hier center (zentriert).
Im nächsten Block wird um das Datum ein Rahmen erzeugt. Mit color wird zuerst einmal wieder eine Farbe angegeben (in diesem fall mit rgb - Wert).
border-width gibt die Stärke des Rahmens an, border-style="solid" gibt an der der Rahmen eine feste Linie sein soll. Weiterhin möglich an dieser Stelle
ist z.b. "dottet". Mit margin-right/left wird angegeben wie weit der border sein soll. Wird kein margin angegeben erstreckt sich der border über die
gesamte Seite. Im folgenden Block wird eine weitere Möglichkeit von FO gezeigt. Der Befehle fo:inline ermöglicht es innerhalb eines Blockes jedes beliebige
Zeichen mit besonderen Eigenschaften zu versehen. Hier z.b. mit text-decoration="underline" wird der Text unterstrichen. Auch im darauffolgenden Block
soll veranschaulicht werden, welche Möglichkeiten der inline Befehl bietet. Der Block bekommt eine Schriftstärke von 500. Mit inline wird dann der Wert
900 angegeben, was das Maximum ist. Mit font-variant="small-caps" wird der Schriftgrad auf klein gestellt. Mit vertical-align kann man Text hoch oder tief
Stellen. Und als letztes in diesem Beispiel wird eine Grafik eingebunden, die in diesem Fall einfach in dem Ordner liegen musst wo auch die FO file ist.
Hier das Programm dazuBeispiel 3
Es folgt nun das ausführlichste Beispiel:
<?xml version="1.0" encoding="iso-8859-1"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master
master-name="MasterI"
page-height="12cm"&
page-width="19cm"
margin-top="1cm"
margin-bottom="1.5cm"
margin-left="1cm"
margin-right="1cm">
<fo:region-body />
<fo:region-after extent="1cm" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="MasterI"&
language="de"
country="DE"
hyphenate="true"
hyphenation-remain-character-count="3"
hyphenation-push-character-count="3">
<fo:static-content flow-name="xsl-region-after">
<fo:block margin-left="15cm">
Seite <fo:page-number />
</fo:block>
</fo:static-content>
<fo:flow flow-name="xsl-region-body">
<fo:block
font-family="Times"
font-size="20pt"
font-weight="bold"
font-style="italic"
color="blue"
text-align="center">
Hello World
</fo:block>
<fo:block
color="rgb(255,0,0)"
border-width="2pt"
border-style="solid"
border-color="red"
margin-right="14.2cm"
margin-left="1mm"
text-align="center">
08.07.2004
</fo:block>
<fo:block
font-size="12pt">
<fo:inline text-decoration="underline">
XSL-FO</fo:inline>
ist ein XML-Vokabular für die Formatierung
<fo:inline color="red">
v</fo:inline><fo:inline color="green">
o</fo:inline><fo:inline color="yellow">
n</fo:inline> Daten<P>
</fo:block><P>
<fo:block<P>
font-size="14pt"<P>
font-weight="500"><P>
Man kann mit <fo:inline font-weight="900">XSL-FO</fo:inline> auch einfache Formeln
<fo:inline font-variant="small-caps">
schreiben </fo:inline>
z.b. f<fo:inline vertical-align="sub">
(x)</fo:inline>=x<fo:inline vertical-align="super">15</fo:inline>
</fo:block>
<fo:block
margin-right="8cm">
<fo:external-graphic src="file:foto.jpg" />
</fo:block>
<fo:block>
Liste mit Punkt
</fo:block>
<fo:list-block>
<fo:list-item>
<fo:list-item-label>
<fo:block>•</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="12pt">
Listeneintrag erste Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
<fo:list-item>
<fo:list-item-label>
<fo:block>•</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="12pt">
Listeneintrag zweite Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
</fo:list-block>
<fo:block>
Liste mit Nummerierung
</fo:block>
<fo:list-block>
<fo:list-item>
<fo:list-item-label>
<fo:block>
1
</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="12pt">
Listeneintrag erste Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
<fo:list-item>
<fo:list-item-label>
<fo:block>
2
</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="12pt">
Listeneintrag zweite Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
<fo:list-item>
<fo:list-item-label>
<fo:block>
3
</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="12pt">
Listeneintrag dritte Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
</fo:list-block>
<fo:list-block
margin-left="12pt"
space-before="12pt"
space-after="12pt">
<fo:list-item>
<fo:list-item-label>
<fo:block
font-weight="bold">
1
</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="36pt">
Listeneintrag erste Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
<fo:list-item>
<fo:list-item-label>
<fo:block
font-weight="bold">
2
</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="36pt">
Listeneintrag zweite Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
<fo:list-item>
<fo:list-item-label>
<fo:block
font-weight="bold">
3
</fo:block>
</fo:list-item-label>
<fo:list-item-body>
<fo:block start-indent="36pt">
Listeneintrag dritte Zeile
</fo:block>
</fo:list-item-body>
</fo:list-item>
</fo:list-block>
<fo:block
background-color="yellow">
Text vor und nach der Liste ist jetzt entsprechend weit entfernt
</fo:block>
<fo:block
background-color="lightblue"
break-before="page">
Seitenumbruch erzwungen
</fo:block>
<fo:block>
Tabelle - einfach
</fo:block>
<fo:table border="0.5pt solid black"
text-align="center"
border-spacing="3pt"
space-before="20pt"
space-after="20pt">
<fo:table-column column-width="2cm"/>
<fo:table-column column-width="2cm"/>
<fo:table-body>
<fo:table-row>
<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:table border="0.5pt solid black"
text-align="center"
border-spacing="3pt">
<fo:table-column column-width="2cm"/>
<fo:table-column column-width="2cm" 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 text-align="center" font-weight="bold">
Header
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-header>
<fo:table-body>
<fo:table-row>
<fo:table-cell padding="6pt"
border="1pt solid blue"
background-color="silver"
number-rows-spanned="2">
<fo:block text-align="end" font-weight="bold">
Bereich 2 Zeilen
</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:block
space-before="20pt">
<fo:basic-link external-destination="url('http://www.w3c.org/')"
text-decoration="underline" color="blue">W3c Homepage</fo:basic-link>
</fo:block>
<fo:block
break-before="page">
Was ist XSL?
</fo:block>
<fo:block-container border-color="black"
border-style="solid" border-width="1pt"
height="1cm" width="4cm" padding="5pt"
top="6cm" left="10cm" position="absolute" >
<fo:block text-align="center" line-height="12pt"
font-family="sans-serif" font-size="12pt">
kann beliebig platziert werden
</fo:block>
</fo:block-container>
<fo:block
space-before="12pt">Die Fussnote
<fo:footnote>
<fo:inline font-size="6pt" vertical-align="super">1</fo:inline>
<fo:footnote-body>
<fo:block font-size="10pt">
1. Hier ist die Fussnote
</fo:block></fo:footnote-body>
</fo:footnote> befindet sich typischerweise ...
</fo:block>
<fo:block
space-before="10pt">
SVG kann eingebunden werden ....
<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>
Hier sind nun viele Änderungen vor allem im Textbereich vorgenommen. Doch zuerst einmal wurde im layout Bereich mit "region-after" eine
Fusszeile definiert. Im Pagemaster wurde nun eine Eigenschaft definiert die einer der grossen Vorteile von XSL-FO ist - die Silbentrennung.
Dazu wird zunächst die Sprache festgelegt und dann "hyphenate" auf true gesetzt. Danach kann noch je nach Wunsch festgelegt werden, bei wie viel
Zeichen die Trennung vollzogen werden soll. In dem Beispiel bleiben min. 3 Zeichen stehen und es werden auch min. 3 Zeichen abgetrennt. Die Silbentrennung
gilt für den gesamten Pagemaster. Im folgenden wird eine Seitennummerierung definiert. Mit "static-content" wird dies eingeleitet und mit "flow-name"
wird festgelegt für welche Region das folgende gelten soll in dem fall der Seitennummerierung die Fusszeile. Dann wird dort ein Block definiert,
der "fo:page-number /" enthält, was die fortlaufende Seitennummer generiert.
Die nächsten Änderungen kommen auf der 2. Seite. Dort wird begonnen mit Listen zu Arbeiten. Es gibt wie man im Beispiel gleich sehen kann 2 Arten von Listen.
Zuerst eine Liste mit einem Blickfangzeichen z.b. einem Punkt und dann eine Liste mit Nummerierung. Jede Liste hat den gleichen Aufbau. Begonnen wird mit
"list-block" - dem äusseren Listenkörper. Dem untergeordnet wird ein Listeneintrag vorgenommen "list-item". Ein solcher Eintrag besteht immer aus 2 Teilen.
Zuerst dem Blickfangzeichen bzw der Nummer und dann dem Listeneintrag. "list-item-label" definiert den 1. Teil und "list-item-body" den Hauptteil. Bei dem
Eigentlichen Listeneintrag ist unbedingt darauf zu achten die Eigenschaft "start-indent" anzugeben, da sonst sich der body Bereicht mit dem label Bereiche
überschneiden. Eine Liste kann nun beliebig lang gestaltet werden. Um das ganze etwas besser Aussehen zu lassen kann man innerhalb einer Liste mit
margin- befehlen Arbeiten (siehe Beispiel). Um eine weitere Eigenschaft zu beschreiben wurde auf dieser Seite (auf der eigentlich noch genug Platz ist)
ein Seitenumbruch erzwungen. Normalerweise geschieht dies automatisch aber mit dem befehl: "break-before="page"" kann man einen Seitenumbruch vor einem
Block erzwingen, genauso möglich "break-after...".
Jetzt auf der nächsten Seite des Beispiels kommen 2 Beispiele einer Tabelle. Zuerst eine ganz "einfache" und dann eine etwas komplexere. Mit "fo:table" wird
diese eingeleitet. Eine Tabelle kann mit allen bekannten text Format Eigenschaften versehen werden. Wichtig ist anzugeben wie gross die Tabelle werden soll.
"fo:table-column" definiert jeweils eine Spalte in der Tabelle. Haben dies Spalten das gleiche Aussehen (gleiche Grösse) kann man sich mit dem Attribut
"number-columns-repeatet="...."" ein wenig schreibarbeit sparen. Hat man das layout der Tabelle definiert kommt der eigentliche Tabellen body "table-body".
Dem untergeordnet je "table-row" und "table-cell" - analog zu HTML bzw CSS. Man kann einer Tabelle (siehe Beispiel) eine Feste Kopfzeile geben. Dazu definiert
man einen sogenannten "Header". Dazu definiert man vor dem table-body den Header "fo:table-header". Dabei ist anzugeben über wie viele Spalten sich der
Header Bereich erstecken soll "numbe-columns-spanned="...". Analog dazu kann man im table-body Zeilen bzw Spalten definieren die sich über größere Bereiche
erstrecken z.b. "number-rows-spanned="2", siehe Beispiel.
Auf dieser Seite ist noch ein Link platziert. Der befehl dafür ist "fo:basic-link external-destination="...". Ebenso sind interne Links möglich.
Auf der letzten Seite diese Beispiels ist ein sogenannter "block-container" platziert. Dieser hat den Vorteil das er absolut frei auf dem gesamten
Seitenbereich platziert werden kann. Eine weitere für den Buchdruck sinnvolle Eigenschaft ist die Fussnote. Dazu schreibt man an der entsprechenden
Stelle im Text "fo:footnote" und gibt dann ein kleines Zeichen an z.b. eine hochgestellte Zahl. Danach wird der "footnote-body" definiert. Die Fussnote
befindet sich dann automatisch in der Fusszeile insofern diese Definiert ist.
Als allerletztes wurde eine SVG Grafik eingebunden, nur zu zeigen das dies mit XSL-FO auch machbar ist.
Hier nun das Beispiel dazu: Beispiel 4