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: • 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>•</fo:block> <fo:block>•</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>•</fo:block> <fo:block>•</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