Im zweiten Teil der Serie EPUB-Praxis geht es um Seitenumbrüche: Im Print ein Thema, das selbstverständlich von allen gängigen DTP-Anwendungen und Satzsystemen mit vielfältigsten Funktionen unterstützt wird, im eBook-Bereich an vielen Stellen jedoch ein Buch mit sieben Siegeln. Warum? Weil EPUB-Reader eigentlich unter der Haube reinrassige HTML-Browser sind und deswegen Paginierung eigentlich ein Fremdkörper in deren Formatierungs-Algorithmen ist. Wie kann man aber mit Umbrüchen sinnvoll umgehen und dafür sorgen, dass die aus Print-Büchern gewohnten Layout-Regeln zumindest so weit beachtet werden, wie hier möglich ist?

Das Grundproblem: EPUB-Reader kennen eigentlich keine Seiten

Zunächst einmal besteht der grundsätzliche Unterschied zwischen einem Seiten-orientierten Medium wie z.B. PDF und einer EPUB-Datei darin,  dass EPUB intern aus einer Abfolge von HTML-Seiten besteht. Ein EPUB-Reader ist insofern nichts anderes als ein spezieller HTML-Browser, der von der Idee her immer in sichtbaren Bereichen seines Anzeige-Fensters (in Web-Terminologie: dem „Viewport“) denkt, und nicht in Seiten. Für die Formatierung einer Druckausgabe mittels CSS wurden zwar vom W3C auch Module für die Ausgabe in Print definiert, die allerdings erst spät in die Rendering-Engines der gängigen Browser integriert wurden und von den Entwicklern auch heute noch eher stiefmütterlich behandelt werden.

Daneben lassen sich in EPUB nach aktuellem Stand der Reader-Implementierungen Seiten-Marken aus den ehemaligen Print-Daten nur auf einem Umweg vorhalten: Adobe hat dazu mit den „Page-Maps“ eine proprietäre Erweiterung des EPUB-Standards geschaffen, die aber auch bis heute nur unzuverlässig funktioniert und lediglich in Readern auf Basis des Adobe Reader Mobile SDK unterstützt wird. Zudem muss ein EPUB-Reader immer auf die Nutzer-Einstellungen für Schriftart und Schriftgröße reagieren und seinen Display-Umbruch zur Laufzeit dynamisch neu rendern können – eine zentrale Eigenschaft der sogenannten „Reflow-Layouts“. Denn nur so kann sich ein EPUB-Layout den verschiedensten Lesegeräten und Displays anpassen. Eine „Seite“ in einem EPUB-Reader ist insofern nichts anderes als der gerade angezeigte Bereich in einem HTML-Fenster, das in manchen Apps mit seitenähnlichem Look & Feel dargestellt werden (z.B. iBooks unter iOS 6 mit seinem skeuomorphischen Design).

Content-Darstellung in iBooks: Zwei HTMLView-Bedienelemente, die „so tun, als wären sie eine Seite“.

Die zwei Möglichkeiten der Steuerung: Dateiaufteilung und CSS-Eigenschaften

Wenn man als eBook-Produktioner aber dennoch verlässlich steuern will, wo vom Reader die Umbrüche im Content gesetzt werden, gibt es dazu zwei Möglichkeiten, die in der Praxis in Kombination miteinander verwendet werden sollten:

• Beeinflussung der internen Dokumentstruktur der EPUB-Datei: Intern besteht EPUB ja aus mehreren HTML-Dokumenten, sinnvollerweise anhand der Kapitelstruktur des Content aufgeteilt. Bei jeder neuen Datei beginnt ein Reader die Anzeige grundsätzlich mit einer neuen Seite.
• Verwendung der CSS-Eigenschaften für die Umbruchsteuerung: CSS stellt in seinem Modul für Paged Media die Eigenschaften „page-break-before“, „page-break-after“ und „page-break-inside“ zur Verfügung, die für Umbrüche an Blockelementen verwendet werden können.

Sinnvolle Dateieinteilungen für den EPUB-Aufbau

Für den Umbruch spielt die Datei-Aufteilung der HTML-Dokumente innerhalb der EPUB-Datei bereits insofern eine zentrale Rolle, als alle mir bekannten Reader beim Beginn eines neuen HTML-Dokumentes auch mit einer neuen Display-Seite beginnen. Lediglich bei Readern, die einen Doppelseiten-Modus realisieren (wie etwa iBooks im Querformat) ist nicht immer klar bestimmbar, ob die neue Seite dann eine linke oder rechte Seite ist. Eine Logik wie „Neues Kapitel beginnt immer auf neuer rechter Seite“ wie im Print gewohnt, kann über die Grenzen der verschiedenen Lesesysteme hinweg nicht erzwungen werden.

Bei der Aufteilung der Texte auf HTML-Seiten sollte natürlich auf eine sinnvolle Abstimmung mit den Inhalten / der Kapitelstruktur und den Zusammenhang mit dem Inhaltsverzeichnis / der NCX-Datei im EPUB geachtet werden.

Datei-Splitting analog dem NCX-Aufbau in Adobe Digital Editions: In diesem Beispiel wurde für jedes Hauptkapitel eine HTML-Datei angelegt, jedes Kapitel beginnt damit auf einer neuen Display-Seite.

Ein längerer Text sollte aber auch schon aus Gründen der Übersichtlichkeit und Handhabbarkeit für den Leser in mehrere HTML-Seiten innerhalb der EPUB-Datei aufgeteilt werden, auch spielen dabei ganz handfeste Performance-Aspekte eine Rolle. Harte Limitierungen stellen hier nur die Lesesysteme auf Basis des Adobe Reader Mobile SDK: Hier darf eine einzelne HTML-Datei maximal 300kB groß sein (allerdings inklusive HTML-Markup!). Aus der Praxis des Tests auf den gängigen eInk-Geräten der aktuellen Generation heraus (Sony Reader, Tolino Shine, Kobo Reader etc.) würde ich jedoch empfehlen, HTML-Kapitel nicht länger als etwa 15-20 Display-Seiten zu halten, wenn dies inhaltlich sinnvoll möglich ist.

Denn gerade die eInk-Reader sind von Prozessor und Speicher her doch gerne etwas schwach auf der Brust, und alles was in einer HTML-Seite gespeichert wird, wird auch zusammen formatiert und im Speicher gehalten. Bei schwächeren Geräten wie etwas dem Kobo Reader ist deutlich zu beobachten, dass quasi alle Navigationswege (Blättern, Links verfolgen, Sprung vom Inhaltsverzeichnis in den Content) in ihrer Performance mehr oder weniger linear von der Größe der fraglichen HTML-Datei abhängen. Zu lange Texte machen dabei am Ende das Lesen für den Nutzer schlicht zur Qual.

Umbrüche per CSS steuern: die page-break-Properties

Für das Erzwingen oder Unterbinden von Seitenumbrüchen an Elementen stellt CSS zwei Eigenschaften zur Verfügung: „page-break-before“ und „page-break-after“. Die Syntax bzw. die möglichen Werte sind in beiden Fällen dieselben:

• always: Fügt immer einen Seitenumbruch vor/nach einen Element ein.
• avoid: Verhindert einen Seitenumbruch vor/nach einen Element.
• left/right: Fügt einen Seitenumbruch so ein, dass das Element bzw. das folgende Element auf der nächsten linken/rechten Seite steht. Diese Werte werden meines Wissens nach bisher von keinem Lesesystem unterstützt.
• auto: Verwendung des Default-Verhaltens für die Umbruchsteuerung. Dabei ist das Problem in der Praxis, dass das Default-Verhalten eines Readers in der Regel nicht dokumentiert ist.

Für die praktische Verwendung in einem EPUB-Layout ist es natürlich sinnvoll, sich gut zu überlegen, an welchen Stellen das Umbruchverhalten überhaupt beeinflusst werden soll. Nachdem das Ideal eines Reflow-Layout ja der frei fliessende Umbruch ist, kommen dafür eigentlich nur wenige Stellen in Frage. Für das Verhindern von Umbrüchen nach einem Element sind die klassischen Stellen sicher Kapitel- und Unterkapitel-Überschriften, für das Erzwingen von Umbrüchen davor ebenfalls – zumindest wenn sich vor dem Unterkapitel genug Text befindet, dass nicht eine Hauptüberschrift alleine auf einer Seite steht.

Beispiel – Eine typische Struktur am Anfang eines Text-Kapitels und ein dazu passender CSS-Aufbau:

HTML:
<html><body><div> 
 <h1 class="hauptkapitel">Kapitel-Überschrift</h1>
 <p class="einleitung">Lorem ipsum dolor sit amet, consetetur
 sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
 et dolore magna aliquyam erat, sed diam voluptua.</p>
 <h2 class="unterkapitel">Unterkapitel-Überschrift</h2>
 <p class="fliesstext">Lorem ipsum dolor sit amet, consetetur
 sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
 et dolore magna aliquyam erat, sed diam voluptua.</p>
</div></body></html> 
 
CSS:
h2.unterkapitel {
 page-break-before: always;
 page-break-after: avoid;
}
h1.hauptkapitel + h2.unterkapitel {
 page-break-before: avoid;
}

In der ersten CSS-Deklaration für die Unterkapitel-Überschrift wird zunächst das gewünschte Umbruchverhalten bestimmt. Die zweite Definition für h2.unterkapitel mittels des CSS-Selektors für „siblings“ sorgt dann dafür, dass ein erzwungener Umbruch nur dann stattfindet, wenn Hauptkapitel-Überschrift und Unterkapitel-Überschrift nicht direkt hintereinander stehen.

Elemente zusammenhalten – so geht’s in der Praxis:

Wenn man das Gegenteil eines Umbruchs erreichen und Elemente zusammen auf einer Seite halten will, wird die Umsetzung etwas anspruchsvoller. Typischerweise tritt diese Anforderung bei zusammengesetzten Elementen in einem eBook-Layout auf, z.B. bei Kasten-Elementen mit Überschrift und Text mit einem Rahmen darum, oder auch bei der Abfolge von Bildüberschrift, Bild und Bildlegende. Hier sieht es in der Regel unschön aus, wenn diese Abfolge durch einen Seitenumbruch getrennt wird.

Um dieses Verhalten zu steuern, stellt CSS die Eigenschaft „page-break-inside“ zur Verfügung. Als mögliche Werte sind hier erlaubt:

• avoid: Fügt nie einen Seitenumbruch innerhalb eines Elements ein. Das Element wird ggf. komplett auf die nächste Seite geschoben.
• auto: Der Reader wählt sein Default-Verhalten selbst (wie auch immer dieses aussieht).

Damit man bei der Anwendung ein Element zur Verfügung hat, auf das die Eigenschaft page-break-inside angewandt werden kann, müssen Inhalte, die zusammengehalten werden sollen, mit einem Container-Element geklammert sein. Optimalerweise verwendet man dazu ein <div>-Element mit einer sinnvoll benannten Formatklasse.

Beispiel – HTML-Struktur für die Abfolge von Bildüberschrift, Bild und Bildlegende:

<div class="bild-container"> 
 <h3 class="bild-ueberschrift">Meine Bildüberschrift</h3>
 <img class="bild" src="MeineBilddatei.jpg"/>
 <p class="bild-legende">Meine Bildlegende</p>
</div>

Auf das <div class=“bild-container“> kann dann die CSS-Definition erfolgen. Leider ist es jedoch so, dass page-break-inside wie so oft bei weitem nicht von allen EPUB-Readern auch unterstützt wird.

Um die Umbruchsteuerung zumindest auf einigen gängigen Systemen sicherzustellen, gibt es zusätzlich noch einen weiteren Trick: Die Verwendung der CSS-Eigenschaft „display“ mit dem Wert „inline-block“. „display“ wird normalerweise dazu verwendet, den Typ eines Elements (Block- oder Inline-Element etc.) zu beeinflussen. Setzt man hier den Wert „inline-block“, wird der Reader quasi gezwungen, das Element möglichst in einer Zeile darzustellen. Da dies bei mehrzeiligen Elementen nicht möglich ist, ist dabei ein Nebeneffekt, dass die Element-Abfolge in der Regel auf einer Display-Seite zusammengehalten wird, zumindest sofern dies vom verfügbaren Platz her realisierbar ist.

Eine komplette CSS-Definition für das o.g. Beispiel des Bildcontainers würde also etwa so aussehen:

div.bild-container { 
 margin: 1em;
 padding: 1em;
 page-break-inside: avoid;
 display: inline-block;
}

Das Zusammenhalten von Bild und Bildlegende unter iBooks: Eine klassische Layout-Anforderung wird durch Kombination von „page-break-inside: avoid;“ und „display: inline-block;“ realisiert.

Dazu sollte man bei der Verwendung der Eigenschaften zum Zusammenhalten immer beachten, dass das Verhalten generell und ohne spezifische Beachtung eines Einzelfalls in der Text-Darstellung bestimmt wird. Wenn beispielsweise in einem Layout zu viele Elemente zusammengehalten werden, ist die Folge oft, dass im Textfluss oft „Löcher“ entstehen, die ebenfalls wieder unschön wirken. Eine ausbalancierte CSS-Logik zusammen mit einem lockeren Fluss von Textabsätzen und Kastenelementen, die jeweils nicht zu lang sein sollten, ist hier das Ideal der Strukturierung für ein harmonisch wirkendes Reflow-Layout.

Schusterjungen und Hurenkinder

In der klassischen Typographie gibt es zwei absolute Todsünden: Schusterjungen und Hurenkinder. In der Theorie stellt auch CSS dafür zwei Eigenschaften zur Verfügung, mit denen verhindert werden kann, dass einzelne Zeilen alleine oben oder unten auf einer Seite stehen bleiben: „widows“ und „orphans“. Die Syntax ist dabei denkbar simpel: mit einem nummerischen Wert werden die Zeilen angegeben, die mindestens oben oder unten auf einer Seite stellen sollen.

Beispiel:

p { 
 widows: 3;
 orphans: 3;
}

Soweit die Theorie. In der traurigen Praxis sieht es jedoch leider so aus, dass kein einziger mir Browser oder EPUB-Reader diese Eigenschaften auch unterstützt. Insofern sind widows/orphans Eigenschaften, die man einmal vorsichthalber ins CSS schreiben kann – und darauf hoffen muss, dass die Entwickler der Rendering-Engines irgendwann ein Einsehen haben…

Update 15.02.2015: Lucas Lüdemann und Tobias Fischer haben mich freundlicherweise darauf hingewiesen, dass iBooks in den jüngeren Versionen mittlerweile widows/orphans unterstützt. Allerdings hat diese Unterstützung an manchen Stellen etwas erratische Effekte für den Textumbruch bzw. führt dazu, dass durch den Versuch des Zusammenhaltens von Absätzen größere „Löcher“ im Textfluss entstehen, als nötig. Immerhin ist es erfreulich, dass sich in dieser Richtung etwas tut, allerdings sind die Mechanismen für das Zusammenhalten von Text in EPUB wohl nach wie vor mit Vorsicht zu genießen.

Sie wollen noch mehr wissen?

Wer neben diesem Überblick noch mehr über das Ausnutzen der EPUB-Features für die Gestaltung spruchsvoller, hochwertiger EPUB-eBooks wissen will, sei an dieser Stelle auch auf das Seminar „eBook-Produktion für Fortgeschrittene“ hingewiesen, das ich im April 2014 dazu im Rahmen der XML-Schule halte.