#ePrdctn 9 – Drop Caps

Bevor dieses Blog komplett zur Werbeveranstaltung verkommt. Gebe ich mal wieder eine Lektion in E-Production. In „Blackbox Urheberrecht“ (verzeiht bitte) verwende ich Drop Caps. Zumindest in der ePub-Version. In Mobi sind sie mangels Unterstützung sowohl in den klassischen Kindles als auch in den Apps unter den Tisch gefallen. Lediglich der Kindle Fire konnte sie darstellen. (Updates seit April 2013 können das geändert haben).

Drop Cap in Julia Schramm: Kunst ist Kritik.

Julia Schramm: Kunst ist Kritik. In: Daniel Brockmeier (Hrsg.): Blackbox Urheberrecht. Frankfurt 2013.

Was sind Drop Caps?

Drop Caps sind Versalien oder Initialen. Der erste Buchstabe eine Kapitels, der ein besonderes Design erhält. Ich mag den englischen Ausdruck, weil er schon ansatzweise erklärt, was wir später in CSS machen: Ein Kapitälchen, das nach unten fällt. Drop Caps sind einfach ins Layout einzufügen aber machen nachher einiges her. Das Buch wirkt dann einfach edler. Der Leser sieht, dass ihr euch beim Layout Mühe gegeben habt…

Drop Cap mit Hilfe von HTML uns CSS erstellen

In HTML gibt es nicht viel zu tun: Ihr legt um euren ersten Buchstaben ein <span> und gebt ihm einen aussagekräftigen Namen.

<span class="dropcap">E</span>s ist offenbar nicht mehr möglich, PRO Urheberrecht zu sein.

Aus: Johnny Haeusler: Ich heb‘ dann mal ur. In: Daniel Brockmeier (Hrsg.): Blackbox Urheberrecht. Frankfurt 2013.

In der CSS Datei, die ihr natürlich im Kopf eures Dokuments richtig verlinkt haben müsst, müsst ihr dann nur noch das Aussehen eurer Initiale definieren, wobei ihr eurer Phantasie freien Lauf lassen könnt. Ich entschied mich für:

span.dropcap {
float: left;
font-size: 4.7em;
line-height: 0.8em;
margin-right: 3pt;
margin-bottom: -0.1em;
}

float gibt an, ob bzw. dass der Abschnitt vom restlichen Text umflossen werden soll. left definiert, dass das <span> in diesem Umfluss links steht (was ich regelmäßig verwechsle und immer denke, es bedeutet, dass das span von links her umflossen wird).

Der Rest sollte eigentlich klar sein. font-size definiert die Schriftgröße, line-height definiert die Zeilenhöhe (das muss nicht drinstehen, das hatte ich nur eingefügt, weil die von mir gewählte Schriftart zu recht großen Zeilenzwischenräumen führte) und margin den Abstand… Ihr solltet relative Werte nehmen, also em oder % damit die Drop Cap ihre Größe relativ zur vom Leser gewählten Schriftgröße hält.

Das war’s schon. Wie ich sagte: keine große Sache, aber ein großer Effekt.

Advertisements

Hinterlasse einen Kommentar

Eingeordnet unter #ePrdctn

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s