EPUB mit Initial

Zeitschriften und Bücher werden beim Printdesign häufig mit Initialen gestaltet – eine lange Tradition, die schon zu Beginn des Buchdrucks in Form von reichen Verzierungen genutzt wurde. Auch in Zeiten des digitalen Publizierens lebt das gute, alte Initial weiter und hat auch seine Berechtigung. Erstellt man heute ein E‑Book, so gibt es keinen Grund darauf zu verzichten. Gestaltet man in InDesign über die entsprechende Funktion ein Initial (Absatzformat > Initialen und verschachtelte Formate), wird dies beim EPUB-​Export ausgegeben. Das Erscheinungsbild wird über passenden CSS-​Code gesteuert. Leider ist das Ergebnis in allen EPUB-​Readern nicht zufriedenstellend:

Neben dem suboptimalen optischen Ergebnis, kommt noch die geringe Gestaltungsmöglichkeit im Code hinzu. Werfen wir also einen Blick auf das, was InDesign in den Code schreibt. Um das Initial zu formatieren, wird es in einen Span-​Tag gesetzt:

<span class="_idGenDropcap-1</span>

Die entsprechende Klasse im CSS schaut dabei so aus:

._idGenDropcap-1 {
float:left;
font-size:5.573em;
line-height:1;
margin-bottom:-0.271em;
margin-right:0.05em;
margin-top:-0.034em;
}

Wie man sehen kann, errechnet InDesign eine recht krumme Schriftgröße, wie auch Abstände an den Kanten, alles, bis auf die dritte Nachkommastelle. Im Prinzip werden die Werte aus den Einstellungen im Layout abgeleitet, aber: E‑Books sind nicht zu vergleichen mit klassischen Layouts! Weiter kommt hinzu, dass jeder, der sich schon mal ausführlicher mit E‑Books beschäftigt hat, sicher festgestellt hat, dass trotz des EPUB-​Standards jeder Reader Abweichungen bei der Auslegung hat.

Der andere Weg

Wie geht es also besser? Per Zufall bin ich auf ein CSS-​Pseudoelement (Link zu einer kleinen Erklärung dazu) gestoßen :first-​letter. Wie man sich bei dem Namen schon vorstellen kann, wird darüber der erste Buchstabe eines Absatzes formatiert, ohne dass es in einem Span-​Tag stehen muss. Zu meiner Freude ist dieses Element auch Teil des EPUB-​Standards (Link).
Für einen normalen Absatz wäre die Notation im CSS-​Code dann so:

p:first-letter {Eigenschaften;}

Nun toben wir uns mal ein wenig in CSS aus und holen dabei auch weit aus mehr Gestaltungsmöglichkeiten raus, als InDesign uns bietet:

p:first-letter {
	float: left;
	font-size: 2.8em;
	padding: 5px 10px;
	margin-right: 0.15em;
	line-height: 1;
	background-color: #000;
	color: #fff;
	display: block;
}

Bevor wir uns ansehen, wie das Ganze aussieht, ein paar Erklärungen zum Code:

• float:left sorgt dafür, dass der Buchstabe links sitzt und von den Folgezeilen umflossen wird
• font-​size regelt die Schriftgröße, das kann man sich ausrechnen oder einfach ein wenig rumspielen
• padding sorgt dafür, dass der Buchstabe nicht am Rand des generierten Hintergrundes klebt
• margin:right sorgt für einen kleine Abstand rechts zum Text

Damit kommen wir zu einem Ergebnis, das besser kompatibel ist und auch mehr Gestaltungsmöglichkeiten bietet und zusätzlich auch einen besseren und wartbareren Code zu Folge hat.

Es wäre aber zu schön, um wahr zu sein, wenn es überall ohne Probleme funktionieren würde. Konvertiert man das EPUB für den Kindle, so ist das Ergebnis auf diversen Geräten weiter unbefriedigend:

Hier bleibt weiterhin nur der gut gemeinte Rat bestehen: Für Kindle bitte einfach auf Initialen verzichten. Wenn man sich dabei verschiedene Dateien ersparen will, so kann man diesen Fall mit Hilfe von MediaQueries und den Einträgen @media amzn-​kf8 und @media amzn-​mobi7 lösen.