Ausgabeformatierung Ausgabeformatierung mit HTML, CSS, XSL:FO

Transcription

Ausgabeformatierung Ausgabeformatierung mit HTML, CSS, XSL:FO
Ausgabeformatierung
08
G. Görz, J. Schneeberger
Lehrstuhl Informatik 8 (KI)
goerz@informatik.uni-erlangen.de!
josef.schneeberger@fh-deggendorf.de!
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&uuml;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&uuml;nchen</th>
</tr>
<tr>
<td>Milj&ouml;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