Digitale Bücher im Format EPUB selbst erstellen: CSS

Ein Anonymus aus Tibris
Sendet Palman ein Exlibris.
Auf demselben sieht man nichts
Als den weißen Schein des Lichts.
Nicht ein Strichlein ist vorhanden.
Palman fühlt sich warm verstanden.
Und klebt die Blättlein rein
Allenthalben dankbar ein.

Christian Morgenstern (Exlibris)

Kurzanleitung

Inhalt

Für Stilvorlagen erfordert EPUB 2 von Darstellungsprogrammen die Interpretation von CSS 2.0 [CSS]. Dabei werden lediglich einige Eigenschaften ausgenommen und nur wenige ergänzt.

Abweichungen von CSS in EPUB gegenüber CSS 2.0

Von den Medienregeln sind 'all' und 'aural' verwendbar.

Bei display entfallen die Werte 'list-item', 'compact' und 'marker'. Dafür gibt es zwei neue Werte 'oeb-page-head' und 'oeb-page-foot'.
Die Werte wirken ähnlich wie Positionierung. Der erste Wert verschiebt das selektierte Element an den Kopfbereich des Anzeigebereiches, der zweite an den Fußbereich.

Es gibt die neue Eigenschaft oeb-column-number mit entweder einer ganzen Zahl als Wert oder dem Schlüsselwort 'auto'. Damit ist es möglich, eine mehrspaltige Präsentation zu erreichen, wobei die Zahl für die Anzahl der Spalten steht. Bei 'auto' wird die Anzahl automatisch bestimmt. Ein Initialwert ist nicht angegeben, auch nicht, ob die Eigenschaft vererbt wird oder was passiert, wenn keine positive Zahl angegeben wird.

Positionierung ist ansonsten ausgeschlossen, also entfallen die Eigenschaften position, top, bottom, left, right, z-index.

Ebenfalls ausgeschlossen sind overflow, clip und visibility.

Für content ist die Wertemenge auf eine Zeichenkette und das übliche 'inherit' reduziert. Entsprechend fallen auch die Eigenschaften quotes, counter-reset, counter-increment und marker-offset komplett weg. Ebenfalls fällt list-style-image komplett weg.
Weil damit auch der Initialwert 'normal' ausgeschlossen ist und auch das sehr ähnliche 'none', sieht es so aus, als sei die Einschränkung in EPUB 2 fehlerhaft, weil so das Verhalten der Eigenschaft undefiniert ist. In diesem Falle ist die Einschränkung dann offenbar als unwirksam anzusehen.

Von den Hintergrundeigenschaften überlebt nur background-color.

Bei den Werten von font-family fallen die generischen Schriftfamilien 'cursive' und 'fantasy' raus.
Bei font-weight fallen 'bolder' und 'lighter' weg.
font-stretch und font-size-adjust fallen komplett weg.
Bei der Regel @font-face werden nur die Bezeichner 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size', 'src' interpretiert.

Bei text-decoration fallen 'overline' und 'blink' raus.
text-shadow, letter-spacing, word-spacing und text-transform entfallen auch komplett.

Bei den Tabelleneigenschaften fallen border-collapse, border-spacing, empty-cells weg.

Alle Eigenschaften zu outline und cursor entfallen.

Bei den auralen Stilvorlagen fallen play-during, azimuth, elevation, pitch-range weg.
Bei voice-family gibt es nur die generischen Stimmen.

Kurzer Überblick

Im Prototyp gibt es mehrere Stilvorlagen, die sich als Beispiel und als Anschauung eignen, denn zumeist wird es für die XHTML-Dokumente in EPUB-Büchern ausreichen, recht einfache Stilvorlagen anzubieten.
'stil.css' ist beim Prototyp die Basisvorlage.
'altstil.css' ist im Wesentlichen eine farbliche Alternative. Diese Vorlagen zeigen auch die für CSS typische Syntax. In der Stilvorlage werden Anweisungen notiert.

Diese beginnen mit einem Selektor - ein typischer Selektor ist etwa der Elementselektor, welcher mit dem Elementnamen eines Elementes übereinstimmt. Damit werden also alle Elemente selektiert, die diesen Namen haben. Auf den Selektor folgt ein Block in geschweiften Klammern. In dem werden mit einem Semikolon als Separatorzeichen die Eigenschaften notiert, die zur Anwendung kommen. Auf den Namen der Eigenschaft folgt ein Doppelpunkt und dann der Wert der Eigenschaft.
Soll ein Block für mehrere Selektoren gelten, muß der nicht wiederholt werden, vielmehr notiert man statt einem Selektor eine Liste, mit einem Komma als Separatorzeichen.
Als Beispiel:

html {
  color:#026;
  background-color:#feb
}

Für das Wurzelement werden damit die Hintergrundfarbe background-color und die Farbe color von Strukturen wie dem Text festgelegt. Hier ist der Hintergrund ein heller, leicht gelblicher Ton, der Text ist dunkelblau mit etwas grün.

Selektoren von der Art abbr[title] selektieren alle Elemente abbr, für welche das Attribut title gesetzt ist.
abbr[title="Hilfe"] selektiert unter diesen Elementen nur jene, bei denen der Wert von title 'Hilfe' ist.

Mittels p abbr werden alle abbr selektiert, die Nachfahren von p sind, mittels p > abbr darunter nur die Kindelemente.

Um Farben zu notieren, gibt es verschiedene Möglichkeiten. Jedenfalls wird - sofern kein bestimmtes Schlüsselwort für eine Farbe notiert wird - immer ein Zahlenwert für jeden der drei Farbkanäle rot, grün, blau in der Reihenfolge angegeben. Die Beispiele verwenden eine hexadezimale Notation, beginnend mit '#'. Für jeden Kanal wird in der verwendeten Kurzschreibweise eine Ziffer [0-f] notiert, 0 für wenig Farbe, f für viel Farbe, #000 steht für schwarz, #fff für weiß, #f00 für rot, #0f0 für hellgrün, #00f für blau, #ff0 für gelb, #f0f für violett, #0ff für cyan etc.

Für Längen eignen sich die Einheiten em und ex sehr gut. em ist die Geviertgröße, ungefähr die Breite eines 'M', ex ungefähr die Höhe von 'a' oder 'x'. Bei Prozentangaben beziehen die sich meist auf die Ausgangsgröße oder bei der Breite und Höhe von Elementen auf die verfügbare Breite oder Höhe des Elternelementes, sofern die festliegt.

Die Bedeutung der Eigenschaften ergibt sich meist schon ungefähr aus dem Namen. Mit Kommentaren ist in den Beispielen aber auch angegeben, was wofür steht.

Tips und Praxis

Der kurze Abschnitt mit dem Überblick wird natürlich nicht reichen, um wirklich souverän Stilvorlagen zu erstellen.
Wer sich nicht mit CSS auskennt, aber ebenfalls damit und mit einem Texteditor Stilvorlagen realisieren will, mag mit Gewinn das deutschsprachige wikibook über CSS lesen, zu dem der Autor dieses Artikels ebenfalls wesentlich beigetragen hat: [WCSS].

Um eine korrekte Anzeige von CSS zum Lernen zu bekommen, wird es sinnvoll sein, Beispiele mit einem etablierten Darstellungsprogramm für XHTML und CSS zu testen, wie etwa Opera, einem Gecko (Firefox, SeaMonkey, Iceweasel, Iceape etc) oder WebKit (Chromium, Arora, Safari, Google Chrome etc), nicht mit einem speziellen Programm für EPUB - bei denen die Interpretation eher mangelhaft ist, anders als bei den genannten Darstellungsprogrammen.

Die Mängel der EPUB-Programme erlauben wiederum auch die Schlußfolgerung, das es sich kaum lohnt, für Bücher in diesem Format komplizierte und ausgefeilte Stilvorlagen auszuarbeiten, man darf oft schon froh sein, wenn man Hintergrund- und Textfarbe festlegen kann.

Literaturangaben