Initialen im Web und im E-Book darstellen

INFO: Dieses HTML-CSS-Tutorial “Initialen im Web und im E-Book darstellen” zeigt, wie durch Programmierung der ersten Buchstabe anders dargestellt werden kann. Es wurde in macOS 10.14 erstellt und mit dem Webbrowser Safari getestet. Der Ablauf ist unter Windows 10 gleich.

Initiale nennt man den erste Buchstabe in einem Text(abschnitt). Folgerichtig ist es immer ein Großbuchstabe. Außerdem unterscheidet er sich in schmückender Weise von den anderen Buchstaben. Dies kommt im DTP (Desktop Publishing) also in druckbaren Dokumenten vor, jedoch auch im Web und E-Book. Letzte basieren auf HTML und CSS und dort es existieren mehrere Möglichkeiten, eine Initiale darzustellen.

Es gibt drei Positionen, wo Initialen im Web oder E-Book in einem Text stehen können und zwar als die …

1. erste Zeile überragende Initiale (engl. raised cap) oder als die …
2. vor dem Text angesetzte Initiale (engl. block cap) und schließlich als die …
3. vom Text eingebaute Initiale (engl. drop cap).

Mithilfe von CSS und Anpassungen im HTML-Code eines Textes können Sie die drei Typen von Initialen darstellen.

SCHRITTE: Was Sie in diesem Tutorial erwartet:

Erstens die robuste Programmierung, die auf (fast) allen Web-Browsern funktioniert.
Zweitens die elegante Programmierung, die den modernen Web-Browsern vorbehalten ist und folgerichtig bedeutet dies weniger Arbeit.
Am Ende finden Sie das Fazit der Vorgehensweisen und den Download mit allen Beispielen.

1. Die robuste Programmierung für Initialen im Web

1.1. Überragende Initialen (engl. raised cap) mit ‘span’

Bei der ersten Methode muss der erste Buchstabe im Text 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’

Alternativ kann jeder Buchstabe im Text, der als Initiale dargestellt werden soll, auch manuell von einem
<div class="erster">-Befehl umschlossen werden. Dann muss der Rest des Textes 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’

Soll der erste Buchstabe im Text hängend dargestellt werden, muss er 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 für Initialen im Web

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.
TIPP: In WordPress gibt es in den Text-Einstellungen zu einem Absatz die Möglichkeit die Funktion »Initialbuchstabe« zu aktivieren. Das funktioniert ganz ohne Programmierung in HTML und CSS. Das Ergebnis sehen Sie in diesem Absatz.

Download

Die sechs Beispiele habe ich in einem ZIP-Archiv (2.2 MByte) zum Herunterladen für Sie zusammengefasst.

Bei Fragen schreiben Sie mir einfach eine E-Mail über die Seite »Kontakt«.

ENDE