10 Schritte zu deiner EPUB

10 Schritte zu deiner EPUB #4 CSS für EPUB

15. März 2017

Heute geht es um CSS für EPUB. Ich werde versuchen, das Thema so einfach wie nur irgendmöglich zu erläutern. Es geht hier nicht darum, CSS in all seinen fantastischen Anwendungsmöglichkeiten zu verstehen, sondern nur das allernotwendigste, um einem E-Book das gewünschte Aussehen zu geben und dabei auch als Rookie den Überblick zu behalten.

Was ist CSS für EPUB?

Im letzten Beitrag habe ich die xhtml-Datei eines E-Books vorgestellt.

Die xhtml-Datei enthält alles, was im E-Book erscheinen soll. Die CSS Regeln geben an, wie der Text aussehen soll.

Dabei können die CSS-Regeln …

  1. in den Zeilen einer html-Datei eingefügt werden,
  2. im head Bereich der html-Datei eingefügt werden,
  3. oder in einer separaten CSS Datei, die dann mit den html Seiten, auf die sie angewendet werden soll, verlinkt wird.

Im ersten Fall gilt die Regel nur für die eine Stelle im Buch, in der sie eingefügt wird. Im zweiten Fall gilt die Regel für die gesamte html-Seite und im dritten Fall kann sie auf alle html-Dateien des E-Books angewendet werden. Das hat den großen Vorteil, dass man nur einmal einen Wert ändern muss, um alle entsprechenden Abschnitte im Buch zu modifizieren.

In diesem Beitrag zeige ich zunächst diese dritte Möglichkeit einer separaten CSS-Datei.

Sie liegt im OEBPS-Ordner im Unterordner styles und ich habe sie redbug-styling.css genannt.

CSS-Regeln

So sehen die ersten Zeilen dieser CSS-Datei aus. Wie schon erwähnt, halte ich es am Anfang für sinnvoll, mit einzelnen Klassen für alle unterschiedlichen Formatierungen im E-Book zu arbeiten. Gerade für den Anfänger ist das eine der besten Methoden.

Jedes Element einer CSS-Regel besteht aus zwei Teilen. Dem Teil vor der geschwungenen Klammer, den sogenannten Selektoren, und dem Teil in den geschwungenen Klammern, den sogenannten Attributen. Nach dem Doppelpunkt hinter den Attributen folgt der zugehörige gewünschte Wert, den man dem Attribut geben will. Die einzelnen Attribute werden durch Semikolon voneinander getrennt. Geschwungenen Klammern, Doppelpunkt und Semikolon sind zwingend. Die Zeilenumbrüche dienen nur der Übersicht.

Beispiel 1: Die Titelseite

In diesem Fall sind die Selektoren die Klassen .autor, .titel, .untertitel. Der Punkt vor dem jeweiligen (frei wählbaren Namen) zeigt an, dass es sich um eine Klasse handelt. Sie können jedem html Element zugeordnet werden. Hier sind sie den jeweiligen <p> (paragraph) Elementen unserer html-Titelseite (rot markiert) zugeordnet.

     <p class=“autor“>Name des Autor</p>

     <p class=“titel“>Titel des Buchs</p>

     <p class=“untertitel“>Untertitel</p>

Die verwendeten Attribute der Klasse .autor sind hier:

  • font-size (Schriftgröße)
  • letter-spacing (Buchstabenabstand)
  • text-align (Ausrichtung auf der Seite)
  • margin (Außenabstände zum nächsten Element, in der Reihenfolge oben, rechts, links, unten)

Die Werte für Schriftgrößen und Abstände können in den Einheiten Pixel px, Prozent % oder in em angeben werden. Für E-Books bieten sich % oder em an, da diese Einheiten keine festgelegten Wert besitzen. Sie beziehen sich auf die von dem Leser auf dem Lesegerät eingestellte Schriftgröße. Der Titel erscheint hier also 2,2 mal so groß wie der normale Fließtext. Die Buchstaben sind um das 0,1-fache gesperrt.

Anmerkung: Da der Leser die für ihn angenehme Schriftgröße auf seinem Lesegerät einstellen wird, ist es nicht zweckmäßig dem normalen Fließtext eine feste Größe zuzuweisen.

Der Wert des Attributs text-align ist hier immer center; gibt also an, dass der Text zentriert erscheinen soll.

Die Zeile margin zeigt die Abstände zum nächsten Element an. Wenn man alle vier Angaben macht, stehen die Werte immer in der Reihenfolge: nach oben, nach rechts, nach unten, nach links. Hier soll der Autorenname 3em vom oberen Seitenrand und 2em oberhalb des Titels erscheinen.

Beispiel 2: Ein Kapitel

Hier noch einmal zur Verdeutlichung die Beispielseite des 2.Kapitels (hier mit Platzhaltertext). So sieht die Seite in der xhtml-Version aus.

Die Verlinkung im head

In Zeile 6, also im head des Dokuments findet sich die Verlinkung mit der CSS-Datei.

<link rel=“stylesheet“ type=“text/css“ href=“../styles/redbug-styling.css“ />

Diese Zeile zeigt an, dass die Beziehung zwischen den Dateien (link rel=“stylesheet“) ein stylesheet ist, und zwar vom Typ einer CSS-Datei (type=“text/css“). Und sie zeigt dem E-Reader an, wo er die CSS Datei finden kann. Nämlich unter dem Namen redbug-styling.css eine Ebene höher (angezeigt durch ../) in der Ordnerhierarchie und zwar im Ordner styles.

Die Anwendung im body

Im body Bereich der Datei (hier blau markiert) befindet sich der Text des Kapitels in verschiedenen Abschnitten <p></p>. Alle Textabschnitte haben ein Klassenattribut zugewiesen bekommen. Hier sind es

  • class=“kapitel“
  • class=“absatz“
  • class=“umbruch“

Hinweis: mit der Erweiterung id=“toc-anchor“ in Zeile 11 beschäftige ich mich in einem der nächsten Beiträge.

In der altbekannten redbug-styling.css sehen die dazugehörigen CSS-Elemente so aus:

Es gibt z.B. eine Überschrift über jedem Kapitel. Sie erhält die Klasse .kapitel.

Die Kapitelüberschrift ist fett und mit 1.2 em größer Schrift als der übrige Text. Sie soll zentriert sein, mit einer etwas größeren Buchstabenlaufweite als der Fließtext. Zum oberen Seitenrand hat sie einen Abstand von 3 em und erscheint 4 em über dem ersten Abschnitt des Kapitels. Falls  mir das nicht gefällt, muss ich jetzt lediglich den entsprechenden Wert in der CSS ändern und alle Kapitelüberschriften im Buch werden automatisch geändert. Das sieht dann in der Lesevariante des E-Books so aus:

Dasselbe gilt natürlich auch für die anderen Klassen. Die Klasse .absatz unterscheidet sich durch die Klasse .umbruch lediglich dadurch, dass sie keinen Erstzeileneinzug hat: text-indent: Oem; und einen Abstand nach oben von 0.5em. Auch hier kann ich ganz einfach Änderungen vornehmen, indem ich die Werte in der CSS ändere.

In der nächsten Woche werde ich erläutern, wie man Text innerhalb eines Abschnitts hervorheben kann und einige dieser Inline Styles besprechen.

Bis dahin eine gute Woche!

Uwe

#rbpub #redbugwriting

You Might Also Like

No Comments

Leave a Reply