Initialen im Web
HTML-CSS-Tutorial
⁄ Das folgende Tutorial wurde in macOS 10.14 erstellt und mit dem Webbrowser Safari getestet. Unter Windows 10 ist der Ablauf gleich.
Tutorial: Wie Sie Initialen im Web darstellen können
Als Initiale wird der erste Buchstabe in einem Text(abschnitt) bezeichnet, der immer ein Großbuchstabe ist und sich in schmückender Weise von den anderen Buchstaben unterscheidet. Es existieren in HTML und CSS mehrere Möglichkeiten, eine Initiale darzustellen.
Es gibt drei Positionen, wo eine Initiale als erster Buchstabe in einem Text stehen kann:
- als die erste Zeile überragende Initiale (engl. raised cap),
- als die vor dem Text angesetzte Initiale (engl. block cap),
- als die vom Text eingebaute Initiale (engl. drop cap).
Mithilfe von CSS und Anpassungen im HTML-Code eines Textes kann man die drei Typen von Initialen auf verschiedene Weisen darstellen. Dabei gibt es die robuste Art der Programmierung, die auf (fast) allen Web-Browsern funktioniert, und die elegante Art, die den modernen Web-Browsern vorbehalten ist, jedoch weniger Arbeit bedeutet.
1. Die robuste Programmierung
1.1. Überragende Initialen (engl. raised cap) mit 'span'
Jeder Buchstabe im Text, der als Initiale dargestellt werden soll, muss manuell von einem <span class="ini">-Befehl umschlossen werden.
CSS:
span.ini { font-size: 300%; font-weight: bold; color: grey; line-height: 0.75em; }
HTML:
<p><span class="ini">E</span>s war einmal...</p>
Resultat: Das 'E' überragt die erste Zeile.
1.2. Angesetzte Initiale (engl. block cap) mit 'div'
Jeder Buchstabe im Text, der als Initiale dargestellt werden soll, muss manuell von einem <div class="erster">-Befehl umschlossen werden und der Rest des Textes muss auch in eine <div class="rest">-Box gepackt werden.
CSS:
div.erster {font-size: 300%; font-weight: bold; color: grey; line-height: 1.0em; float: left; } div.rest {padding-left: 2.1em;} /* Abstand zur Initiale */
HTML:
<div class="erster">E</div><div class="rest"><p>s war einmal …</p></div>
Resultat: Das 'E' schwebt links vor dem Paragraphen.
1.3. Eingebaute Initiale (engl. drop caps) mit 'div'
Jeder Buchstabe im Text, der als Initiale dargestellt werden soll, muss manuell von einem <div class="eingepackt">-Befehl umschlossen werden und der Rest des Textes muss auch in eine <div class="rest">-Box gepackt werden.
CSS:
div.erster {font-size: 270%; font-weight: bold; color: grey; line-height: 1em; float: left; margin-bottom: -0.2em; /* Trick, um eine dritte eingerückte Zeile zu verhindern */} div.rest { } /* Keine Veränderungen nötig */
HTML:
<div class="erster">E</div><div class="rest"><p>s war einmal …</p></div>
Resultat: Das 'E' wird vom Text des Paragraphen umflossen.
2. Die elegante Programmierung
2.1. Überragende Initialen (engl. raised cap) mit Pseudo-Element ::first-letter
Durch das Pseudo-Element muss nicht jeder Buchstabe, der als Initiale dargestellt werden soll, von einem HTML-Befehl manuell umschlossen werden. Es reicht, wenn der Paragraph eine eigene Klasse bekommt; das spart Zeit.
CSS:
p.ersteZeile:first-letter { font-size: 300%; color: grey; font-weight: bold; } p { line-height: 1.3em; }
HTML:
<p class="ersteZeile">Es war einmal …</p>
Resultat: Das 'E' wird automatisch größer als der Rest vom Text geschrieben. Dies wird bei allen Paragraphen
geschehen, die die Klasse "ersteZeile" haben.
Da manche Browser den Zeilenabstand für die erste Zeile verändern, was unschön aussieht, sollten Sie eine Zeilenhöhe mit CSS p {line-height: 1.3em;} oder p {line-height: 100%;} festlegen.
2.2. Angesetzte Initiale (engl. block cap) mit Pseudo-Element ::first-letter
Auch hier reicht es, wenn jeweils der erste Paragraph eines Kapitels die Klasse "ersteZeile" zugewiesen bekommt.
CSS:
p.ersteZeile::first-letter { font-size: 300%; font-weight: bold; color: grey; float: left; /* Bringt den Buchstaben vor dem Text zum Schweben */ padding-right: 0.05em; /* Etwas Abstand zwischen Initiale und Fließtext */ margin-bottom: -0.2em; /* Trick, um eine dritte eingerückte Zeile zu verhindern */ line-height: 1.0em; margin-left: -0.75em; /* Ausrücken des ersten Buchstabens */ } p.eingerueckt {margin-left: 2.2em;} /* Einrücken des Paragraphen */ p {line-height: 1.3em;} /* Abhilfe gegen unterschiedliche Zeilenhöhe durch Initiale */
HTML:
<p class="ersteZeile eingerueckt">Es war einmal …</p>
Resultat: Das 'E' schwebt links vor dem Paragraphen und der Raum unter dem 'E' bleibt frei.
2.3. Eingebaute Initiale (engl. drop cap) mit Pseudo-Element ::first-letter
Wenn der erste Paragraph jedes Kapitels die Klasse "ersteZeile" hat, dann wird der erste Buchstabe als Initiale automatisch vom restlichen Text umflossen.
CSS:
p.ersteZeile::first-letter { font-size: 300%; font-weight: bold; color: grey; float: left; padding-right: 0.05em; /* Etwas Abstand zwischen Initiale und Fließtext */ margin-bottom: -0.2em; /* Trick, um eine dritte eingerückte Zeile zu verhindern */ line-height: 1.0em; } p {line-height: 1.3em;} /* Abhilfe gegen unterschiedliche Zeilenhöhe durch Initiale */
HTML:
<p class="ersteZeile">Es war einmal …</p>
Resultat: Der Buchstabe 'E' wird vom Text umflossen.
Fazit
Da moderne Web-Browser die elegante Programmierung mit dem Pseudo-Element ::first-letter unterstützen, bedeutet dies weniger Zeitaufwand. – Wie das jedoch in E-Books aussieht, das wird ein anderes Mal gezeigt.
Die sechs Beispiele habe ich in einem ZIP-Archiv (2.2 MByte) zum Herunterladen für Sie zusammengefasst.
Für Fragen oder Anregungen schreiben Sie mir eine E-Mail an feedback(at)cg4u.de.