Initiale mit CSS

Heute nochmal ein Tutorial, das während meines Site-Redesigns entstanden ist: Wie setzt man eines der klassischen Typo-Elemente aus dem Print-Bereich in HTML/CSS um – nämlich Initiale, gerne auch mal Initialien genannt?

Bei meinem Redesign habe ich mich schnell für ein schwarz-grau-weißes Farbschema entschieden. Der Stil gefällt mir einfach sehr gut und hebt sich von dem bunten Einheitsgeflimmer im Web ab.

Um so wichtiger war mir, ein paar nicht auf Farbe basierende, optische Akzente zu setzen. Also mußte unter anderem ein Initial am Anfang jedes Blog-Beitrages her.

Um es kurz zu machen: Die Umsetzung ist ziemlich einfach, wenn man uralte Browser-Versionen ignoriert. Das ist hier problemlos möglich, weil auch in älteren Browsern der Text fehlerfrei angezeigt wird, nur eben dann ohne Initial. Für die Umsetzung spielen zwei CSS-Pseudoklassen eine Rolle, nämlich :first-letter und :first-child.

:first-letter bezieht sich auf den ersten Buchstaben eines Textes, ist also die Stelle, an der wir das Initial sein Aussehen und Verhalten mitgeben. Mit :first-child legen wir zusätzlich fest, dass nicht jeder Abschnitt mit einem Initial beginnt, sondern eben nur der erste.

Im Falles des WordPress-Themes, das ich hier verwende, ist die Klasse, die den Fließtext der Blogbeiträge beinhaltet .article und der Text ist absatzweise per p gegliedert.

Noch ein wenig Farb-, Float-, Margin- und Padding-Spielerei dazu und schon steht das Initial. Ich denke, die Formatierungen erklären sich selbst.

.article p:first-child:first-letter {
float:left;
font-size:2.4em;
padding:5px;
background:#363642;
color:#fff;
margin-right:4px;
margin-top:2px;
font-weight:bold;
font-family:"Times New Roman",Times,serif;
}

Auf das Laden eines zusätzlichen Fonts für das Initial habe ich aus Ladezeitgründen verzichtet, obwohl es natürlich reizvoll wäre, hier nochmal mit einem schönen Font einen Akzent zu setzen. Aber in diesem Fall ist es ganz gut, so wie es ist. Lieber nicht zu viel Schnickschnack und nicht zu viele verschiedene Schriften.