10 Schritte zu deiner EPUB

10 Schritte zu deiner EPUB #5 Inline Styles

22. März 2017

Im letzten Beitrag ging es um den Aufbau von CSS-Regeln und die Verlinkung einer CSS-Datei mit den html-Seiten des E-Books. In den Beispielen habe ich gezeigt, wie man ganze Textabschnitte mit Hilfe von CSS formatiert. Heute geht es um sogenannte Inline Styles. Das heißt die Anwendung von Formatierungen innerhalb einer Textzeile.

Es ist natürlich möglich, Text durch unterschiedliche Schriftarten hervorzuheben. Dazu muss man eigene Fonts in eine EPUB einzubetten. (Wie das funktioniert, erläutere ich in einem meiner nächsten Beiträge). Da aber zum einen nicht alle Lesegeräte die Verwendung von eingebetteten Fonts unterstützen, und zum anderen Leser sich eben auch für eine andere Schriftart entscheiden können, ist es sicherer, auf andere Auszeichnungsformen für hervorzuhebende Textabschnitte zurückzugreifen.

Kursiv, fett, und andere Hervorhebungen

Es kommt ja immer wieder vor, dass man nicht einen ganzen Abschnitt, sondern nur einzelne Worte oder Wortgruppen oder auch nur einzelne Buchstaben oder Zeichen innerhalb eines Textabschnitts hervorheben will. Dazu eignen sich sogenannte phrase tags. Sie werden in der html Datei direkt vor bzw nach dem auszuzeichnenden Text eingefügt.

In Romanen kommt der kursive Schriftschnitt sicher am häufigsten vor, um Text hervorzuheben.

Inline Styles

Im Quelltext der html-Datei wird die entsprechende Textstelle einfach mit den phrase tags für kursive Schrift ausgezeichnet. Hier habe ich die Tags <i></i> eingefügt.

Inline Styles

Hinweis: Heute benutzt man üblicherweise die Tags <em></em> für kursive Schrift. In den Anfängen haben E-Reader  den <em> Tag allerdings nicht unbedingt mit kursiver Schrift „übersetzt“. Obwohl das Problem vermutlich mittlerweile bei den meisten Lesegeräten behoben sein sollte, bin ich bei dem veralteten <i> Tag geblieben.

Genauso funktioniert es mit fetter Schrift, die man natürlich in literarischen Texten nur sehr sparsam einsetzen wird.

In der html sieht es dann so aus <strong>liber</strong> oder – veraltet – <b>liber</b>.

In seltenen Fällen, etwa für Fußnoten oder Grad- und Mengenangaben braucht man vielleicht den Tag <sup></sup>, durch den ein Zeichen höher gestellt wird. Dabei ist zu beachten, dass sich unter Umständen dadurch der Zeilenabstand zur vorausgehenden Zeile ändert.

CSS-Regeln inline anwenden

Will man eine CSS-Regel nicht auf einen ganzen Textblock anwenden, sondern nur auf ein Wort oder eine Wortgruppe innerhalb eines Abschnitts <p></p>, kann man dazu den <span></span> Tag einsetzen. Der <span> Tag selbst hat keine Auswirkungen auf den Text, sondern ist dazu gedacht, mit CSS formatiert zu werden. Im unteren Beispiel ist eine Wortgruppe innerhalb eines Abschnitts gesperrt. Der übrige Abschnitt bleibt davon unberührt.

Ich nutze diese Möglichkeit z.B. oft, um SMS- oder Mail-Text etc. hervorzuheben. Daher habe ich in der CSS-Datei eine Klasse .sms angelegt, die nur eine Regel enthält.

.sms { letter-spacing: 0.4em; }

In der html-Datei sieht das dann so aus:

<span class=“sms“>sed diam nonummy</span>.

Will man Handschrift andeuten, z.B. in Briefen, auf Notizzetteln etc., kann man diese Textstelle noch zusätzlich kursiv darstellen. Dazu gibt es jetzt zwei Möglichkeiten. Entweder, indem ich die <i></i> Tags innerhalbe der <span></span> Tags anwende:

<span class=“sms“><i>sed diam nonummy</i></span>.

oder, indem ich in der CSS eine neue Klasse anlege:

.brief {font-style: italic; letter-spacing: 0.4em; }

und in der html-Datei entsprechend referenziere:

<span class=“brief“>sed diam nonummy</span>.

In beiden Fällen erhalte ich folgendes Bild mit gesperrtem und kursiven Text.

Wichtig: Auch hier gilt wieder die Regel für verschachtelte Tags. Sie müssen von innen nach außen geschlossen werden. Phrase tags und span tags müssen also innerhalb des Textblocks geschlossen werden. Sie dürfen nicht über einen Textblock hinausgeführt werden.

<p class=“absatz“>Duis autem <em>sed diam nonummy</em> nibh euismod tincidunt</p>
<p class=“absatz“>Duis autem <span class=“sms“>sed diam nonummy</span> nibh euismod tincidunt</p>

 Dropcaps

Aus gedruckten Büchern kennen wir die schönen Kapitelanfänge mit Initialen. Die ersten Buchstaben eines Abschnitts, die über mehrere Zeilen gehen, setzen für den Leser sofort einen optischen Marker. Auch in E-Büchern können solche Initialen eingefügt werden.

Dafür lege ich wieder eine CSS-Klasse an, die ich .initiale nenne. Sie sieht so aus:

.initiale {
float: left;
font-size: 3.75em;
line-height: 0.5;
margin: 0.2em 0.1em 0 0;
}

Im Quellcode der html-Datei wird die Initale, hier der Buchstabe D mit den entsprechenden <span></span> Tags eingerahmt.

<p class=“absatz“><span class=“initiale“>D</span>uis autem vel

Nach einigem herumfiddeln mit den Werten in der CSS sieht das im Browser dann sehr schön aus. Das D schließt bündig mit dem oberen Zeilenrand ab. Es steht bündig auf der dritten Zeile. Die Serifen sind ein klein wenig über den optischen linken Rand verschoben und es hat nach unten und rechts einen gleichmäßigen Abstand zum umlaufenden Text.

Hinweis: Obwohl Initialen sich mit CSS so schön formatieren lassen, sind sie mit Vorsicht einzusetzen, weil sie nicht auf allen E-Readern so sauber dargestellt werden. Unten einige Beispiele auf der Kindle App für i-Phone, der I-Book App für i-Phone und dem Kindle Paperwhite. Das D ist zwar irgendwie anders als der übrige Text, aber nicht da, wo es eigentlich sein sollte.

     

Uppercases

Leider habe ich festgestellt, dass auch die Auszeichnung durch Großbuchstaben, die ich mit der CSS-Regel .gross {text-transform: uppercase;} formatiert hatte, nicht auf allen Lesegeräten angezeigt wurde.

Falls man wirklich besondere Textstellen durch Großschrift herausheben möchte, empfiehlt es sich, den entsprechenden Text händisch einzugeben.

Sollte jemand für Dropcaps und Uppercases eine auf Lesegeräten funktionierende Lösung haben, freue ich mich über einen Hinweis.

In der nächsten Woche wird es um Verlinkungen im E-Book gehen.

Bis dahin eine gute Woche!

Uwe

#rbpub #redbugwriting

You Might Also Like

No Comments

Leave a Reply