Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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 Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

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.

Website-Projekte mit kulturbanause

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

Übersicht Kompetenzen →

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.

Übersicht Schulungsthemen →