CSS/Tutorials/Initialen

15min

leicht

• Typografie

Initialen (lateinisch initium ‚Anfang‘, ‚Beginn‘;) sind schmückende Anfangsbuchstaben, die als erste Buchstaben von Kapiteln oder Abschnitten verwendet werden. Sie sind eine gute Möglichkeit, ansonsten eher lang(weilig) aussehende Texte aufzulockern.

Funktionsweise

Mit dem Pseudo-Element :first-letter kannst du den ersten Buchstaben oder die erste Ziffer eines Elements ansprechen.

Initial ansehen …

p::first-letter {
  font-size: 300%;
  color: red;
  font-weight: bold;
}

Beachte: Stehen vor dem ersten Buchstaben bzw. der ersten Ziffer Satzzeichen, z. B. ein Anführungszeichen, werden von ::first-letter alle Zeichen bis zum ersten Buchstaben bzw. der ersten Ziffer erfasst. Welche Satzzeichen das außer dem Anführungszeichen noch betrifft, kann hier ausprobiert werden. Wird ein Sonderzeichen nicht als Satzzeichen erkannt, z. B. das Sternchen (*), funktioniert ::first-letter nicht.

Beachte: Einige Browser erhöhen durch die größere Schriftgröße automatisch den Zeilenabstand.

Variante 1: invertierte Initiale

Oft werden Initialen durch eine Umkehrung von Text- und Hintergrundfarbe (Farb-Inversion) gestaltet:

Initial ansehen …

p {
  color: #3983ab;
}
p::first-letter {
  color: white;
  background-color: #3983ab;
  font-size: 300%;
}

Positionierung

Die häufigsten Varianten sind eine Positionierung …

1. bündig im Text
2. mittig in der 1. Zeile und
3. links neben dem Text

Positionierung von Initialen ansehen …

p::first-line {
  line-height: 100%;
}
 
p::first-letter {
  color: white;
  background-color: #3983ab;
  font-size: 300%;
  font-weight: bold;
  padding: 0.2em 0.1em;
  margin: 0.2em 0.2em 0 0.1em;
  border: 2px dashed white;
  box-shadow: 0 0 0 .1em #3983ab;
  float: left;
  line-height: 1.5em;
}
 
p.mittig::first-letter {
  line-height: 1.0em;
  margin: -0.5em 0.2em 0 0.1em;
}
 
p.links::first-letter {
  margin-left: -1.1em;
}

In diesem Beispiel wurde die Zeilenhöhe der 1. Zeile mit ::first-line {line-height: 100%} an die des Textes angepasst.

Durch das float:left wird die Initiale in den Text eingepasst. Die Zeilenhöhe des ::first-letter setzt sich aus der Höhe des Buchstabens, des Rands und des Paddings zusammen. Im zweiten Absatz wurde diese Zeilenhöhe verringert und ein negativer Margin nach oben gesetzt, damit die Initiale mittig dargestellt wird.

Im unteren Beispiel wurde die Initiale mit margin-left: -1.1em; nach links verschoben.

Letzte Raffinessen

Am wirkungsvollsten wirken Initialen mit einer besonderen Schrifttype.

Initial ansehen …

p::first:line {
  line-height: 1em;
}
 
p:nth-of-type(1)::first-letter {
  color: white;
  background-color: #3983ab;
  font-size: 300%;
  float: left;
  line-height: 1.5em;
  font-weight: bold;
  padding: 0.1em 0.3em 0.1em 0;
  margin: 0.2em 0.2em 0 0;
  border: 2px dashed white;
  box-shadow: 0 0 0 .1em #3983ab;
  font-family: "Edwardian Script ITC","Brush Script MT", cursive;
}

In diesem Beispiel wurde für das Initial eine besondere Schrifttype festgelegt. Ist diese Schrift nicht vorhanden, wird eine Systemschrift geladen.

Empfehlung: Damit nicht jeder Absatz ein Initial erhält, kann man mit :first-of-type oder :nth-of-type(1) nur den ersten Absatz ansprechen.

Grafiken als Initialen

Man kann anstelle dieser CSS-Effekte auch eine externe Grafik einbinden. Zuerst würde mit der Methode des Image-Replacement der erste Buchstabe unsichtbar gemacht und dann dem Anfangsbuchstaben eine SVG-Grafik als Hintergrundbild gegeben werden.

Initial ansehen …

p::first-letter{
/* Image-Replacement */ 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent;
}

p span{
  display:inline-block;
  float:left;
  width: 98px;
  height:106px;
  margin-right: 0.3em; 
 
/* Hintergrundbild */
  background-image: url("http://wiki.selfhtml.org/images/7/77/Initiale_E.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

<p>
  <span>E</span>s war einmal eine kleine süße Dirne, 
  ...
</p>

Dieses Beispiel unterscheidet sich von den vorangegangenen dadurch, dass der Anfangsbuchstabe zusätzlich in ein span-Element gesetzt wurde, da der Pseudoselektoren first-letter durch font: 0/0 (siehe Image-Replacement) keine Höhe mehr hat.

Das span-Element dient als Fläche für das Hintergrundbild, das mit background-size: contain; passend skaliert wird.

Beachte: Die Verwendung von externen Hintergrund-Grafiken hat einige Nachteile:

• Benutzer von Screen-Readern oder einer kontrastreichen Ansicht im Browser sehen weder die (Hintergrund-)Grafik noch den Text
• Jede externe Grafik benötigt einen Http-Request und verlangsamt so den Seitenaufbau.
• Wenn du den Text änderst, muss auch das CSS angepasst und gegebenenfalls eine neue Grafik erstellt werden.