CSS 2.1: `text-transform`

Erläuterungen

Mit Hilfe der Eigenschaft text-transform lässt sich die Groß- und Kleinschreibung von Text verändern. Es ist möglich, einen Text vollständig groß bzw. klein zu schreiben oder zu kapitalisieren, d.h. das erste Zeichen jedes Wortes groß zu schreiben.

Ein Anwenderprogramm erledigt die Umformung zwischen Groß- und Kleinschreibung durch Umrechnung des Zeichencodes. Würde diese Umrechnung nun auf alle Zeichen eines Textes angewandt, würden dadurch Text und Zeichensetzung völlig verändert. Deshalb gesteht die Spezifikation ausdrücklich zu, dass das Anwenderprogramm diese Berechnung für alle solche Zeichen nicht durchführt, deren Konversion anders als die Konversion lateinischer Buchstaben abläuft. Vereinfacht ausgedrückt: es brauchen nur Buchstaben konvertiert zu werden.

Zur Interpretation des Wertes capitalize muss der Browser den Beginn eines neuen Wortes erkennen können. Die Spezifikation sagt aber nichts darüber aus, welche(s) Zeichen das Anwenderprogramm zur Trennung zwischen Worten heranziehen soll. Für einige Browser beginnt ein neues Wort nur nach einem Leerraum, für andere auch nach einem Sonderzeichen, z. B. #, $, *, etc. Wieder andere berücksichtigen auch zwischen den Worten stehende Element-Tags. Dieser Wert bewirkt daher in jedem Browser eine etwas andere Ausgabe.

Die Eigenschaft text-transform wird zwar vererbt, dennoch hat sie nicht immer auch eine Auswirkung. Zwar sollen Kleinbuchstaben hinter Leerzeichen durch text-transform:capitalize in Großbuchstaben umgewandelt werden. Inbesondere in Inline- Level- Elementen, wie span oder em, ist es aber möglich, dass gar kein Leerzeichen auftritt, also auch keine Kapitalisation stattfindet.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'text-transform' capitalize | uppercase | lowercase | none | inherit

capitalize: Transformiert das erste Zeichen jedes Wortes in Großschreibung (siehe Erläuterungen oben).
uppercase: Transformiert alle Zeichen in Großschreibung.
lowercase: Transformiert alle Zeichen in Kleinschreibung.
none (Ausgangswert): Bewirkt keine Änderung der Groß-/Kleinschreibung.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

h1 { text-transform: capitalize }

Browserunterstützung

: Die Eigenschaft text-transform wird von allen modernen Browsern ohne Einschränkung unterstützt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

(Keine.)

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`none`	Spezifizierter Wert	Ja	Auf alle Elemente	Nicht zutreffend	Visual

Ausblick:

Das neue CSS-3-Modul Text enthält einige erweiterte Möglichkeiten der Textgestaltung und -Formatierung, konzentriert sich dabei im Wesentlichen auf die fernöstlichen mehrdirektionellen Textarten.