CSS

(Auszug aus "ePub für (In)Designer — Mit InDesign Schritt für Schritt zum E-Book" von Sascha Heck & Yves Apel)

In HTML geht es nur um beschreibende Textauszeichnung. Das heißt, wir strukturieren das Dokument damit. Wie die Tags vom Browser oder E-Reader dargestellt werden, ist bisher nicht festgelegt worden. Wird ein Tag nicht näher definiert, greifen die Reader auf die Standarddarstellung für das Tag zurück. Die Information, wie meine Hauptüberschrift und mein Text aussehen soll, wird in CSS (Cascading Stylesheets) definiert. Dabei ist das HTML-Dokument eine Datei für sich (im ePub im Ordner OEBPS, bei Sigil im Unterordner »Text« zu finden) und die CSS-Datei ist auch eine eigene Textdatei (im ePub »template.css« im Ordner OEBPS, bei Sigil im Unterordner »Styles«). In der HTML-Datei wird im Header auf die CSS-Datei verwiesen, sodass der Reader weiß, dass er die dort definierten Eigenschaften umsetzen soll. Aber das erledigt InDesign automatisch, darum müssen Sie sich nicht kümmern.

In der CSS-Datei finden Sie eine Auflistung der im HTML-Dokument verwendeten Tags mit den jeweils zugewiesenen Eigenschaften. Sie möchten z.B. Ihre Überschrift rot setzen, in der Schriftart Minion Pro, 24 Punkt und fett mit einem »Abstand nach« von 10 Millimeter. In InDesign wird das in einem Absatzformat definiert. In der nachher exportierten CSS-Datei steht Folgendes:

Sie werden die Eigenschaften wiedererkennen, wenn Sie etwas Englisch verstehen. Die Einheiten wie Punkt oder Millimeter, die Ihnen aus dem Print vertraut sind, werden hier zu Screen-Einheiten umkonvertiert: Aus 24 Punkt werden 2 em (2 Geviert), aus 10 Millimeter werden 28 Pixel.

Klassen

Ein wichtiges Element in CSS sind die Klassen. Stellen Sie sich eine Bildunterschrift vor. Es gibt kein Tag für »Bildunterschrift« in HTML, also muss diese Information auf eine andere Art und Weise mitgeteilt werden. Wir können sie mit dem <p>-Tag für Absatz auszeichnen und zusätzlich eine Klasse definieren. Der Name kann frei gewählt werden. Diese Klasse finden Sie dann in der CSS-Datei wieder und können hier die Bildunterschrift mit Hilfe von Attributen gestalten. Im HTML verweisen Sie auf eine Klasse:

In der CSS-Datei finden Sie die Klasse dann wieder in dieser Form:

font-family, font-size etc. bezeichnen mögliche Attribute, die der Klasse zugewiesen werden können.

Zeichenformate werden in HTML mit dem Tag span deklariert. Wollen Sie z.B. ein Wort innerhalb des Absatzes rot einfärben, so sieht das HTML folgendermaßen aus:

Die Klasse »rot« wird jetzt wieder im CSS auftauchen, sie enthält nur die Definition der Farbe Rot.

Die Klassen werden von InDesign automatisch entsprechend den Absatz- und Zeichenformaten generiert, die Sie festlegen. Aber wir werden in späteren Kapiteln manchmal in die HTML- oder CSS-Datei eingreifen, um eine Zeile dazuzuschreiben oder um etwas abzuändern und dadurch einen bestimmten Effekt bei der Darstellung im E-Reader zu erreichen.

Bei der ePub-Produktion werden Sie feststellen, dass es am besten ist, die Tags und Klassen so einfach und logisch wie möglich zu wählen. Das verspricht die besten Ergebnisse auf den verschiedenen Readern. Alles, was irgendwie zum Grundtext gehört, sollte z.B. das Tag <p> mit auf den Weg bekommen. Die Änderungen werden dann in der jeweiligen Klasse zugewiesen.

Es gibt Reader, die CSS-Informationen nur teilweise auslesen. Aber eigentlich alle E-Book-Reader kennen die Standard-Tags und stellen diese entsprechend dar. So stellen Sie sicher, dass im schlimmsten Fall die Inhalte vom E-Reader wenigstens von der Struktur her richtig interpretiert und dargestellt werden, auch wenn nicht alles so schön durchgestaltet aussehen sollte.

Diese Einführung ist bewusst kurz gehalten und soll vor allem dazu dienen, Zusamenhänge, die im Laufe des Buches erklärt werden, besser zu verstehen. Wir können Sie nur dazu ermutigen, sich intensiver mit diesem Thema zu beschäftigen. Es gibt mittlerweile eine Vielzahl an Lehrbüchern und -videos dazu (siehe z.B. »Einführung in XHTML, CSS und Webdesign« von Michael Jendrischik).