CSS initial-letter Eigenschaft
Die CSS initial-letter Eigenschaft erstellt Drop Caps und Raised Caps – mit Syntax, Werten, Browser-Unterstützung und Beispielen.
Die CSS-Eigenschaft initial-letter erstellt einen Drop Cap: Sie vergrößert den ersten Buchstaben eines Blocks, sodass er mehrere Textzeilen überspannt und sauber mit dem umgebenden Absatz ausgerichtet ist. Diesen überdimensionierten Anfangsbuchstaben sieht man häufig in Büchern, Zeitschriften und langen Artikeln.
Bevor diese Eigenschaft existierte, wurden Drop Caps mit float sowie manuell angepassten font-size-Werten und negativen Margins nachgeahmt – fragile Werte, die bei jeder Änderung der Schriftart oder Zeilenhöhe kaputtgingen. initial-letter übernimmt die Berechnung für Sie: Sie geben an, wie groß der Buchstabe in Zeilen sein soll, und der Browser bestimmt Größe und Position automatisch, sodass Grundlinie und Versalhöhe mit dem Fließtext übereinstimmen.
Sie wenden die Eigenschaft auf das ::first-letter-Pseudoelement an (oder auf das erste Inline-Kind eines Block-Containers), nicht auf den gesamten Absatz.
| Anfangswert | normal |
|---|---|
| Gilt für | ::first-letter-Pseudoelemente und das erste Inline-Kind eines Block-Containers. |
| Vererbbar | Nein |
| Animierbar | Nein |
| Version | CSS3 |
| DOM-Syntax | element.style.initialLetter = "2 1"; |
Syntax
initial-letter: normal | <integer> | <integer> <integer>;Die Eigenschaft akzeptiert das Schlüsselwort normal oder ein bis zwei durch Leerzeichen getrennte positive ganze Zahlen.
Funktionsweise
- Der erste Wert (
size) steuert, wie viele Zeilen hoch der Buchstabe ist.3bedeutet, dass die Glyphe dieselbe Höhe wie drei Textzeilen einnimmt – der Browser passtfont-sizeautomatisch an. - Der zweite Wert (
sink) ist optional und steuert, wie viele Zeilen der Buchstabe unterhalb der ersten Textgrundlinie absinkt. Wird er weggelassen, entspricht der Sink-Wert dem Size-Wert, was einen klassischen abgesenkten Cap ergibt. Ein Sink-Wert von1hält den Buchstaben am oberen Rand der ersten Zeile und erzeugt einen erhöhten Cap.
/* 3 lines tall, sunk 3 lines (classic dropped cap — sink defaults to size) */
initial-letter: 3;
/* 3 lines tall, sunk only 1 line — letter rises above the paragraph */
initial-letter: 3 1;
/* Reset to no effect */
initial-letter: normal;Beide ganzen Zahlen müssen positiv sein – null und negative Werte sind ungültig. Der Sink-Wert darf den Size-Wert nicht überschreiten.
Werte
| Wert | Beschreibung |
|---|---|
normal | Kein initial-letter-Effekt. Dies ist der Standardwert. |
<integer> | Eine einzelne positive ganze Zahl legt die Größe in Zeilen fest; der Sink-Wert entspricht standardmäßig demselben Wert und ergibt einen Drop Cap. |
<integer> <integer> | Der erste Wert ist die Größe (Höhe in Zeilen). Der zweite ist der Sink (Zeilen, um die der Buchstabe absinkt). Verwenden Sie 1 als Sink-Wert für einen Raised Cap. |
initial | Setzt die Eigenschaft auf ihren Standardwert (normal) zurück. |
inherit | Übernimmt den berechneten Wert vom übergeordneten Element. |
Beispiel für einen Initial Letter
Dieses Beispiel setzt den ersten Buchstaben auf zwei Zeilen Höhe mit einem Sink-Wert von 1 (der Buchstabe steht am oberen Rand der ersten Zeile, teils erhöht, teils abgesenkt). Der margin-right verhindert, dass der folgende Text zu nah an den Cap heranrückt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Slabo 27px';
font-size: 1.5em;
line-height: 1.5;
padding: 40px 0;
}
article {
width: 80%;
}
.example::first-letter {
-webkit-initial-letter: 2 1;
initial-letter: 2 1;
color: #8ebf42;
font-weight: bold;
margin-right: .60em;
}
</style>
</head>
<body>
<article class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</article>
</body>
</html>
Beispiel für einen Raised Cap
Setzen Sie den Sink-Wert (zweiter Wert) auf 1, damit der vergrößerte Buchstabe am oberen Rand der ersten Zeile sitzt und über den Absatz hinausragt, anstatt in ihn abzusinken:
.example::first-letter {
-webkit-initial-letter: 3 1;
initial-letter: 3 1;
color: #8ebf42;
font-weight: bold;
margin-right: 0.1em;
}Ein Sink-Wert von 1 bei einer Größe von 3 bedeutet, dass der Buchstabe drei Zeilen hoch ist, aber nur seine Unterkante bis zur ersten Grundlinie absinkt – der Rest ragt über die Eröffnungszeile hinaus.
Den Initial Letter gestalten
Sie können jede Eigenschaft, die auch bei ::first-letter funktioniert, verwenden, um den Cap zu gestalten. Häufige Ansätze sind:
color— verwenden Sie eine Marken- oder Akzentfarbe, um den Cap hervorzuheben.font-size— vermeiden Sie das Setzen dieser Eigenschaft in derselben Regel;initial-letterübernimmt die Schriftgrößenanpassung.font-family— kombinieren Sie eine dekorative Display-Schrift für den Cap, während der Fließtext eine andere Schriftart verwendet.font-weight— fette Caps sind in der redaktionellen Typografie traditionell.margin-right— fügen Sie einen kleinen Abstand (0,1–0,6 em) zwischen Cap und dem folgenden Text hinzu.padding— fügen Sie Platz zwischen der Glyphe und einer etwaigenbackground-coloroderborderhinzu.color— setzen Sie eine kontrastreiche Textfarbe.
p::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
font-family: Georgia, serif;
color: #b5451b;
font-weight: bold;
margin-right: 0.15em;
padding: 0.05em 0.1em;
background-color: #fdf3ee;
}Browser-Unterstützung und Fallback
initial-letter wird von Safari und Chrome/Edge (Blink) umfassend unterstützt, in Firefox jedoch noch nicht implementiert. Stellen Sie immer einen Fallback bereit, damit die Seite auch in nicht unterstützten Browsern angemessen aussieht.
Verwenden Sie das Präfix -webkit-initial-letter zusammen mit der unpräfixierten Eigenschaft, um ältere WebKit/Blink-Versionen abzudecken.
Progressive-Enhancement-Fallback
Die @supports-Regel ermöglicht es Ihnen, die moderne Eigenschaft nur dort anzuwenden, wo sie unterstützt wird, und überall sonst ein einfacheres float-basiertes Layout zu verwenden:
/* Fallback for Firefox and older browsers */
p::first-letter {
font-size: 3.5em;
font-weight: bold;
float: left;
line-height: 0.65;
margin: 0.05em 0.1em 0 0;
}
/* Override with the proper property where supported */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
p::first-letter {
font-size: unset;
float: unset;
line-height: unset;
margin: unset;
-webkit-initial-letter: 3;
initial-letter: 3;
}
}Der float-Ansatz erfordert manuelle Anpassung von line-height und margin, um den Buchstaben optisch auszurichten – genau das fragile Setup, das initial-letter ersetzt. Der @supports-Block setzt diese manuellen Werte sauber zurück und wendet die Standardeigenschaft an.
Wann initial-letter verwendet werden sollte
Verwenden Sie initial-letter, wenn:
- Sie redaktionelle Drop Caps möchten, die auch dann ausgerichtet bleiben, wenn der Nutzer die Schriftgröße im Browser ändert.
- Sie Zeitschriften-ähnliche Layouts, Langform-Artikel oder Buchkapitelseiten erstellen.
- Sie die Firefox-Lücke mit einem Float-Fallback tolerieren können.
Vermeiden Sie es, wenn:
- Das erste „Zeichen" tatsächlich eine Zahl, ein Emoji oder ein Satzzeichen ist – die visuelle Ausrichtung kann dann unerwartet sein.
- Sie pixelgenaue Kontrolle über die Position in allen Browsern ohne einen Float-Fallback benötigen.
Verwandte Eigenschaften
::first-letter— das Pseudoelement, auf dasinitial-letterabzielt.::first-line— gestaltet die erste Zeile eines Blocks.float— die klassische (vor CSS3) Methode, einen Drop Cap nachzuahmen.font-size— Text manuell skalieren, wenninitial-letternicht unterstützt wird.line-height— legt das Zeilenraster fest, an dem der Cap ausgerichtet wird.text-indent— ein weiteres typografisches Werkzeug für die erste Zeile, das häufig zusammen mit Drop Caps verwendet wird.