text-transform – Kleinbuchstaben, Großbuchstaben

CSS text-transform: Kleinbuchstaben, Versalien oder Großbuchstaben

CSS text-transform wandelt alle Zeichen eines Textes in Kleinbuchstaben oder in große Buchstaben (Versalien) um oder stellt jeden ersten Buchstaben eines Wortes in großen Buchstaben dar.

In der Schreibmaschinenära war die Großschreibung ganzer Wörter oder sogar Zeilen eines der wichtigsten Mittel, um einen Text herauszustellen: Die Schreibmaschine hatte nur eine einzige Schriftgröße und auch keinen Fettschnitt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Groß geschriebener Text

Für lange Textpassagen wird text-transform:uppercase kaum eingesetzt werden, denn längere Texte in Großbuchstaben (Versalien) sind nicht gut lesbar. Eher wird eine durchgehende Großschreibung z.B. für Überschriften eingesetzt.

Das Auf und Ab der kleinen und großen Buchstaben macht den Text besser lesbar.

Das Auf und Ab der kleinen und großen Buchstaben macht den Text besser lesbar.

Das Auf und Ab der kleinen und großen Buchstaben macht den Text besser lesbar.

h1 { text-transform: uppercase; }

Da der Text in allen Varianten von text-transform in normaler Groß- und Kleinschreibung bleibt, und nur vom Browser in Großbuchstaben bzw. Kleinbuchstaben angezeigt wird, muss keine Seite nachgearbeitet werden, wenn das nächste Design wieder zur Groß- und Kleinschreibung übergeht.

text-transform – Kleinbuchstaben zu Versalien

CSS text-transform: uppercase wandelt alle Zeichen eines Textes in Kleinbuchstaben oder in große Buchstaben (Versalien oder Majuskeln) um oder stellt jeden ersten Buchstaben eines Wortes in großen Buchstaben dar.

Alexander der Große

.cap { text-transform: uppercase; }
…
<p class="cap">Alexander der Große</p>

Das war einst für kundige Typografen eine kleine Katastrophe: Das »ß« wurde bei der Umwandlung in Großbuchstaben nicht in »SS« umgesetzt. Safari 3 und Firefox 3 (Mac OS und Windows) sind allerdings bereits korrekt bei der Umsetzung der Eigenschaft text-transform und zeigen »SS«, wenn ein »ß« im Text vorkommt, Chrome als Webkit-Browser ersetzt das ß ebenfalls durch SS.

Opera 11 (Mac) zeigte immer noch das »ß«, Internet Explorer verbreitet diesen Nano-Bug auch immer noch in allen Versionen. Wen kümmert das, wer weiß davon …

Seit dem 29. Juni 2017 gibt es das Eszett oder scharfe S nicht mehr nur als Kleinbuchstabe, sondern auch als Großbuchstabe ẞ (im Unicode-Standards schon seit 2008). Das Doppel-S bleibt weiter zulässig.

text-transform Werte

text-transform
text-transform steuert die Groß- und Kleinschreibung eines gewählten Textes.
Am Rande: Wer Texte nicht durchgehend in Großbuchstaben, sondern in Kapitälchen setzen will, braucht die Eigenschaft font-variant.
capitalize
stellt den ersten Buchstaben jedes Wortes als Großbuchstaben dar.
uppercase
stellt alle Buchstaben eines Textes in Großbuchstaben dar.
lowercase
stellt alle Buchstaben eines Textes in Kleinbuchstaben dar.
none
ist die Voreinstellung. none stellt sicher, dass keine vorangegangenen Deklarationen den ausgewählten Text beeinflussen.