CSS text-transform – Referenz, Beispiel und Labor

stylesheet.css · text-transform

.probe {
  text-transform: uppercase;
}

Der Webautor schreibt einen Absatz, der Browser setzt ihn nach den Regeln des Stylesheets. Groß- und Kleinschreibung, Abstand, Farbe und Schnitt hängen an genau einer Eigenschaft.

berechneter Werttext-transform: uppercase

Box-Breite–

Box-Höhe–

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.)

Eine Änderung der Darstellung, nicht des Textes

Die Umformung geschieht bei der Ausgabe. Im Dokument steht der Text unverändert, und was kopiert, durchsucht oder vorgelesen wird, ist der ursprüngliche Text und nicht der dargestellte.

Das ist bei durchgehenden Großbuchstaben der entscheidende Vorteil gegenüber der Schreibweise im Dokument. Eine Überschrift, die im Quelltext normal geschrieben und über das Stylesheet in Versalien gesetzt wird, lässt sich auch dann noch normal lesen, wenn das Stylesheet fehlt, und sie wird von der Sprachausgabe nicht buchstabiert.

Umgekehrt heißt es, dass die Auswahl im Browser den Text in seiner ursprünglichen Schreibweise liefert. Wer eine Zeile in Versalien sieht und kopiert, bekommt gemischte Schreibung, was regelmäßig für Verwirrung sorgt und dennoch das richtige Verhalten ist.

Wo die Umrechnung an ihre Grenzen kommt

Die Seite beschreibt die Umformung als Umrechnung des Zeichencodes, und genau dort liegen die Schwierigkeiten. Die Zuordnung zwischen großen und kleinen Buchstaben ist nicht überall eindeutig und nicht überall sprachunabhängig.

Im Deutschen betrifft das das scharfe s, für das es lange keine Großform gab und dessen Umformung zu zwei Buchstaben aus einem Zeichen zwei macht. Im Türkischen hat das i mit und ohne Punkt jeweils eine eigene Großform, sodass eine sprachunabhängige Umrechnung dort einen anderen Buchstaben erzeugt.

Für das Kapitalisieren kommt hinzu, dass die Regel wortweise arbeitet und nicht wissen kann, welche Wörter groß geschrieben gehören. Was dabei herauskommt, ist keine Groß- und Kleinschreibung nach den Regeln einer Sprache, sondern jedes Wort mit großem Anfangsbuchstaben, einschließlich Artikel und Präpositionen.

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.

Ausgangswert: none
Berechneter Wert: Spezifizierter Wert
Vererbung: Ja
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): 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.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft text-transform