CSS/Tutorials/Initialen

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.

Hinweis

Adventskalender 2017

Dieser Artikel ist der Beitrag zum 03. Dezember.

Zurück zum

• Adventskalender (Rechtsklick, in neuem Tab öffnen)
• Blog-Artikel

Funktionsweise

Mit dem Pseudo-Element :first-letter können Sie den ersten Buchstaben eines Elements ansprechen.

Beispiel: Initial ansehen …

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

D

ansehen …

Beachten Sie: 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:

Beispiel: Initial ansehen …

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

D

ansehen …

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

Beispiel: 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.

ansehen …

Letzte Raffinessen

Am wirkungsvollsten wirken Initialen mit einer besonderen Schrifttype.

Beispiel: 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 kursive Systemschrift geladen.

ansehen …

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

Grafiken als Initialen

Sie können 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.

Beispiel: 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.

ansehen …

Beachten Sie: 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 Sie den Text ändern, müssen Sie auch das CSS anpassen und gegebenenfalls eine neue Grafik erstellen.

Quellen

Weblinks

• css-tricks.com: Drop Caps
• honkiat.com: Paragraph Dropcap with CSS’s :first-line and :first-letter Elements