DIY-Donnerstag, E-pub Secrets

Epub Insights #10 drop caps

11. Oktober 2018

Liebe Autorinnen und SelfpublisherInnen,

Drop Caps verwende ich in E-Books, wie ich in verschiedenen Beiträgen schon geschrieben habe, eher zurückhaltend. Trotzdem  möchte ich euch  heute dazu animieren, mal etwas wild zu gehen und einfach mal ein paar ungewöhnliche Dinge zu probieren.

Drop Cap werden auf den verschiedenen Reader, Smartphones und Leseapps und auch in verschiedenen Schriftarten oft unterschiedlich dargestellt. Deshalb sollte man vor der Veröffentlichung die E-Books auf verschiedenen Geräten testen und gegebenenfalls Änderungen vornehmen.

Drop Caps im ersten Absatz

Mit dem Pseudo-Element :first-letter lässt sich der erste Buchstabe im Abschnitt ansteuern. Die CSS Anweisungen für einen drop cap im ersten Abschnitt eines Kapitels könnten dann beispielsweise so lauten:

.body:first-letter {
float: left;
font-size: 3.5em;
letter-spacing: 0.3em;
}

Das Ergebnis sieht dann so aus:

Drop caps

Drop Caps in Überschriften

Ich habe hier auch mal etwas mit der Kapitelüberschrift herumgespielt. Sie wird in diesem tagebuchartigen Buch gefolgt von einer englischen Datums- und Zeitangabe. So sieht es dann aus, wenn ich die oberen CSS Anweisungen für Drop Caps einfach auch für die Überschriften übernehme.

Das sieht etwas sehr zufällig aus. Deshalb habe ich da noch ein paar kleine Änderungen vorgenommen.

Das »T«  in der Überschrift steht mir hier z.B. etwas zu frei neben dem Text:

Darum habe ich hier den Text etwas weiter nach links an das »T« herangerückt, so dass das »o« vom Querbalken des »T« überfangen wird. Ich habe es ein paarmal mit der CSS Anweisung letter-spacing hin- und hergeschoben, bis es einerseits nah genug am T war, aber auch genug »Luft« hatte. Ich bin dann bei -0.3em gelandet. Damit der Text in der Vertikale genau mittig neben dem »T« steht habe ich die line-height der Headline auf 3.0em gesetzt. Auch hier muss man etwas herumprobieren, um zu dem besten Ergebnis zu kommen.

.headline:first-letter {
float: left;
font-size: 3.5em;
letter-spacing: -0.3em;
margin-right:3em;
}

.headline {
font-weight: bold;
font-size: 1.2em;
line-height: 3.0em;
font-variant: normal;
text-indent: 0em;
letter-spacing: 0.1em;
margin-left: 1.5em;
}

Damit die Datumszeile auch noch harmonisch in die Kapitelüberschrift eingebunden ist, habe ich sie mit den margin-top -0.6em nach oben verschoben und mit margin-left 5.3em bündig unter das »T«gerückt

.datum {
font-weight: normal;
font-style: normal;
font-size: 0.82em;
line-height: 2.0em;
text-decoration: none;
font-variant: normal;
text-indent: 0em;
letter-spacing: 0.1em;
margin-top:-6.2em;
margin-left: 5.3em;
}

Mit diesen CSS-Anweisungen sind der Fantasie fast keine Grenzen gesetzt. Und man kann sehr elegante oder a fancy Gestaltungen produzieren, die angewendet werden können, wenn einzelne Textelemente besonders hervorgehoben werden sollen.

Beste Grüße
Uwe

You Might Also Like

No Comments

Leave a Reply