kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.