Automatische CSS Initialen (Drop Caps)

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;
  }
}

Beispiel anschauen

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:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Felix Lehmann

Benutzerbild

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.

Feedback & Ergänzungen – 1 Kommentar

  1. Dennis
    schrieb am 15.10.2021 um 08:25 Uhr:

    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.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung