Automatische CSS Initialen (Drop Caps)
Von Felix Initialen lassen sich in CSS mit Hilfe des Pseudoelements :first-letter gestalten.
Eine Initiale dient im Print- und Webdesign nicht nur als Zierelement – sie kann auch die Lesbarkeit von Texten erheblich verbessern, da sie den Blick des Lesers führt. Wir zeigen euch in diesem Beitrag wie ihr mit dem CSS Pseudoelement :first-letter eine automatische Initiale für eure Website gestalten könnt.
Webfont einbinden und grundlegende Font-Styles
Zunächst nehmen wir ein paar grundlegende Schrifteinstellungen vor, von denen Größen und Abstände der Initiale abhängig sind. Als Webfont für dieses Beispiel benutzen wir die »Roboto«, die wir direkt über Google Fonts einbinden. Das geschieht mit folgender Zeile im <head> unseres HTML-Dokuments:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">Im CSS-Code setzen wir die Schriftgröße auf 100% zurück und legen den Font fest.
body {
font-size: 100%;
font-family: 'Roboto', sans-serif;
}
p {
line-height: 1.5;
}Außerdem haben wir für Absätze eine Zeilenhöhe von 150% festgelegt.
Die Initiale mit CSS ansprechen
In unserem Beispiel soll der erste Buchstabe des ersten Absatzes auf einer Seite zu einer Initiale werden. Um genau diesen Buchstaben via CSS ansprechen zu können, benutzen wir eine Kombination aus den CSS Pseudo-Selektoren :first-of-type und :first-letter:
p:first-of-type:first-letter {
/* style */
}Beachtet, dass Satzzeichen die vor dem ersten Buchstaben stehen das selbe Styling wie die Initiale erhalten.
Die Initiale mit CSS stylen
Wir möchten erreichen, dass die Initiale in der Höhe genau zwei Zeilen einnimmt. Außerdem müssen wir den Abstand zum Text auf der rechten Seite anpassen. Das erreichen wir mit folgendem CSS-Code:
p:first-of-type:first-letter {
font-size: 300%;
line-height: 1;
float: left;
padding-right: .125em;
}Verwendet ihr einen anderen Font oder sogar eine Schriftmischung – z.B. eine Initiale mit Serifen zusammen mit einem serifenlosen Text – werdet ihr im CSS die Werte etwas anpassen und ggf. zusätzlich mit margin arbeiten müssen. Leider lassen sich die Größen nicht zuverlässig berechnen, weshalb ihr um die manuelle Feinjustierung nicht herum kommen werdet.
Bugfix für Firefox
Da im Firefox die Höhe der Initiale falsch berechnet wird, müssen wir mit folgendem Media Query noch einen Abstand korrigieren – ausschließlich für den Firefox.
/* Anpassungen für Firefox */
@-moz-document url-prefix() {
p:first-of-type:first-letter {
margin-top: .15em;
}
}Noch einmal das gesamte CSS zusammengefasst:
body {
font-size: 100%;
font-family: 'Roboto', sans-serif;
}
p {
line-height: 1.5;
}
p:first-of-type:first-letter {
font-size: 300%;
line-height: 1;
float: left;
padding-right: .125em;
}
/* Anpassungen für Firefox */
@-moz-document url-prefix() {
p:first-of-type:first-letter {
margin-top: .15em;
}
}Bugs & Browsersupport
Der Browsersupport für die oben beschriebenen Techniken ist sehr gut. Ab dem Internet Explorer 6 gibt es bereits Support für ::first-letter – allerdings mit der Schreibweise mit nur einem Doppelpunkt (:first-letter). Ab dem IE 9 ist die Unterstützung dann uneingeschränkt.
Es gibt zwei allgemein bekannte Bugs. Den ersten haben wir oben schon erwähnt und behoben – Firefox scheint die Höhe von dem mit :first-letter angesprochenen Buchstaben falsch zu berechnen.
Der zweite Bug betrifft Webkit-Browser. Hier wird die Initiale bei einer Textauswahl (visuell) nicht mit markiert. Beim Kopieren in die Zwischenablage kommt sie trotzdem mit.
CSS-Spezifikation und JavaScript Polyfill
Die manuelle Anpassung des CSS-Codes je nach Schriftart und die kleineren Bugs sind etwas lästig. Daher arbeitet die Arbeitsgruppe CSS bereits an einer neuen CSS Eigenschaft für »Drop Cap« Layouts. Adobe hat mit dropcap.js einen Polyfill entwickelt, wodurch die zukünftige CSS-Technik dank JavaScript bereits in Browsern der aktuellen Generation läuft. Eine interaktive Demo des Polyfills findet ihr hier.
Geschrieben von Felix Lehmann
Als Web-Designer und Frontend-Developer bei kulturbanause umfasst Felix Hauptaufgabenbereich die Konzeption, Gestaltung und Umsetzung von Designsystemen. Scribble auf Papier, Prototyping im Design-Tool, schnellstmöglich in den Browser und mit CSS umsetzen. Auch das Überführen in ein Custom WordPress-Theme ist kein Problem. Die meiste Zeit verbringt er trotzdem damit die richtigen Klassennamen zu finden.
Danke für den Beitrag! Schade, dass das „initial-letter“ Property bislang nur bei Safari funktioniert, sonst wäre es deutlich einfacher. Ich würde noch vorschlagen das Element mit einem Child Selector anzusprechen: ( .content > p:first-of-type:first-letter ) da es sonst bei verschachtelten Elementen (z.B. einer Infobox) zu ungewollten Initialien kommen kann.