CSS für E-Book-Autoren

Was zur Hölle ist CSS, und warum soll ich mich als E-Book-Autor damit beschäftigen? Langt nicht der ganze Kram mit ISBN, Buchpreisbindung, Cover und Metadaten? Die wenigsten eBook-Autoren möchten CSS-Experten sei. Müssen sie aber auch nicht sein, denn Grundkenntnisse genügen. Ein ausgefeiltes CSS-Sheet wird von den meistern Readern sowieso nicht gewürdigt. Spätestens der Kindle macht kurzen Prozess mit langen Formatierungen. Eine Einführung in Minimal-CSS:

HTML und CSS

Ein eBook ist nicht anders aufgebaut als eine Website. Der einzige Unterschied: Die Seiten heißen Kapitel und enden auf .xhtml. Ansonsten ist der Aufbau gleich, und das gilt für ePub-Bücher, aber auch für die Amazonformate Mobi und AZW, die ja auf ePub basieren! Wo sich eine Überschrift oder ein Absatz befindet, steht in den HTML-Befehlen. Wie die Überschrift oder der Absatz genau aussieht, steht im Stylesheet, einer CSS-Datei.

CSS zuweisen

Damit das Ganze funktioniert, muss im Header der XHTML-Datei auf das Stylesheet verwiesen werden. In einem ePub (in Sigil kann man die Verzeichnisstruktur öffnen) sieht die Verlinkung auf CSS in der Regel so aus:
<link rel="stylesheet" type="text/css" href="../Styles/Style0001.css" />

In Sigil kann das Stylesheet per Rechtsklick zugewiesen werden. Eine kleine Anleitung:

  • Im Buchbrowser von Sigil links eine oder mehrere .xhtml-Dateien anklicken, also alle Kapitel des eBooks!
  • Mit der rechten Maustaste das Kontextmenü öffnen und „Verknüpfe Stylesheets“ auswählen.
  • Nicht vergessen, das Häkchen unter „Einbeziehen“ zu setzen, sonst tut sich gar nichts.
  • Danach validieren und checken, ob es geklappt hat, das geht in Sigil mit dem grünen Haken!
CSS in Sigil
CSS in Sigil

Text einrücken

Was kann man nun mit CSS alles definieren? Zum Beispiel das Einrücken eines Textes zu Absatzbeginn. Das funktioniert mit indent. Wenn das Folgende in der CSS-Datei steht, wird jeder Absatz, das Zeugs mit dem p wie „paragraph“, eingerückt:
p {text-indent: .3em;
text-align: justify}

Außerdem wird der Text im Blocksatz dargestellt. Dafür sorgt der Wert „justify“. Hä, Wert? Das ist halt ein CSS-Grundbegriff, keine Panik!

CSS-Grundbegriffe

So sieht eine CSS-Regel im Stylesheet aus, mit Selector, Eigenschaft und Wert:

Selector { Eigenschaft: Wert;
Eigenschaft: Wert }

  • Selector: gibt an, auf welches Element die Regel überhaupt angewendet werden soll. Im Beispiel oben auf den Absatz.
  • Eigenschaft: Sowas wie Einzug oder Ausrichtung. Innerhalb von CSS sind die möglichen Eigenschaften vordefiniert
  • Wert: Jeder Eigenschaft wird ein Wert zugeordnet. Hinweis: Innerhalb des Werts keine Lücken lassen, es heißt z.B. 3em, nicht 3 em.

Das Semikolon, im Volksmund Strichpunkt genannt, muss zwingend nur zwischen dem ersten Eigenschaft/Wert-Paar stehen! Nicht vor der schließenden geschweiften Klammer.
Ach ja, die Kombination aus einer (!) Eigenschaft und einem oder mehreren Werten nennt man auch Deklaration. Alles, was sich innerhalb der geschweiften Klammer befindet, nennt sich Deklarationsblock. Jetzt ists aber genug mit den Begriffen!
Nochmal die Aufgabe einer CSS-Regel: Dem Browser bzw. dem eReader sagen, wie er das Selektierte darstellen soll.

Absolute und relative Werte

Für die Größenangaben können in CSS ganz prinzipiell absolute oder relative Werte verwendet werden. Absolute Werte wie px (Pixel) pt (Punkt) oder cm (Zentimeter) sind für eBooks allerdings ungeeignet, denn die fixe Darstellung benachteiligt entweder große oder kleine Bildschirme. Es bleiben die relativen Werte em und %. Damit orientiert sich die Schriftgröße am Eltern-Element. Der eBook-Editor Jutoh verwendet em als Maßeinheit.

CSS-Klassen

Im obigen Beispiel entspricht der Name des HTML-Tags, also <p>, auch dem Selector. Dies ist also wirklich ganz simples CSS. Hat aber einen Nachteil! Der Style wird dann auf alle Elemente desselben Typs angewendet, also gnadenlos auf alle Absätze. Ohne Extrawürste. Es soll nicht jeder Absatz eingerückt werden, sondern nur bestimmte, zum Beispiel am Kapitelanfang oder alle außer am Kapitelanfang? Dann arbeitet man mit Klassen (in CSS gibt es IDs und Klassen, Klassen genügen!) Mit einem Punkt definiere ich eine Klasse in der CSS-Datei. Beispiel:
.einruecken {text-indent: 3em;}

Und so werden dann in HTML alle diejenigen Absätze gekennzeichnet, die eingerückt werden sollen:
<p class="einruecken">Hier ist der Text für den Absatz mit Einzug</p>

Der Name der Klasse ist frei wählbar, man könnte also statt .einruecken auch .wurstbrot verwenden. Das HTML-Attribut class darf dagegen nicht ersetzt werden. HTML-Attribute sind genau so fest definiert wie CSS- Eigenschaften. Da darf man nichts hinzu erfinden.

Text zentrieren

Vielleicht ist im eBook ein edles Gedicht, das zentriert werden soll? Da braucht es wieder eine neue Klasse. Natürlich ohne Einzug, das wäre ja Quatsch. Das steht in der CSS:
.zentrierenklasse {text-align:center}

Und weiter geht es mit dem HTML-Befehl in der .xhtml-Datei. Da steht dann:
<p class="zentrierenklasse">Und hier steht das edle Gedicht</p>

Statt „zentrierenklasse“ kann man auch ein kürzeres Wort wählen, das spart Tipparbeit 😉 .
Der Punkt vor dem CSS-Klassennamen wird in HTML übrigens nicht geschreiben, er fällt einfach weg!

Der Span – Befehl

Wenn man nicht einen ganzen Absatz formatieren will, nimmt man den Span-Befehl. Beispiel: Fettschrift. Dafür wird wieder eine Klasse in CSS angelegt:
.fettesbrot {
font-weight: bold;
}
Und so wird die Klasse in HTML aufgerufen:
Das hier steht <span class="fettesbrot">fett</span>, das nicht mehr
Ergebnis: Das hier steht fett, das nicht mehr.

Großer Initialbuchstabe

Gut einsetzen lässt sich der Span-Befehl für die Darstellung von großen Initialbuchstaben. Erst wieder eine neue Klasse! Dann die Buchstabengröße auf 3em erhöhen! Mit der Deklaration float:left bleibt der Buchstabe links und wird vom übrigen Text umflossen.
.rieseninitiale {
font-size: 3em;
float:left;
}
Und so wird die Klasse in HTML aufgerufen:
span class="rieseninitiale">E</span>s war einmal vor langer Zeit...

Leerzeile einfügen

Um in einem eBook irgendwo einen Abstand zwischen zwei Absätzen einzufügen, gibt es einen ganz simplen Trick. Man konstruiert einen neuen Absatz, und platziert darin das HTML-Code für einen Nonbreaking Space, auch „geschütztes Leerzeichen“ genannt:
<p>&nbsp;</p>

PS: Das ist jetzt nicht CSS, sondern HTML! Also an passender Stelle direkt in die .xhtml-Seite eingeben! Wird auch verwendet, um Bilder abzugrenzen. Dann vor und nach dem Bild platzieren!

Seitenumbruch erzwingen

In der Regel beginnt ein Seitenumbruch im eBook zum Kapitelanfang und vor einer Überschrift erster und zweiter Ordnung, sprich h1 oder h2. Es kann aber auch Gründe geben, innerhalb eines Kapitels etwas ganz besonders herauszuheben – mit einem Seitenumbruch. In diesem Fall wird die CSS-Anweisung nicht über das Stylesheet abgerufen sondern direkt in die .xhtml-Datei geschrieben. Mit diesem Code:
<div style="page-break-before: always;"></div>

Alles was danach steht, beginnt auf einer neuen Seite, egal wieviel Platz noch auf der vorhergehenden Seite war. Allzu oft sollte man diese Möglichkeit deshalb nicht einsetzen. Hinweis: Page Break Before und das Pendent Page Break After werden auch im KDP-Styleguide empfohlen.

Kommentar verfassen