Größere und zentrierte Versalien

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Ein großer Versal soll in der Absatzmitte platziert werden.

Lösung

Umgeben Sie den ersten Buchstaben des ersten Satzes des Absatzes mit einem span-Element, das ein class-Attribut besitzt:

<p><span class="initcap">O</span>nline, activity of exchanging ideas is sped up. The distribution of messages from the selling of propaganda to the giving away of disinformation takes place at a blindingly fast pace thanks to the state of technology &hellip;</p>

Zusätzlich zu den Stildefinitionen für den ersten Buchstaben mit Hilfe des span-Tags und des Klassenselektors definieren Sie weitere Regeln, die die Einrückung für den Absatz festlegen (siehe folgende Abbildung):

p {
 text-indent: 37%;
 line-height: 1em;
}
p span.initcap {
 font-size: 6em;
 line-height: 0.7em;
 font-weight: bold;
}

Ein größerer Versal, zentriert dargestellt

Abbildung: Ein größerer Versal, zentriert dargestellt.

Diskussion

Diese Lösung basiert auf dem Zusammenwirken dreier CSS-Eigenschaften. Die erste Eigenschaft ist text-indent, die die erste Zeile in Richtung Absatzmitte verschiebt. Der Wert wurde hier mit 37% angegeben. Das entspricht etwas mehr als einem Drittel der gesamten Breite (siehe die folgende Abbildung), ist aber nicht genug, um den Versal tatsächlich zu »zentrieren«.

Der eingerückte Text

Abbildung: Der eingerückte Text.

Die nächste Eigenschaft, die uns bei der Aufgabe hilft, ist font-size. Indem wir die Schriftgröße mit 6em angeben, legen wir fest, dass der Versal um das Sechsfache (bzw. 600%) größer als die Standardschriftgröße des Browsers dargestellt werden soll (siehe die folgende Abbildung).

Versal, der 6x größer ist als normale Schriftgröße

Abbildung: Ein Versal, der sechsmal größer ist als die normale Schriftgröße.

Da die Schriftgröße sechsmal größer ist als der übrige Text, ist auch der Durchschuss der ersten Zeile höher als bei den übrigen Zeilen. Um das wieder zu korrigieren, stellen Sie die Zeilenhöhe für das span-Element auf 0.6em ein.

Die Zentrierung des Versals funktioniert in diesem Rezept, sofern die Breite des Zeichens 26% der Absatzbreite entspricht. Haben bei Ihnen der Versal oder der Absatz eine andere Breite als in diesem Rezept, müssen Sie gegebenenfalls die Werte in den CSS-Regeln anpassen, um den Versal zu zentrieren.

Siehe auch

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln