docAusgabeformatierung Ausgabeformatierung mit HTML, CSS, XSL:FO
download 
Report Transcription
Ausgabeformatierung Ausgabeformatierung mit HTML, CSS, XSL:FO
Ausgabeformatierung 08 G. Görz, J. Schneeberger Lehrstuhl Informatik 8 (KI) [email protected]! [email protected]! 1 Ausgabeformatierung mit HTML, CSS, XSL:FO Übersicht • HTML • CSS • XSL:FO 3 HTML • Das, was im Browser dargestellt wird. Zusätzlich: – CSS–Formatierung – JavaScript (AJAX) • Animationen • Aktive Elemente • Menüs etc. – Flash – ActiveX – PDF – ... 4 Versionen • HTML (3. November 1992) • 2.0 (November 1995) – Die erste stabile HTML-Version. – Expansion des WWW. • 3.2 (14. Januar 1997) – Weitere Expansion des WWW. – Design fängt an eine große Rolle zu spielen. – HTML wird mißbraucht. • 4.0/4.01 (Dez. 1997/1999) – Bereinigung von HTML. – Browserkrieg – Versionswirrwar und Browserinkompatibilitäten. • XHTML 1.0/1.1 (2000/2001) – Versuch einer Bereinigung – Browser können (fast) alles • HTML 5 – in der Entwicklung: neue Tags 5 [http://de.wikipedia.org/wiki/Hypertext_Markup_Language#Versionen] Aufbau einer Seite <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Beschreibung der Seite</title> </head> <body> </body> </html> • Version • Kopf – Titel – Metadaten (Stichwörter, Zusammenfassung, Zeichensatz, DC) • Rumpf 6 Absätze • • • • Überschriften: h1, h2, ..., h6 Absätze: <p> ... </p> Zeilenumbruch: <br> bzw. </br> Listen (nummeriert / unnummeriert) <ol> <li>...</li> </ol> <ul> <li>...</li> </ul> • Zitate und Adressen • vorformatierter Text • physische vs. logische Auszeichnung: <b>...</b> / <strong>...</strong> 7 Links • Anker (absolut/relativ/intern) <a href="http://www.tagesschau.de/">ARD Tagesschau</a> • Zielmarken <a name="ziel"> • Typisierte Verweise <div style="width:100%; background-color:#eee; padding:5px"> <a href="../../../index.htm" rev="contents">Inhalt</a> | <a href="../tastatur.htm" rel="next">weiter</a> | <a href="../dateitypen.htm" rel="prev">zurück</a> | <a href="../index.htm" rev="chapter">zum Kapitelanfang</a> </div> 8 Blocklevel- und Inline-Elemente • Allgemeine Tags für Blocklevel-Elemente <div align="right"> <h1>Alles rechts am Rand</h1> <ul> <li>alles rechts am Rand</li> <li>...</li> </ul> </div> • Allgemeines Inline-Element <h1 style="font-size:500%"> <span style="color:blue">A</span> <span style="color:red">B</span> <span style="color:green">C</span> </h1> 9 Tabellen <table border="1"> <tr> <th>Berlin</th> <th>Hamburg</th> <th>München</th> </tr> <tr> <td>Miljöh</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table> 10 Bilder und Objekte • Bilder <img <img <img <img <img src="verzeichnis/datei.gif" alt="Grafik"> src="verzeichnis/unterverz/datei.gif" alt="Grafik"> src="../datei.gif" alt="Grafik"> src="../../../datei.gif" alt="Grafik"> src="../woanders/datei.gif" alt="Grafik"> • Verweissensitive Grafiken • Objekte (Applets, SVG, Flash, etc.) <object data="uhr.svg" type="image/svg+xml" width="200" height="200"> <param name="src" value="uhr.svg"> Ihr Browser kann das Objekt leider nicht anzeigen! </object> 11 Formulare <form action="input_text.htm"> <p>Vorname:<br> <input name="vorname" type="text" size="30" maxlength="30"> </p> <p>Zuname:<br> <input name="zuname" type="text" size="30" maxlength="40"> </p> </form> 12 Programmierstil • Nicht für bestimmten Browser schreiben • Nicht für bestimmte Bildschirmauflösung schreiben • HTML-Elemente nicht zweckentfremden – Bestimmte Attribute sind inzwischen „zwingend“ vorgeschrieben. – HTML-Validierung • Ehrliche und aussagekräftige Verweistexte verwenden • Grafiken richtig einsetzen • HTML barrierefrei einsetzen. 13 Links • Selfhtml (jetzt ohne Stefan Münz) http://de.selfhtml.org/ 14 CSS http://www.csszengarden.com/ 15 XSL-FO eXtensible Stylesheet Language Formatting Objects XSL-FO • Offizielle Bezeichnung: XSL • XML-Sprache zur Formatierung von XML-Daten, z.B. für Druckausgabe • Automatisierung von Seitengestaltung und Umbruch (Satz und Umbruch) – Verarbeitung von großen Dokumenten (z.B. juristische Publikationen, technische Dokumentationen) – konsistentes Layout, Single-Source Publishing – Minderung der Satzkosten (Kosten für Seitengestaltung) • Ausgabe ist eine Folge von Seiten in fester Höhe und Breite 17 Problembereiche • • • • • Kopfbereich Fußbereich Ränder Mehrspaltigkeit Platzierung von Inhalten außerhalb des Textflusses • Zeilenumbruch (Silbentrennung) • Spalten-/Seitenumbruch 18 XSL-FO : Eigenschaften • portrait and landscape pages • multiple page sizes • multiple writing directions • headers/footers • generated page numbering • graphics • tables, including running heads, row and column spans • floating areas • widow/orphan control • Hyphenation and justification • recto-verso pages • multiple columns of text on a page • Unicode • generated ToCs • re-sorting items for output 19 Verarbeitungsschritte ! Verarbeitung ! Eine von XML zu XSL-FO mittels XSLT XSL-FO–Engine interpretiert die FO-Instanz und übersetzt sie in gedruckte Seiten (z.B. PDF, RTF, etc) 20 FO-Engines XSL Formatter, Antenna House (www.antennahouse.com) • Kommerzielles Produkt (v5.1) • “Compliant with XSL 1.1“ • Implementierung der aktuellen XSL-FOSpezifikation zu großen Teilen • GUI und Command Line Interface • Kann auch in Server-Umgebung verwendet werden • Produziert PDF/X und PDF/A aus XML-Input • Mehrsprachigkeit bei der Silbentrennung 21 FO-Engines FOP, Apache Foundation (http://xml.apache.org/fop ) ! Freie, Open-Source–Applikation (v. 0.95) ! Geschrieben in Java ! Nur unvollständige Implementierung der aktuellen XSLFO–Spezifikation ! Keine GUI; kann in andere Systeme eingebunden werden ! Produziert PDF, PS, PCL, AFP, XML, Druck, AWT, PNG 22 Maßeinheiten in FO • • • • cm: Zentimeter mm: Millimeter in: Inch (1 in = 2.54 cm) pt: (DTP-Punkte (1 pt = 1/72 in = 0.353 mm) geringfügig abweichend von Didot-Punkten (=0.376 mm) • pc: Picas (1 pc = 12 pt) • px: Pixel • em: von der Schriftart und -größe abhängige Einheit; in der Praxis entspricht 1 em der Höhe des Buchstabens „m“ 23 Seitenlayout • fo:root - Wurzelelement jeder FO-Datei • Kinderelemente von fo:root – ein <fo:layout-master-set>: enthält seitenspezifische Informationen (Größe einer Seite, Ränder, Kopf- und Fußbereich) – optionale <fo:declarations>: z.B. Farbprofile (wird selten eingesetzt, da durch aktuelle Engines nicht unterstützt) – ein oder mehrere <fo:page-sequence>: legt die Reihenfolge fest, in der die die im <fo:layout-master-set> definierten Seiten erscheinen sollen 24 Druckbereich festlegen (Layout-master-set) <fo:simple-page-master page-width="15cm” page-height="15cm“ margin="1cm” master-name=“example"> <fo:region-before extent=“20mm“/> <fo:region-after extent=“20mm“/> <fo:region-body margin=“1cm” padding-top=“3cm” padding-bottom=“3cm”/> </fo:simple-page-master> • extent: Gibt die Ausdehnung des Bereiches an (für Kopf- und Fussbereich also die Höhe) • Der body-Bereich benötigt kein extent (ist der Bereich, der übrig bleibt) • Weitere Attribute für Rahmen, Ränder, Füllungen und Hintergründe, Schreibrichtung, Schriftausrichtung 25 Layout-master-set Margin <fo:region-before extent="20mm” /> margin padding <fo:simple-page-master page-width="15cm" page-height="15cm“ margin="1cm" master-name=“example"> regionstart <fo:region-body margin=“1cm” padding-top=“3cm” padding-bottom=“3cm” /> padding fo:region-after extent="20mm” 26 regionend Beispiel <?xml version="1.0" encoding="UTF-8"?> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master master-name=“TitlePage" page-width="210mm" page-height="297mm"> <fo:region-body margin="15mm" margin-top="30mm" border="1pt black solid" padding="3mm" /> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="TitlePage"> <fo:flow flow-name="xsl-region-body"> <fo:block font-family="Arial" font-size="36pt" color="red"> Dies ist eine Titelseite! </fo:block> </fo:flow> </fo:page-sequence> </fo:root> 27 28 Blöcke • Zentrales Konzept in XSL-FO • Bindet Elemente wie Tabellen, Bilder, Listen, Absätze usw. in rechteckige Anzeigebereiche ein • Blöcke können ineinander verschachtelt werden • Vielzahl von Attributen: z.B. – zur Font-Bestimmung: font-family, font-size, font-weight, – Block-Rahmen: border-style, border-width – Zeilenvorschub: space-before, space-after – margin, background-color, text-indent 29 Beispiele <fo:block font-size="14pt" font-family="verdana" font-color="red" space-before="5mm" space-after="5mm"> Blöcke </fo:block> <fo:block text-indent="5mm" font-family="verdana" font-size="12pt" font-weight=“bold" space-before="5mm" space-after="5mm"> Blöcke sind ein zentrales Konzept in XSL-FO </fo:block> 30 Typografie • Textausrichtung (text-align, text-align-last) – center, left, right, justify (Blocksatz) • Einrückungen (start-indent, end-indent, textindent, last-line-indent) • Font (font-family, font-size, font-style, font-weight) • Unterstreichung, Überstreichung, Durchstreichung (text-decoration) – underline, overline, line-through • Silbentrennung (hyphenation), Wortabstände • Groß- und Kleinschreibung, Hoch-Tiefstellung • Zeilen-, Spalten, Seitenumbruch • orphans (Schusterjungen), widows (Hurenkinder) 31 Rahmen, Ränder, Abstände • Abstände zwischen Bereichs-(Block-)grenzen – margin, margin-top, margin-left, margin-right, margin-bottom • Innenabstände: Abstände von den Blockgrenzen nach innen – padding.... • Rahmen: umfassen Blöcke – werden außerhalb der Block-Fläche hinzugefügt – border-before, border-after, border-start, borderend, color, style, width • Vorschübe – space-after, space-before 32 Flow-Konzept • <fo:flow> fließen die Inhalte und werden ggf. zu mehreren Seiten umgebrochen, wenn der Umfang das Aufnahmevermögen einer Seite übersteigt. • Der Inhalt von <fo:flow> bestimmt den Zeilen- und Seitenumbruch und damit die Anzahl der generierten Seiten • Das Element <fo:static-content> bestimmt die statischen Inhalte von Seitenbereichen, außerhalb des Fließtextes (z.B. für Kopfzeilen etc.) • Ist der static-content zu groß für eine Seite, wird die Formatierung abgebrochen oder eine Warnung angegeben • Eine Page-Sequence muss immer static-content oder flow-Bereiche enthalten 33 Beispiel <?xml version="1.0" encoding="UTF-8"?> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master master-name="SimplePage" page-width="210mm" page-height="297mm" margin="20mm"> <fo:region-body margin="15mm" margin-top="30mm" border="1pt black solid" padding="3mm" /> <fo:region-before extent="20mm" background-color="yellow" /> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="SimplePage"> <fo:static-content flow-name="xsl-region-before" font="italic 10pt Times"> <fo:block>Static text in de fo:region-before </fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body"> <!-- snip --> </fo:flow> </fo:page-sequence> </fo:root> 34 Ergebnis 35 Seiten-Sequenzen <fo:layout-master-set> <fo:simple-page-master master-name="TitlePage" (… def. …)> <fo:region-body /> </fo:simple-page-master> <fo:simple-page-master master-name="SimplePage" (… def. …)> <fo:region-body /> <fo:region-before /> </fo:simple-page-master> <fo:page-sequence master-reference="TitlePage"/> <fo:page-sequence master-reference="SimplePage"/> </fo:layout-master-set> 36 Listen • • • • <fo:list-block> <fo:list-item> <fo:liste-item-label> <fo:liste-item-body> (Liste) (Listenelement) (Listenelement-Etikett) (Listenelement-Inhalt) List-block List-item List-item-body List-item-label 37 Beispiel: Liste <fo:list-block><fo:list-item> <fo:list-item-label> <fo:block>*</fo:block> </fo:list-item-label> <fo:list-item-body> <fo:block>Volvo</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>Saab</fo:block> </fo:list-item-body> </fo:list-item></fo:list-block> 38 * Volvo * Saab Tabellen Tag Beschreibung! <fo:table> oberstes Element f"r Tabelle! <fo:table-and-caption> Tabelle mit #berschri$ und Legende! <fo:table-caption> #berschri$% kommt nach &fo:table'and' caption(! <fo:table-header> Kopfbereich! <fo:table-body> Tabelleninhalt! <fo:table-footer> Fussbereich! <fo:table-column> Vorweg'Spez)kation von Spalten! <fo:table-row> Tabellenzeile! <fo:table-cell> Tabellenzelle! 39 Beispiel: Tabelle <fo:table-and-caption> <fo:table> <fo:table-column column-width="25mm"/> <fo:table-column column-width="25mm"/> <fo:table-header> <fo:table-cell><fo:block font-weight="bold">Car</fo:block></fo:table-ce <fo:table-cell><fo:block font-weight="bold">Price</fo:block></fo:table</fo:table-header> <fo:table-body> <fo:table-row> <fo:table-cell><fo:block>Volvo</fo:block></fo:table-cell> <fo:table-cell><fo:block>$50000</fo:block></fo:table-cell> </fo:table-row> <fo:table-row> <fo:table-cell><fo:block>SAAB</fo:block></fo:table-cell> <fo:table-cell><fo:block>$48000</fo:block></fo:table-cell> </fo:table-row> </fo:table-body> </fo:table> 40 </fo:table-and-caption> Weitere Anweisungen • <fo:page-number> : Stelle aktuelle Seitenzahl dar (z.B. in static-content) • Überschriften: Werden über XSLT als eigene Blöcke generiert • Bei der XSL-Produktion erleichtert die Verwendung von xsl:attribute-sets die Definition von häufig vorkommenden BlockFormatierungen • Weitere wichtige Konzepte: – Fußnoten – Grafiken – Hyperlinks – automatische Indexerstellung 41
