XML-Know How

Styling von E-Books mit CSS

Die CSS-Regeln können mit allen drei bereits angesprochenen Methoden in das HTML-Dokument eingebracht werden – eine »harte« Formatierung per style-Attribut, die Formatierung einer HTML-Datei über das style-Element und die Verlinkung zu einer externen CSS-Datei über das link-Element. Für eine einheitliche Formatierung des E-Books – bzw. sogar einer ganzen E-Book-Reihe oder des gesamten E-Book-Programms eines Verlages – bietet es sich hier unbedingt an, ein externes Stylesheet anzulegen und sorgfältig zu pflegen. Dies spart nicht nur eine Menge Arbeit, es führt auch zu einem Wiedererkennungswert, wenn mehrere E-Books eines Verlages dasselbe Aussehen aufweisen.

Anders als bei gedruckten Büchern, die sich durch ihre individuelle Gestaltung auszeichnen, zeichnet sich ab, dass die Einheitlichkeit von E-Books eher als Qualitätssiegel wahrgenommen wird. Es kann also regelrechte Markenbildung betrieben werden, wenn die E-Books eines Verlages im Aufbau (Anordnung von Titelei, Impressum, Zusatztexten etc.) und Gestaltung einheitlich sind.

Da die Lesegeräte für E-Books seitenorientiert arbeiten, also kein Scrollen, sondern ein Blättern vorsehen, bedarf es neben den gängigen Formatierungsanweisungen wie Schriftgröße, Schriftart und Abständen noch weiterer Angaben.

Wie viel jeweils auf eine »Seite« (im E-Book-Kontext auch als »Viewport« bezeichnet) passt, hängt von der Displaygröße des Endgerätes sowie den voreingestellten Schriftgrößen ab. Der Zeilen- und Seitenumbruch wird dann automatisiert vorgenommen. Daher ist es – anders als bei HTML-Seiten für die Darstellung im Browser – notwendig, einen Satzspiegel zu definieren. Die Seitenränder lassen sich mit dem Aufruf @page gemäß CSS2 entsprechend einstellen:

Beispiel:

@page {

margin-top: 0.8em;

margin-bottom: 1.2em;

margin-left: 1em;

margin-right: 1em;

}

Styling von Seitenumbrüchen

Auch für erweiterte seitenspezifische Einstellungen (z. B. die Vermeidung von Schusterjungen (»orphans«) und Hurenkindern (»widows«)) oder explizite Seitenumbrüche stellt CSS2 entsprechende Befehle zur Verfügung:

/* Vor bzw. nach dem Seitenwechsel sollen mindestens 3 Zeilen Text stehen */

p {

widows: 3;

orphans: 3;

}

/* vor einer Überschrift h1 soll stets ein Seitenwechsel vorgenommen werden */

h1 {page-break-before: always;}

/* vor einer Überschrift h2 soll immer dann ein Seitenwechsel vorgenommen werden, wenn die h2 auf einer linken Seite zu stehen käme (h2 steht dann also auf einer rechten Seite)*/

h2 {page-break-before: left;}