XSL-FO. XSL-Formatting Objects.

Transkript

1 XSL-FO XSL-Formatting Objects

2 Das Umfeld XSL-FO... bildet zusammen mit XSLT und XPath die XSL (extensible Stylesheet Language)... ist eine XML Applikation... definiert das visuelle Layout-Modell... wird mit Hilfe von einem Transformations-Tool (FOP, XEP,...) nach PDF, PostScript,... transformiert

3 Daten Formatierte Ausgabe Die XML Daten werden mit Hilfe eines Stylesheets nach XSL-FO übersetzt, und dann mit Hilfe eines FO- Transformations-Tools nach Postscript, PDF,... XML Daten XSL Style Sheet saxon XSL-FO Fop, XEP,... Display Print

4 Ein einfaches FO-Beispiel 1) 2) 3) 4) 5) <?xml version="1.0"?> <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name="only" page-width="5.5cm" margin-left="1cm"> <fo:region-body/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="only"> <fo:flow flow-name="xsl-region-body"> <fo:block font-size="18pt"> A small <fo:external-graphic src="file:fo.jpg"/> example </fo:block> </fo:flow> </fo:page-sequence> </fo:root> Die PDF-Ausgabe von FOP

5 Die wichtigsten XSL-FO Elemente

6 XSL-FO Elemente Es gibt 56 XSL-FO Elemente fo:block, fo:block-container, fo:character, fo:externalgraphic, fo:flow, fo:footnote, fo:inline, fo:layoutmaster-set, fo:leader, fo:list-block, fo:list-item, fo:list-item-body, fo:list-item-label, fo:page-number, fo:page-sequence, fo:region-after, fo:region-before, fo:region-body, fo:root, fo:simple-page-master, fo:table-and-caption, fo:table, fo:table-body, fo:table-caption, fo:table-cell, fo:table-column, fo:table-footer, fo:table-header, fo:table-row,...

7 fo:root Das Root-Element eines XSL-FO Dokumentes heisst fo:root. Im Root-Knoten muss der fo Namespace deklariert werden. Jedes XSL-FO Dokument beginnt also mit den Zeilen: <?xml version="1.0"?> <fo:root xmlns:fo="

8 Die Seiten Aufteilung, Layout Eine Seite ist aufgeteilt in die fünf Bereiche regionbefore, region-after, region-start, region-end und region-body. Diese sehen in der üblichen Lesart (von links nach rechts, von oben nach unten) wie folgt aus: margin before start body end after margin

9 fo:layout-master-set <fo:layout-master-set> <fo:simple-page-master master-name="first" page-height="297mm" page-width="210mm" margin-top="15mm" margin-bottom="15mm" margin-left="20mm" margin-right ="15mm"> <fo:region-before extent="15mm" region-name="fbefore"/> <fo:region-body margin-top="20mm"/> </fo:simple-page-master>... </fo:layout-master-set>

10 fo:simple-page-master Mit dem simple-page-master Knoten werden die Seitenränder (margin) und ev. die Papiergrösse festgelegt. Weiter wird definiert, in wieviele Bereiche (regions) die Seite aufgeteilt werden soll (region-body, region-before, region-after,...) Pro Seitentyp (Titelseite, Index-Seite, Inhaltsverzeichnis,...) wird je eine separate Seiten-Vorlage definiert.

11 Verteilung des Inhalts fo:page-sequence Mit dem fo:page-sequence Knoten wird der Text (Inhalt) den verschiedenen Bereichen zugeordnet. <fo:page-sequence master-reference="first"> <fo:static-content flow-name="fbefore"> <fo:block> Das ist die Kopf-Zeile </fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body" > <fo:block text-align="justify" font-size="16pt"> Hier ist der Text der ersten Seite. </fo:block> </fo:flow> </fo:page-sequence>

12 Die Platz-Verteilung für die Regionen 10 cm 1 cm 1 cm 1.5 cm 2 cm 1.5 cm 1.5 cm 1 cm 1 cm 9 cm Beispiel Seite 6

13 Definieren von verschiedenen Seiten <fo:layout-master-set> <fo:simple-page-master master-top ="1.5cm" page-height="10cm"... master-name="erste"> <fo:region-beforeextent="1cm" region-name="first-before"/> <fo:region-bodymargin-top="2cm" margin-bottom="1.5cm"/> <fo:region-after extent="1cm" region-name="first-after"/> </fo:simple-page-master> <fo:simple-page-master... master-name="restliche"> <fo:region-before extent="2.5cm" region-name="rest-before"/> <fo:region-body margin-top="2.5cm"... /> </fo:simple-page-master>...

14 Welcher Seitentyp wird wann verwendet <fo:page-sequence-master master-name="global"> <fo:repeatable-page-master-alternatives> <fo:conditional-page-master-reference master-reference="erste" page-position="first"/> <fo:conditional-page-master-reference master-reference="restliche" page-position="rest"/> </fo:repeatable-page-master-alternatives> </fo:page-sequence-master> </fo:layout-master-set> Beispiel Seite 7

15 fo:flow fo:flow enthält eine beliebige Anzahl von Blöcken mit Text, Tabellen, Listen und Bildern. Mit Hilfe des flow Elementes wird der Dokument-Inhalt (Fliesstext) begrenzt. <fo:flow flow-name="xsl-region-body"> <fo:block font-size="16pt"> This is the document content. This is the <fo:external-graphic src="cup.gif"/> document content. This is the... </fo:block> </fo:flow>

16 fo:static-content In den Randbereichen befindet sich normalerweise wiederkehrende Information (Überschriften, Fussnoten, Seitenzahlen,...) <fo:static-content flow-name="region-after"> <fo:block text-align="end" font-size="10pt"> Seite <fo:page-number/> </fo:block> </fo:static-content> Seite 1

17 fo:block fo:block erzeugt einen (Text-)Bereich, welcher eine Zeile, aber auch mehrere Zeilen oder Seiten lang sein kann. Typischerweise wird fo:block benutzt, um zusammengehörende Ausgabe-Elemente (ein Textabschnitt, eine Titelzeile, eine Tabelle,...) zu gruppieren. <fo:block font-size="36pt"> Chapter 1: Introduction </fo:block>

18 fo:block-container Ein fo:block-container Element kann an beliebiger Stelle auf des Seite (absolut) positioniert werden: <fo:block-container border-color="black" border-style="solid" border-width="1pt" height="1cm" width="4cm" padding="5pt" top="9.5cm" left="12cm" position="absolute" > <fo:block text-align="start" line-height="10pt" font-family="sans-serif" font-size="10pt"> Hier ist ein Text </fo:block> </fo:block-container> Hier ist ein Text

19 fo:inline Das Element fo:inline dient zum Formattieren eines Textabschnitts, ohne dass eine neue Zeile begonnen wird. <fo:block font-family="times Roman"> Hier ist <fo:inline font-style="italic"> ein </fo:inline> Abschnitt <fo:inline font-weight="bold"> mit </fo:inline> verschiedenen <fo:inline color="blue"> Formaten. </fo:inline> </fo:block>

20 fo:external-graphic Mit Hilfe von fo:external-graphic wird ein Bild in ein Dokument eingebettet. Mögliche Bildformate sind GIF und JPEG, allerdings ist nicht festgelegt, welche Bildformate unterstützt werden (müssen). <fo:block> Look at this! <fo:external-graphic src="cup.jpg"/> </fo:block>

21 fo:list-block, fo:list-item Das Element fo:list-block dient zum Erzeugen einer Liste. Es erwartet als Kinder (beliebig viele) fo:listitem Knoten. <fo:list-block> <fo:list-item> <fo:list-item-label><fo:block> a) </fo:block> </fo:list-item-label> <fo:list-item-body start-indent="body-start()"> <fo:block>dies ist das erste Listenelement.</fo:block> </fo:list-item-body> </fo:list-item>... </fo:list-block>

22 Tabellen Zum Erzeugen von Tabellen gibt es die Elemente: fo:table, fo:table-body, fo:table-cell, fo:tablecolumn, fo:table-footer, fo:table-header, fo:table-row fo:table enhält (optional) einen table-header und/oder table-footer sowie einen table-body. Der table-body besteht dann aus table-row Elementen, welche wiederum aus table-cell Knoten zusammengesetzt sind.

23 Erzeugen von Tabellen <fo:table border="1pt solid black" background-color="#eeeeee"> <fo:table-column column-width="20mm"/> <fo:table-column/> <fo:table-header font-weight="bold" background-color="#cccccc"> <fo:table-row> <fo:table-cell border="1pt solid black" padding="3pt"> <fo:block> HTML </fo:block> </fo:table-cell>... </fo:table-row> </fo:table-header> <fo:table-body>... </fo:table-body> </fo:table>

24 This page is...

25 Die wichtigsten Attribute Properties

26 Attribute sind Properties Die Attribute der FO-Elemente sind Formatierung- Anweisungen. Sie bestimmen (letztlich) das Aussehen des darzustellenden Inhalts. Es gibt mehr als 200 Format Properties (Attribute), welche oft in verschiedensten Elementen angegeben werden können. Properties werden von aussen nach innen abgearbeitet. Bei sich widersprechenden Angaben, überschreibt die lokale Angabe die globale. Eine Property, welche an verschiedenen Orten benutzt werden kann, hat immer dieselbe Bedeutung.

27 Character Properties Alle XSL-FO Elemente, welche Text enthalten können (fo:block, fo:inline,...), erlauben Attribute für das Setzen von Character Properties(color, font-size, font-family, text-decoration,...). <fo:block font-family="helvetica" font-size="12pt"> Hier ist ein <fo:inline text-decoration="underline"> wichtiger </fo:inline> <fo:inline color="red" font-weight="900"> Text </fo:inline> </fo:block>

28 Character Property: Farbe Die color-property setzt die Schriftfarbe: <fo:inline color="green"> Text </fo:inline> Wie in CSS gibt es 16 vordefinierte Farben: white Weitere Farben können als hexadezimale rgb-trippel definiert werden: #RRGGBB.

29 Character Property: Font Die Property font-family definiert den zu benutzenden Font: <fo:inline font-family="times Roman" > Times Roman </fo:inline> Mögliche Fonts sind Helvetica, Times Roman, Courier, Symbol, ZapfDingbats,...

30 Character Property: Schriftgrösse Die Property font-size definiert die zu benutzende Schriftgrösse: <fo:inline font-family="helvetica" font-size="24pt"> ein Text in 24 Punkt Schrift </fo:inline>

31 Character Property: Style Der Style des Fonts wird definiert durch die Property font-style <fo:block font-family="times Roman" font-style="italic"> Times Roman italic </fo:block> Es gibt die Styles italic, normal, oblique, reverse-normal und reverseoblique

32 Character Property: Schrift-Dicke Die Dicke der Schrift wird definiert durch die Property font-weight: <fo:block font-family="times Roman" font-weight="bold"> Hier ist ein bold Text </fo:block> <fo:block font-family="times Roman" font-weight="normal"> Hier ist ein normaler Text </fo:block>

33 Character Property: Dekorationen text-decoration="underline" unterstrichen text-decoration="overline" überstrichen text-decoration="line-through" durchgestrichen text-shadow="gray" Schattenschrift text-transform="capitalize" Alle Ersten Buchstaben text-transform="uppercase" GROSSSCHRIFT text-transform="lowercase" kleinschrift

34 Sentence Properties Sentence Properties bestimmen den Platz zwischen den einzelnen Buchstaben (letter-spacing), zwischen einzelnen Wörtern im Text (word-spacing) und zwischen den einzelnen Linien im Text (line-height, text-depth, text-altitude,...), die Ausrichtung des Texts (text-align),...

35 Sentence Property: Zeilenabstand Der Zeilenabstand im Text kann kontrolliert werden durch die Properties line-height, text-depth und text-altitude. <fo:block font-size="10pt" line-height="16pt"...> Hier ist ein Text,... </fo:block>

36 Sentence Property: Text Ausrichtung Ob der Text linksbündig, rechtsbündig, zentriert oder im Blocksatz gesetzt werden soll, wird durch die Property text-align gesetzt. Diese kann die folgenden Werte annehmen: start oder left linksbündig center zentriert end oder right rechtsbündig justify Blocksatz

37 Definieren von Attribut-Listen Definieren verschiedener Styles für verschiedene Textblöcke: <xsl:attribute-set name="text-style"> <xsl:attribute name="font-family">serif</xsl:attribute> <xsl:attribute name="font-size">12pt</xsl:attribute> <xsl:attribute name="font-weight">normal</xsl:attribute>... </xsl:attribute-set> Verwenden mit: <fo:block xsl:use-attribute-sets="text-style">

38 Übung