10 Beispiele, wie E-Books professionelle Typografie ermöglichen.

1

Oftmals wird betont, bei E-Books wäre es nicht möglich, zweckmäßige Typografie anzuwenden. Hier paaren sich vermutlich einige Vorurteile und Unwissenheit mit der Sorge vor dem Neuen.

Dabei gibt es inzwischen einige Möglichkeiten, um mit Cascading Style Sheets (CSS) Schrift zu formatieren, die man bei herkömmlichen DTP-Programmen leider vermisst. Die Stärke von CSS ist dabei das, was der fortgeschrittene Anwender bereits von GREP kennt: die Möglichkeit, durch Variablen beliebige Fälle zu behandeln. Im Unterschied zu GREP oder Absatz- und Zeichenformaten der Desktop-Publishing-Programme lassen sich CSS-Styles aber beliebig oft ändern und anwenden, ohne dass dadurch der Inhalt dauerhaft verändert würde.

Daher nun ein paar

2

Nützliche Hinweise zur Typografie in E-Books mit CSS.

Diese lassen sich auch auf Websites und überall dort, wo CSS angewendet wird, übertragen.

Mit Anwendung des Pluszeichens kann in CSS ein Nachbarselektor (also element + element) erzeugt werden. Damit wird das erste nachfolgende Element angesprochen. Hier ergeben sich einige wertvolle Möglichkeiten, in einem ganzen Dokument entsprechende Situationen zu behandeln. Aber auch andere Selektoren können sehr nützlich sein:

1. Einzüge nach Überschriften verhindern

   p {
       text-indent: 2em;
   }
   
   h1 + p {
       text-indent: 0;
   }
   

   In einem Dokument mit Einzügen kann sehr einfach eingestellt werden, dass nach Überschriften der erste Absatz ohne Einzug beginnt.

2. Initiale nach Überschriften setzen

   h1 + p:first-letter {
       float: left; 
       font-size: 300%;
       margin-top: 0.1em; 
       margin-right: 0.1em;
   }
   

   Ebenso lässt sich sehr einfach einstellen, dass beispielsweise nach Überschriften der erste Absatz mit einem Initial beginnt.

3. Nach Elementen wie Tabellen oder Bilder automatisch Raum einfügen

   table + p, 
   img + p {
       margin-top: 2em;
   }
   

   Vor oder nach bestimmten Elementen wie Tabellen oder Bildern wird zusätzlicher Raum benötigt, was mit CSS ebenfalls sehr einfach bewerkstelligt werden kann.

4. Schusterjungen und Hurenkinder verhindern

   p {
       orphans: 2;
       widows: 2;
   }
   

   Schusterjungen und Hurenkinder können verhindert werden, indem man Zeilen eines Absatzes zusammenhält. Mit dem Wert 2 wird besagt, dass die ersten und letzten beiden Zeilen eines Absatzes nicht voneinander getrennt werden dürfen.

5. Silbentrennung in Überschriften deaktivieren

   h1 {
       hyphens: none;
   }
   

   Überschriften sollten keine Trennungen enthalten.

6. Negative Einzüge bei Gedichten

   p {
       margin-left: 2em;
       text-indent: -2em;
   }
   

   In CSS lassen sich auch negative Einzüge realisieren, die beispielsweise bei Gedichtsatz nützlich sein können. Wenn dann eine Zeile mehr Platz benötigt als ihr zur Verfügung steht, wird sie umbrochen und automatisch eingerückt.

7. Kursive anpassen

   i {
       font-size: 103%;
   }
   

   Kursive Schrift wirkt optisch oft etwas kleiner. Dem kann entgegengesteuert werden.

8. Tabellenzeilen abwechselnd formatieren

   table tr:nth-child(2n+1) {
       background-color: #bada55;
   }
   
   table tr:nth-child(2n+2) {
       background-color: #ffffff;
   }
   

   Für den Fall, dass sich in einer Tabelle die Zeilen voneinander unterscheiden sollen, kann mit :nth-child() sehr einfach bestimmt werden, wie die n-te Zeile aussehen soll.

9. Optische Kanten von Flatter- und Blocksatz angleichen

   .flattersatz {
       text-align: left; 
       margin-right: 0;
   }
   
   .blocksatz {
       text-align: text-justify; 
       margin-right: 1.5em;
   }
   

   Ein sehr häufig vorkommender Fehler in der Gestaltung ist, dass Blocksatz und Flattersatz mit der gleichen Satzbreite berechnet werden, wodurch sich dann die optische Satzkante in beiden Satzarten unterscheidet. Dies kommt daher, dass sich im Flattersatz längere und kürzere Zeilen abwechseln. Wird der Blocksatz etwas schmäler angelegt, gleicht sich die Verschiebung der Satzkanten aus.

10. Letztes Element formatieren

    p:last-child {
        font-size: 75%;
    }
    

    Mit der Pseudoklasse :last-child wird das letzte vorkommende Element selektiert. Damit ist es beispielsweise möglich, am Ende eines Textes Autoren- oder Quellenangaben speziell auszuzeichnen.

Von Verschachtelungen der Selektoren ist bei großen Dokumenten eher abzuraten (siehe https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS), was darin begründet ist, dass die Selektoren von rechts nach links gelesen werden. Bei div p img wird also zuerst nach allen Bildelementen (img) gesucht, dann gefiltert, welche sich in einem p-Element befinden und anschließend gefiltert, welche sich wiederum in einem div-Element befinden. Dies geht zulasten der Performance. Bei kleinen Dokumenten – und eben auch bei E-Books – macht sich dies im Normalfall aber nicht bemerkbar.

Einige der Beispiele sind auf ähnliche Weise auch in herkömmlichen DTP-Programmen zu realisieren. Der Nachbarselektor hingegen ermöglicht ein einfaches Auszeichnen des Textes, was in Adobe InDesign oder QuarkXPress so noch nicht möglich ist. Hier ist zu hoffen, dass die Hersteller in Zukunft ihr Augenmerk wieder verstärkt auf klassische typografische Funktionen legen werden, anstatt sich überwiegend mit Export-, 3D-, oder ähnlichen minder wichtigen Funktionen zu beschäftigen, die kaum eine Aktualisierung oder einen Neukauf der Programme rechtfertigen können.