XSL Formatting Objects (XSL-FO)

Transcription

XSL Formatting Objects (XSL-FO)
Darstellung von XML-Dokumenten mittels CSS
XSL Formatting Objects (XSL-FO)
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type= "text/css"
<?xml-stylesheet type= "text/css"
href="adresse.css" ?>
href="adresse.css" ?>
■ Ist möglich aber ...
XSLFO
XML
■ Nachteile:
■
■
■
■
■ Sie wissen, was Formatting Objects sind und weshalb man sie verwendet
■ Sie wissen, was CSS sind und kennen den Unterschied zu XSL-FO
■ Sie können selber einfache Seiten mittels XSL-FO gestalten
■ Sie kennen das Verarbeitungsmodell von XSL-FO
■ Sie wissen, was Master Seiten und Seitensequenzen sind
■
■
■
CSS Level1: Nur Darstellung (Farbe,
Font,Grösse, Blocksatz,..) kann
beeinflusst werden
Struktur unverändert
kein Seitenkonzept
kein "professionelles" Layout
möglich (mm-genau Positionierung)
nicht von allen Browser unterstützt
<adresse public="yes">
<adresse public="yes">
<anrede>Herr</anrede>
<anrede>Herr</anrede>
<vorname>Peter</vorname>
<vorname>Peter</vorname>
<nachname>Werner</nachname>
<nachname>Werner</nachname>
<email>peter.werner@zhw.ch</email>
<email>peter.werner@zhw.ch</email>
<strasse>In der Weid 17</strasse>
<strasse>In der Weid 17</strasse>
<plz>9410</plz>
adresse.css
<plz>9410</plz>
<ort>Heiden</ort>
<ort>Heiden</ort>
</adresse>
adresse {font-size:20pt;
color:#000000;}
</adresse>
adresse {font-size:20pt;
color:#000000;}
anrede {display:block;}
anrede {display:block;}
vorname,nachname
vorname,nachname
{font-weight:bold; color:#0000FF;}
{font-weight:bold; color:#0000FF;}
strasse {display:block;}
strasse {display:block;}
email {display:none;}
email {display:none;}
http
CSS Level 2: besser, aber Browserabhängig
CSS Level 3: noch besser, aber überhaupt noch nicht
implementiert
CSS
CSSfür
fürdie
dieDarstellung
Darstellungim
imBrowser
Browser(in
(inKombination
Kombinationmit
mitXSLT)
XSLT)geeignet
geeignetfalls:
falls:
i)i)geringe
geringeAnforderung
Anforderungan
andas
dasLayout
Layoutgestellt
gestelltwerden
werden
ii)ii)nur
ausgewählte
Browser
(IE,Mozilla)
unterstützt
werden
sollen
nur ausgewählte Browser (IE,Mozilla) unterstützt werden sollen
School of Engineering
Aufbearbeitung auf dem Server
© K. Rege, ZHAW
2 von 42
Zweck und Eigenschaften von XSL-FO
■ Zweck (wie CSS)
XSLT
Prozessor
XSLT
XHTML
Transformer
■
■ Eigenschaften
PDF
■
XML
XSLFO
XSL-FO
Prozessor
Beschreibung von Darstellungseigenschaften von XML Dokumenten
Klient
■
■
XSL-FO noch nicht von Browser unterstützt
Lösung: Aufbearbeitung auf Server und Erstellung von pdf-Dokument
Verschiedene entsprechende FO-Formatierer/Renderer gratis erhältlich
■ z.B. xml.apache.org/fop/
Renderer
Server
■
XSL-FO erlaubt exakte und detaillierte Kontrolle über das Layout
■ Gegensatz: XML/CSS (die Darstellung wird von Browser bestimmt)
■
Aufbau hat Ähnlichkeit zu TeX, ist aber XML
Gewisse Tags (z.B. Font an CSS angelehnt), aber XML
■ z.b. block-Attribute: font-family, font-weight, text-align
■ Vorteil
■
Browser muss XSL-FO nicht verarbeiten können
■ Nachteile
■
■
nur bedingt Anpassungen auf dem Client für Darstellung noch möglich
School of Engineering
© K. Rege, ZHAW
3 von 42
School of Engineering
© K. Rege, ZHAW
4 von 42
Verarbeitung von Dokumenten mittels XSL-FO
XSL-FO Hello World Beispiel
XSL-FO
XSL-FOWurzel-Element
Wurzel-Elementund
undNamensraum
Namensraum
"Layout Master Set" beschreibt
"Layout Master Set" beschreibt
das Layout der Seiten
das Layout der Seiten
(Menge von Page-Mastern)
(Menge von Page-Mastern)
XML
XMLDokument
DokumentDeklaration
Deklaration
Definition des
Seiten Layouts
<?xml version="1.0" encoding="iso-8859-1"?>
Layout-Master
<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="3cm"/>
</fo:simple-page-master>
</fo:layout-master-set>
Sequenz von Bereichen / Blöcke
XML Dokument
Zerlegung in Blöcke
School of Engineering
Formatierung
© K. Rege, ZHAW
"Page Sequence" bezeichnet Fluss von
"Page Sequence" bezeichnet Fluss von
Blöcken,die in die betreffenden Regionen
Blöcken,die in die betreffenden Regionen
"gegossen" werden
"gegossen" werden
<fo:page-sequence master-reference="my-page">
<fo:flow flow-name="xsl-region-body">
<fo:block>Hello, world!</fo:block>
</fo:flow>
Behälter
</fo:page-sequence>
Behälterfür
fürInhalt
Inhaltder
der"gegossen"
"gegossen"
werden
werdensoll
soll
Der Inhalt
Der Inhalt
</fo:root>
XSLT
XSL-FO
Transformation
Page-Master
Page-Masterbeschreibt
beschreibtdas
dasLayout
Layoutder
der
Seite
Seitemit
mitden
denRegionen:
Regionen:hier
hiernur
nur"body"
"body"
Rendering
5 von 42
"Block" beschreibt einen Abschnitt des Dokuments
"Block" beschreibt einen Abschnitt des Dokuments
School of Engineering
© K. Rege, ZHAW
6 von 42
Die Master Seiten
■ Die Master-Seiten
■
■
■
■
■
Master Seiten
School of Engineering
© K. Rege, ZHAW
■
7 von 42
beschreiben das grundlegende Layout einer einzelnen Seite
rechteckige Seite mit Rändern und Leerraum an allen vier Seiten
haben einen Namen (können referenziert werden)
Seitengrösse bestimmen (z.B. A4 = 21 x 29.7)
Mehrere Master Seiten können bestimmt werden
■ Teil von in Layout Master Menge
Unterteilt in 5 Bereiche (siehe nächste Folie)
■ Hauptbereich (region-body): grosser Bereich in der Mitte (immer vorhanden)
■ Bereich davor (region-before): Bereich für Header (optional)
■ Bereich nachher (region-after): Bereich für Fussnoten, Seitennummer, etc.
■ Anfangsbereich (region-start): Bereich auf der linken Seite
■ Endbereich (region-end):Bereich auf der rechten Seite
School of Engineering
© K. Rege, ZHAW
8 von 42
Die Bereiche
Bereich davor (region-before)
Die einfache Master Seiten (eine Seite)
oberer Rand (margin-top)
■ Attribute der einfachen Master Seite (simple-page-master)
Hauptbereich
(region-bodyt)
linker Rand
(margin-left)
Anfangs-
■
Name
■ master-name
■
Ränder
■ margin (falls alle Ränder gleich)
■ margin-top, margin-bottom, margin-right,
margin-left
■
Grösse der Seite
■ page-with, page-height (A4 = 21.0 x 29.7 cm)
Endbereich
(region-end)
bereich
<fo:layout-master-set>
<fo:layout-master-set>
<fo:simple-page-master
<fo:simple-page-master master-name="my-page"
master-name="my-page"
page-width="21.0cm"
page-width="21.0cm" page-height="29.7cm"
page-height="29.7cm"
margin-right="1.5cm"
margin-right="1.5cm" margin-left="1.5cm"
margin-left="1.5cm"
margin-bottom="1.5cm"
margin-bottom="1.5cm" margin-top="1.5cm">
margin-top="1.5cm">
(region-start)
rechter Rand
(margin-right)
<fo:region-body
<fo:region-body margin="1.0cm"/>
margin="1.0cm"/>
Body ist obligatorisch
Body ist obligatorisch
</fo:simple-page-master>
</fo:simple-page-master>
</fo:layout-master-set>
</fo:layout-master-set>
Bereich danach (region-after)
School of Engineering
unterer Rand (margin-bottom)
© K. Rege, ZHAW
9 von 42
School of Engineering
Die 4 Seiten Rand-Bereiche
Die Hauptregion
■ Attribute der 4 Rand-Bereiche
■ Attribute des Hauptregion
■
Name
■
■
Name
■ region-name
■
Ränder (zum page-master Rand hinzu addiert)
■ margin (falls alle Ränder gleich)
■ margin-top, margin-bottom,
margin-right, margin-left
■
Anzahl Spalten
■ column-count="3"
■
Zwischenraum zwischen den Spalten
■ column-gap="0.5cm"
region-name
■
Breite oder Höhe
■ extent = "1cm"
■
Orientierung (in Grad: Gegenuhrzeiger)
■ reference-orientation = "90"
<fo:layout-master-set>
<fo:layout-master-set>
<fo:simple-page-master
<fo:simple-page-master master-name="my-page"
master-name="my-page"
page-width="21.0cm"
page-width="21.0cm" page-height="29.7cm"
page-height="29.7cm"
margin-right="1.5cm"
margin-right="1.5cm" margin-left="1.5cm"
margin-left="1.5cm"
margin-bottom="1.5cm"
margin-bottom="1.5cm" margin-top="1.5cm">
margin-top="1.5cm">
<fo:region-start
extent=”1.0cm
<fo:region-start extent=”1.0cm ”/>
”/>
<fo:region-before
extent=”1.0cm
<fo:region-before extent=”1.0cm ”/>
”/>
<fo:region-body
<fo:region-body margin="1.0cm"/>
margin="1.0cm"/>
<fo:region-end
<fo:region-end extent=”1.0cm
extent=”1.0cm ”/>
”/>
<fo:region-after
<fo:region-after extent=”1.0cm
extent=”1.0cm ”/>
”/>
</fo:simple-page-master>
</fo:simple-page-master>
</fo:layout-master-set>
</fo:layout-master-set>
School of Engineering
© K. Rege, ZHAW
© K. Rege, ZHAW
10 von 42
<fo:layout-master-set>
<fo:layout-master-set>
<fo:simple-page-master
<fo:simple-page-master master-name="my-page"
master-name="my-page"
page-width="21.0cm"
page-width="21.0cm" page-height="29.7cm"
page-height="29.7cm"
margin="1.5cm">
margin="1.5cm">
<fo:region-body
margin="1.0cm"
<fo:region-body margin="1.0cm"
column-count="2"
column-count="2" column-gap="0.5cm"
column-gap="0.5cm"
/>
/>
</fo:simple-page-master>
</fo:simple-page-master>
</fo:layout-master-set>
</fo:layout-master-set>
</fo:layout-master-set>
</fo:layout-master-set>
11 von 42
School of Engineering
© K. Rege, ZHAW
12 von 42
Der Seitensequenz Master
Der Seitenalternativen Master
■ Der Seitenfluss Master: page-sequence-master
■ Der Seitenalternativen Master: repeatable-page-master-alternatives
■
■
■
beschreibt, wie das Layout einer Folge von Seiten gestaltet wird.
■ z.B. erste Seite (Titelformat), restliche Seiten (Inhaltsformat)
Besteht aus einer Sequenz
■ Verweise zu einfachen Master Seiten
■ Verweise auf andere page-sequence-master
kann einzelne Seiten oder Sequenzen
■ einzelne Seite: single-page-master-reference
Attribut: master-reference
■
■
eingebettet in einen Seitensequenz Master (page-sequence-master)
■
Besteht aus einer Auswahl aus Verweisen zu einfachen Master Seiten:
conditional-page-master-reference
■
Auswahl anhand Position: Attribut: page-position="first"
■
Auswahl anhand gerade/ungerade Seite: Attribut: odd-or-even="odd" | even
■
Auswahl anhand leere Seite: Attribut: blank-or-not-blank="blank" | not-blank
| last|rest|any
Sequenz von Seite: repeatable-page-master-reference
Attribut: master-reference
Attribut: maximum-repeats
<fo:layout-master-set>
<fo:layout-master-set>
<fo:simple-page-master
<fo:simple-page-master master-name="first-page"
master-name="first-page" …… …… />
/>
<fo:simple-page-master
<fo:simple-page-master master-name="odd-page"
master-name="odd-page" …… …… />
/>
<fo:simple-page-master
master-name="even-page"
…
…
/>
<fo:simple-page-master master-name="even-page" … … />
<fo:layout-master-set>
<fo:layout-master-set>
<fo:simple-page-master
<fo:simple-page-master master-name="first-page">
master-name="first-page">
<fo:region-body
<fo:region-body margin="2cm"
margin="2cm" />
/>
</fo:simple-page-master>
</fo:simple-page-master>
<fo:simple-page-master
<fo:simple-page-master master-name="all-pages">
master-name="all-pages">
<fo:region-body margin="1cm"/>
<fo:region-body margin="1cm"/>
</fo:simple-page-master>
</fo:simple-page-master>
<fo:page-sequence-master
<fo:page-sequence-master master-name="my-sequence">
master-name="my-sequence">
<fo:single-page-master-reference
<fo:single-page-master-reference master-reference="first-page"/>
master-reference="first-page"/>
<fo:repeatable-page-master-reference
<fo:repeatable-page-master-reference master-reference="all-pages"/>
master-reference="all-pages"/>
</fo:page-sequence-master>
</fo:page-sequence-master>
</fo:layout-master-set>
</fo:layout-master-set>
School of Engineering
© K. Rege, ZHAW
<fo:page-sequence-master
<fo:page-sequence-master master-name="my-sequence">
master-name="my-sequence">
<fo:repeatable-page-master-alternatives>
<fo:repeatable-page-master-alternatives>
<fo:conditional-page-master-reference
<fo:conditional-page-master-reference page-position="first"
page-position="first" master-reference="first-page"/>
master-reference="first-page"/>
<fo:conditional-page-master-reference
<fo:conditional-page-master-reference odd-or-even="odd"
odd-or-even="odd" master-reference="odd-page"/>
master-reference="odd-page"/>
<fo:conditional-page-master-reference
<fo:conditional-page-master-reference odd-or-even="even"
odd-or-even="even" master-reference="even-page"/>
master-reference="even-page"/>
</fo:repeatable-page-master-alternatives>
</fo:repeatable-page-master-alternatives>
</fo:page-sequence-master>
</fo:page-sequence-master>
</fo:layout-master-set>
</fo:layout-master-set>
13 von 42
School of Engineering
© K. Rege, ZHAW
14 von 42
Zusammenfassung Master Seiten
■ Die Master Seiten
■
■
■
■
■
beschreiben das grundlegende Layout einer Seite
rechteckige Seite mit Rändern und Leerraum an allen vier Seiten
haben einen Namen
Unterteilt in 5 Bereiche
■ die Hauptregion (Body) und 4 Randbereiche
Definiert als Layout Master Menge: layout-master-set
■ einfache Master Seiten:
■ beschreiben das Layout einer einzelnen Seite
■ Seitensequenz Master: page-sequence-master
■
Seiteninhalt
■ beschreiben die Folge von Seiten
Seitenalternativen Master: repeatable-page-master-alternatives
■
beschreiben Alternativen innerhalb Seitensequenzen
School of Engineering
© K. Rege, ZHAW
15 von 42
School of Engineering
© K. Rege, ZHAW
16 von 42
Inhalt der Seiten
Arten von Flüssen
■ Wird als Seitensequenz beschrieben:
■ Fluss von Blöcken: flow
■
■
Layout anhand der angegebenen Master Seiten
■ Bezeichnung der Master Seite: master-reference
■ Bezeichnung der Region innerhalb Master Seite: flow-name
■
Der Inhalt wird in eine Seite in den angegeben Bereich "gegossen"Es wird von einem Fluss von
rechteckigen Bereichen ausgegangen
■
Definition von Fluss: fo:page-sequence
■
Fluss in eine Region: fo:flow
■
Folge von Blöcken: fo:block
<fo:layout-master-set>
<fo:layout-master-set>
<fo:simple-page-master master-name="my-page">
<fo:simple-page-master master-name="my-page">
<fo:region-body margin-top="3cm"/>
<fo:region-body margin-top="3cm"/>
</fo:simple-page-master>
</fo:simple-page-master>
</fo:layout-master-set>
</fo:layout-master-set>
<fo:page-sequence master-reference="my-page">
<fo:page-sequence master-reference="my-page">
<fo:flow flow-name="xsl-region-body">
<fo:flow flow-name="xsl-region-body">
<fo:block>Hello, world!</fo:block>
<fo:block>Hello, world!</fo:block>
<fo:block>It's a cruel world</fo:block>
<fo:block>It's a cruel world</fo:block>
</fo:flow>
</fo:flow>
</fo:page-sequence>
</fo:page-sequence>
School of Engineering
region
fo:region-body
fo:region-before
fo:region-after
fo:region-start
fo:region-end
■ Statischer Inhalt: static-content
■
flow-namen
xsl-region-body
xsl-region-before
xsl-region-after
xsl-region-start
xsl-region-end
17 von 42
© K. Rege, ZHAW
Blöcke werden in das Layout "gegossen"; z.T. nur body-region unterstützt
gemeinsamer Block über alle Seiten hinweg; Randregionen (Header, Footer, etc)
<fo:static-content
<fo:static-content flow-name=”xsl-region-after”>
flow-name=”xsl-region-after”>
<fo:block>The
<fo:block>The Periodic
Periodic Table</fo:block>
Table</fo:block>
</fo:static-content>
</fo:static-content>
<fo:flow
flow-name=”xsl-region-body”>
<fo:flow flow-name=”xsl-region-body”>
<fo:block>In
<fo:block>In this
this Chapter,
Chapter, we
we describe
describe ……
</fo:block>
</fo:block>
</fo:flow>
</fo:flow>
School of Engineering
© K. Rege, ZHAW
Blöcke und Bereiche (Regions)
Arten von Bereichen
■ Ein XSL-FO Dokument besteht aus
■ Block: block
■
■
■
■
■
geschachtelte Boxen (oder Bereiche) meist nicht überlappend
Bereiche enthalten Text, Linien, Graphiken etc.
2 Bereichsarten durch Formatierung-Objekte erzeugt
■ Block-Bereich: für einen Abschnitt, wird automatisch positioniert
■ Inline-Bereich: Teil einer Linie, z.B. Formel
2 Bereichsarten dynamisch während Seitenformatierung erzeugt
■ Zeilen-Bereich: repräsentieren eine Zeile
■ Symbol-Bereich: repräsentieren ein Spezialzeichen
Alle Bereiche sind folgendermassen aufgebaut
Although the processing model is described in the
Recommendation using constructs and procedural steps
following a well-defined sequence, there is no obligation on
a vendor that a particular implementation perform the steps
as documented. The only obligation on a formatter is that it
produce the rendered
■
■
■
18 von 42
rechteckiger Bereich
steht (im Falle von Text) für einen Abschnitt
Beginn und Ende auf neuer Zeile (html: <p>)
■ Zeilenteil: inline
■
Teil einer Text- Zeile: (html: <span>)
Rand:margin
Rand:margin
<fo:block
<fo:block padding
padding == "1cm">
"1cm">
<fo:inline
<fo:inline color="red">H</fo:inline>ello,
color="red">H</fo:inline>ello,
<fo:inline
font-weight="bold">world!</fo:inline>
<fo:inline font-weight="bold">world!</fo:inline>
</fo:block>
</fo:block>
Begrenzung:border
Begrenzung:border
Hello World
Füllbereich:padding
Füllbereich:padding
Inhalt
Inhalt
School of Engineering
© K. Rege, ZHAW
19 von 42
School of Engineering
© K. Rege, ZHAW
20 von 42
Allgemeine Bereichseigenschaften
■ Rand: margin
■
Identifikation des Teilbereichs
■ left, right, top, bottom
■ start, end, before, after
top/
before
right/
end
left/
start
■
Rand-Attribute
■ margin
■ margin-left, margin-right, margin-top, etc.
■
Platz zwischen den Bereichen
■ space-after, space-before
■
Längenangabe in in=2.54cm, cm,mm,pt (1/72 in)
bottom/
after
Allgemeine Bereichseigenschaften
<fo:block margin = "1cm" margin-right = "2cm" space-after="1cm"
<fo:block margin = "1cm" margin-right = "2cm" space-after="1cm"
Hello, world!
Hello, world!
<fo:block>
<fo:block>
School of Engineering
21 von 42
© K. Rege, ZHAW
School of Engineering
© K. Rege, ZHAW
Allgemeine Bereichseigenschaften
Allgemeine Bereichseigenschaften
■ Begrenzung: border
■ Füllbereich: padding
■
■
■
■
Bereiche können an allen Seiten Begrenzungenslinien haben:
■ border-left, etc
Farbe: color:
■ HTML Farben (red, green, etc.)
Stil: style
■ solid, dashed, dotted, double, inset, outset, groove,
ridge,none
Dicke: width:
■ thin, medium, thick
■
22 von 42
Attribute
■ padding-left, padding-right, etc.
■ Hintergrund: background
■
Hintergrund mit einer Farbe
■ background-color = "#E0E0E0"
■
Hintergrund durch Bild hinterlegt
■ background-image="url('Birds World.jpg')"
■ background-repeat="no-repeat"
■ Alignment von Inhalt innerhalb Bereich
■
<fo:block
<fo:block margin
margin == "2cm"
"2cm"
border-color="black"
border-color="black"
border-style="solid"
border-style="solid"
border-width="thin"
border-width="thin"
border-bottom-width="thick" border-right-width="thick">
border-bottom-width="thick" border-right-width="thick">
Hello,
Hello, world!
world!
</fo:block>
</fo:block>
School of Engineering
© K. Rege, ZHAW
display-align="after" | auto | before | center
<fo:block
<fo:block
padding="1cm"
padding="1cm"
background-image="url('Birds
background-image="url('Birds World.jpg')"
World.jpg')"
background-repeat="no-repeat"
background-repeat="no-repeat"
background-color="lightgray"
background-color="lightgray"
display-align
display-align == "center">
"center">
Hello, world!
Hello, world!
</fo:block>
</fo:block>
3D Box
23 von 42
School of Engineering
© K. Rege, ZHAW
24 von 42
Block-Behälter
■ Block-Behälter: block-container
■
■
■
■
Umfasst einen oder mehrere Blöcke
Kann sämtliche Attribute von Bereichen haben
Grösse kann angegeben werden
■ width = "10cm" height= "5cm"
Orientierung kann angeben werden
■ reference-orientation="180"
Text-Bereiche
<fo:block-container
<fo:block-container margin
margin == "2cm"
"2cm"
width
width == "10cm"
"10cm" height
height == "5cm"
"5cm"
reference-orientation="180">
reference-orientation="180">
<fo-block
<fo-block margin="1cm">
margin="1cm">
Hello,
Hello, world!
world!
<fo-block>
<fo-block>
<fo-block
<fo-block margin="1cm">
margin="1cm">
It's
It's aa cruel
cruel world
world
<fo-block>
<fo-block>
</fo:block-container
</fo:block-container >>
School of Engineering
© K. Rege, ZHAW
25 von 42
School of Engineering
© K. Rege, ZHAW
Attribute von Text-Bereichen
Attribute von Text-Bereichen
■ Text-Bläcke können Font- und Alignierungseigenschaften angegeben werden (Namen
wie in CSS)
■ Text Dekoration
■
■
■
■
font-size="14pt" font-style="italic"
font-weight="bold" font-family="Times"
color="red"
■
line-height="1.5cm"
text-align="justify"
■
■
© K. Rege, ZHAW
text-transform= "uppercase" lowercase | capitalize;
■ Shifted Text: subscripts and superscripts.
| center, start, end
<fo:flow
<fo:flow font-family="Times"
font-family="Times" font-size="12pt">
font-size="12pt">
<fo:block
<fo:block font-size="120%"
font-size="120%" font-style="italic">
font-style="italic">
<fo:inline
color="red">H</fo:inline>ello,
<fo:inline color="red">H</fo:inline>ello,
<fo:inline
<fo:inline font-weight="bold">world!</fo:inline>
font-weight="bold">world!</fo:inline>
</fo:block>
</fo:block>
</fo:flow
</fo:flow >>
School of Engineering
positiver Wert expandiert text, negativer Wert kondensiert ihn
letter-spacing, word-spacing
■ Text Transformationen
■ Zeilenhöhe und Alignierung
■
overline | strikethrough;
■ Buchstaben- und Wortzwischenraum
■ Grösse, Stil, Gewicht und Familie und Farbe:
■
text-decoration = "underline"
Können auch flow zugewiesen werden.
■ Eigenschaften werden "geerbt" wie bei CSS
■
■
26 von 42
baseline-shift ="sub"
| super
■ Hyphenate und Sprache
■
27 von 42
language = "de","en",... hyphenate = "true"
School of Engineering
© K. Rege, ZHAW
28 von 42
Attribute von Text-Bereichen
■ Attribute für Umbruch: break-before, break-after
■
■
■
■
Neue Kolonne: column
Neue Seite: page
Umbruch und beginne bei neuer geraden Seite: even-page
Umbruch und beginne bei neuer ungeraden Seite: odd-page
■ Blöcke zusammenhalten: keep-with-next, keep-with-previous, keeptogether
■
Strukturen und Graphiken
Möglicher Attribut Wert: always
School of Engineering
© K. Rege, ZHAW
29 von 42
School of Engineering
© K. Rege, ZHAW
Listen
Beispiel einer Liste
■ Listen sind ein genereller Mechanismus um benachbarte Blöcke zu alignieren
■ Beispiel einer Bullet-Liste mit zwei Einträgen
■
■ Listenblock:fo:list-block
■
■ Listenlabel: fo:list-item-label
end-indent="label-end()"
■ Listeninhalt fo:list-item-body
■
Bullet: &#x2022;
linke Seite Label bis linke Seite Body: provisional-distance-between-starts
■ Listeneintrag: fo:list-item
■
30 von 42
start-indent="body-start()"
provisional-distance-between-starts
label-end()
<fo:list-block
<fo:list-block
provisional-distance-between-starts="18pt">
provisional-distance-between-starts="18pt">
<fo:list-item>
<fo:list-item>
<fo:list-item-label
<fo:list-item-label end-indent="label-end()">
end-indent="label-end()">
<fo:block>
<fo:block>
……
……
<fo:block>
<fo:block>
</fo:list-item-label>
</fo:list-item-label>
<fo:list-item-body
<fo:list-item-body start-indent="body-start()">
start-indent="body-start()">
<fo:block>
<fo:block>
……
……
<fo:block>
<fo:block>
</fo:list-item-body>
</fo:list-item-body>
</fo:list-item>
</fo:list-item>
…….
…….
</fo:list-block>
</fo:list-block>
<fo:list-block
<fo:list-block
provisional-distance-between-starts="18pt">
provisional-distance-between-starts="18pt">
<fo:list-item>
<fo:list-item>
<fo:list-item-label end-indent="label-end()">
<fo:list-item-label end-indent="label-end()">
<fo:block>&#x2022;</fo:block>
<fo:block>&#x2022;</fo:block>
</fo:list-item-label>
</fo:list-item-label>
<fo:list-item-body start-indent="body-start()">
<fo:list-item-body start-indent="body-start()">
<fo:block>First item</fo:block>
<fo:block>First item</fo:block>
</fo:list-item-body>
</fo:list-item-body>
</fo:list-item>
</fo:list-item>
<fo:list-item>
<fo:list-item>
<fo:list-item-label end-indent="label-end()">
<fo:list-item-label end-indent="label-end()">
<fo:block>&#x2022;</fo:block>
<fo:block>&#x2022;</fo:block>
</fo:list-item-label>
</fo:list-item-label>
<fo:list-item-body start-indent="body-start()">
<fo:list-item-body start-indent="body-start()">
<fo:block>Second item</fo:block>
<fo:block>Second item</fo:block>
</fo:list-item-body>
</fo:list-item-body>
</fo:list-item>
</fo:list-item>
</fo:list-block>
</fo:list-block>
body-start()
School of Engineering
© K. Rege, ZHAW
31 von 42
School of Engineering
© K. Rege, ZHAW
32 von 42
Tabellen
Gerade horizontale Linien
■ Tabellen-Elemente: fo:table
■
■
FO Tabellen sind grundsätzlich ähnlich
aufgebaut wie HTML-Tabellen
Kolonnen-Element: fo:table-column
■ Breite der Kolonne: column-width
■
Wiederholung der Kolonne:
number-columns-repeated
HTML Element
TABLE
COL
COLGROUP
THEAD
TBODY
TFOOT
TD
TR
XSL FO Element
fo:table
fo:table-column
no equivalent
fo:table-header
fo:table-body
fo:table-footer
fo:table-cell
fo:table-row
■ Leader Element: fo:leader
Attribute: Länge: leader-length
Farbe: color
■ Muster-Zeichen: leader-pattern = "rule" | dots
■ Dicke: rule-thickness
■
■
<fo:block
<fo:block text-align="center"
text-align="center" >>
<fo:leader
<fo:leader leader-length="8cm"
leader-length="8cm"
leader-pattern="rule"
leader-pattern="rule"
rule-thickness="0.5pt"
rule-thickness="0.5pt" color="black"/>
color="black"/>
</fo:block>
</fo:block>
<fo:table
<fo:table border-style="solid"
border-style="solid" border-width="thick">
border-width="thick">
<fo:table-column
<fo:table-column column-width="20mm"
column-width="20mm"
number-columns-repeated="2"/>
number-columns-repeated="2"/>
<fo:table-body>
<fo:table-body>
<fo:table-row
<fo:table-row >>
<fo:table-cell border-style="solid">
<fo:table-cell border-style="solid">
<fo:block>Hallo</fo:block>
<fo:block>Hallo</fo:block>
</fo:table-cell>
</fo:table-cell>
<fo:table-cell
<fo:table-cell border-style="solid">
border-style="solid">
<fo:block>
<fo:block> World
World </fo:block>
</fo:block>
</fo:table-cell>
</fo:table-cell>
</fo:table-row>
</fo:table-row>
… …
… …
</fo:table-body>
</fo:table-body>
</fo:table>
</fo:table>
School of Engineering
entspricht html: <hr>
Bsp: punktierte Linie für Inhaltsverzeichnis
<fo:block
<fo:block text-align-last="justify">
text-align-last="justify">
1.
1. Introduction
Introduction <fo:leader
<fo:leader leader-pattern="dots"/>
leader-pattern="dots"/>
<fo:page-number-citation ref-id="intro"/>
<fo:page-number-citation ref-id="intro"/>
</fo:block>
1 Introduction ...........................................1
</fo:block>
1 Introduction ...........................................1
33 von 42
© K. Rege, ZHAW
School of Engineering
© K. Rege, ZHAW
Graphiken
Verknüpfungen: Links
■ Einbinden von svg, jpeg und gif-Graphiken: fo:external-graphic
■ Verknüpfungen (Links) innerhalb Dokument: fo:basic-link
■
■
Attribute:
Datei src = "url"
Breite, Höhe: width, height
■
Ziel-Element muss eine entsprechende Id Attribut haben
■
keine automatische Hervorhebung
Attribut: internal-destination="id"
■
Seitenverhältnis
Seitenverhältnis
bleibt
bleibterhalten
erhalten
bsp:
<fo:basic-link
<fo:basic-link internal-destination="smiley"
internal-destination="smiley"
text-decoration="underline">Click
text-decoration="underline">Click here</fo:basic-link>
here</fo:basic-link>
■
<fo:external-graphic src="file:boxes.svg"/>
■ <fo:external-graphic src="url('aufmacher.jpg')" width="7cm">
■ direktes Einbetten von Graphiken (z.B. SVG)
■
■ Verknüpfungen ausserhalb Dokument
Einbetten von Fremdformat: fo:instream-foreign-object
■
■
<fo:instream-foreign-object>
<fo:instream-foreign-object>
<svg:svg
<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="3cm"
width="3cm" height="4cm"
height="4cm" xml:space="preserve">
xml:space="preserve">
<svg:polygon
<svg:polygon style="fill"
style="fill" color="#FFCCCC"
color="#FFCCCC" points="0,31
points="0,31 18,0
18,0 36,31"/>
36,31"/>
</svg:svg>
</svg:svg>
</fo:instream-foreign-object>
</fo:instream-foreign-object>
School of Engineering
© K. Rege, ZHAW
34 von 42
35 von 42
uri welche auf das Ziel verweist
Attribut: external-destination="url"
<fo:basic-link
<fo:basic-link external-destination="http://www.zhwin.ch/~rea"
external-destination="http://www.zhwin.ch/~rea"
text-decoration="underline"
text-decoration="underline"
color="blue">Rege's
color="blue">Rege's Homepage</fo:basic-link>
Homepage</fo:basic-link>
School of Engineering
© K. Rege, ZHAW
36 von 42
Seiten Nummern und Nummern-Zitierung
Marker
■ Seiten-Nummern: fo:page-number
■ Markers werden verwendet wenn:
■
es kann die aktuelle Seiten Nummer angegeben werden
■
School of Engineering
<fo:static-content flow-name="xsl-region-before">
<fo:static-content flow-name="xsl-region-before">
<fo:block text-align="center">
<fo:block text-align="center">
<fo:retrieve-marker retrieve-class-name="titel-level1"/>
<fo:retrieve-marker retrieve-class-name="titel-level1"/>
</fo:block>
</fo:block>
</fo:static-content>
</fo:static-content>
<fo:static-content
<fo:static-content flow-name="xsl-region-before">
flow-name="xsl-region-before">
<fo:block
<fo:block text-align="end">
text-align="end">
Page <fo:page-number/> of
Page <fo:page-number/> of
<fo:page-number-citation
<fo:page-number-citation ref-id="terminator"/>
ref-id="terminator"/>
</fo:block>
</fo:block>
</fo:static-content>
</fo:static-content>
<fo:flow>
<fo:flow>
……
……
<fo:block id="terminator"/>
<fo:block id="terminator"/>
</fo:flow>
</fo:flow>
© K. Rege, ZHAW
■ darf nur im statischen Inhalt stehen
Marker im Text: fo:marker
■
wird ein Element mit einer Id versehen, kann die entsprechende Seitennummer
referenziert werden.
Bsp: Index, oder Seite von Totalseiten
<fo:block text-align-last="justify">
<fo:block text-align-last="justify">
1. Introduction
1. Introduction
<fo:leader leader-pattern="dots"/>·
<fo:leader leader-pattern="dots"/>·
<fo:page-number-citation ref-id="intro"/>
<fo:page-number-citation ref-id="intro"/>
</fo:block>
</fo:block>
■
■
■ Seiten-Nummer-Zitierung: page-number-citation
■
■
der Inhalt einer Region (typischerweise Rand) sich
entsprechend dem Inhalt einer andern Region (typ. Hauptregion) anpassen soll
Beispiel: Kopfzeile im Buch, die sich den Kapitelüberschriften anpasst
Referenz auf Marker: fo:retrieve-marker
■
<fo:static-content
<fo:static-content flow-name="xsl-region-before">
flow-name="xsl-region-before">
<fo:block
<fo:block text-align="end">Page
text-align="end">Page <fo:page-number/></fo:block>
<fo:page-number/></fo:block>
</fo:static-content>
</fo:static-content>
37 von 42
<fo:block>
<fo:block>
<fo:marker
<fo:marker marker-class-name="titel-level1">
marker-class-name="titel-level1">
Introduction
Introduction
</fo:marker>
</fo:marker>
<fo:block
<fo:block font-weight="bold"
font-weight="bold" text-align="center">
text-align="center">
1. Introduction
1. Introduction
</fo:block>
</fo:block>
…… …… ……
</fo:block>
</fo:block>
</fo:block>
</fo:block>
School of Engineering
© K. Rege, ZHAW
38 von 42
Fussnoten
■ Fussnoten werden am Ende der entsprechenden Seite angefügt
■
Stelle der Fussnote im Text: fo:footnote
■
Fussnote selber: fo:footnote-body
■
■
meist inline-Element
meist Liste
<fo:block>
<fo:block> This
This text
text contains
contains aa footnote
footnote
<fo:footnote>
<fo:footnote>
<fo:inline
baseline-shift="super"
<fo:inline baseline-shift="super"
font-size="smaller">(1)</fo:inline>
font-size="smaller">(1)</fo:inline>
<fo:footnote-body>
<fo:footnote-body>
<fo:list-block
<fo:list-block provisional-label-separation="0pt"
provisional-label-separation="0pt"
provisional-distance-between-starts="18pt">
provisional-distance-between-starts="18pt">
<fo:list-item>
<fo:list-item>
<fo:list-item-label
<fo:list-item-label end-indent="label-end()">
end-indent="label-end()">
<fo:block>(1)</fo:block>
<fo:block>(1)</fo:block>
</fo:list-item-label>
</fo:list-item-label>
<fo:list-item-body
<fo:list-item-body start-indent="body-start()">
start-indent="body-start()">
<fo:block>Footnote
<fo:block>Footnote text</fo:block>
text</fo:block>
</fo:list-item-body>
</fo:list-item-body>
</fo:list-item>
</fo:list-item>
</fo:list-block>
</fo:list-block>
</fo:footnote-body>
</fo:footnote-body>
</fo:footnote>
</fo:footnote>
after
after the
the word
word "footnote".</fo:block>
"footnote".</fo:block>
School of Engineering
© K. Rege, ZHAW
Kombinations mit XSLT
39 von 42
School of Engineering
© K. Rege, ZHAW
40 von 42
Kombination von XSLT und XSL-FO
Zusammenfassung
■ XSLT und XSL-FO können in einem Stylesheet kombiniert werden
■ Die Master Seiten
■
Aufruf mittels: fop -xml <xml-Datei-Namen> -xsl <xsl-Datei-Namen> -pdf out.pdf
■
■
<?xml
<?xml version="1.0"
version="1.0" encoding="iso-8859-1"?>
encoding="iso-8859-1"?>
<xsl:stylesheet
<xsl:stylesheet version="1.0"
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:fo="http://www.w3.org/1999/XSL/Format">
xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template
<xsl:template match="/">
match="/">
<fo:root
<fo:root >>
<fo:layout-master-set
<fo:layout-master-set >>
………
………
</fo:layout-master-set>
</fo:layout-master-set>
beide
beideNamespaces
Namespaces
■ Seitensequenzen
Match auf Wurzel-Knoten
Match auf Wurzel-Knoten
© K. Rege, ZHAW
■
■
XSL-FO Root Element
XSL-FO Root Element
■
<fo:page-sequence
<fo:page-sequence master-reference="my-page">
master-reference="my-page">
<fo:flow
<fo:flow flow-name="xsl-region-body">
flow-name="xsl-region-body">
<fo:block>
<fo:block>
<xsl:apply-templates
<xsl:apply-templates />
/>
</fo:block>
</fo:block>
</fo:flow>
</fo:flow>
</fo:page-sequence>
</fo:page-sequence>
</fo:root>
</fo:root>
</xsl:template>
</xsl:template>
</xsl:stylesheet>
</xsl:stylesheet>
School of Engineering
■
beschreiben das grundlegende Layout einer Seite
rechteckige Seite mit Rändern und Leerraum an allen vier Seiten
Unterteilt in 5 Bereiche
■ die Hauptregion (Body) und 4 Randbereiche
stellen den Inhalt dar
Flüsse von Blöcken, die in die Bereiche der Master Seiten
"gegossen" werden
Blöcke sind ebenfalls unterteilt
■ Rand(margin), Begrenzung(border) und Füllbereich (padding)
■ Der Text in den Blöcken kann auf vielfältige Weise
Formatiert werden
■
■
41 von 42
Font, Farbe, etc
Listen, Tabellen, Links, Graphiken, Referenzen, etc.
School of Engineering
© K. Rege, ZHAW
Hello World
42 von 42