text-transform

Übersicht

Das text-transform CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.

Das text-transform Attribut berücksichtigt sprachspezifische Regeln:

in Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und jeweils die Groß- bzw. Kleinschreibung: i/İ and ı/I.
auf Deutsch (de) wird das ß in der Großschreibung zu SS.
auf Niederländisch (nl) wird der Digraph ij auch bei text-transform: capitalize zu IJ.
auf Griechisch (el) verlieren Vokale ihren Akzent wenn wenn ganze Worte is in Großschreibung geschrieben werden (ά/Α), außer beim Eta (ή/Ή). Doppelvokale mit einem Aktzent auf dem ersten Vokal verlieren den Akzent und bekommen einen Trema auf dem zweiten Vokal (άι/ΑΪ).
auf Griechisch (el) hat das kleine Sigma zwei Formen: σ and ς. ς wird nur dann genutzt, wenn Sigma ein Wort beendet. Wird text-transform: lowercase auf ein großes Sigma (Σ) angewandt, so muss der Browser aus dem Kontext heraus entscheiden, welches verwendet wird.

Die Sprache wird durch das lang HTML Attribut oder das xml:lang XML Attribut festgelegt..

Die Unterstützung dieser spezifischen Fälle unterscheidet sich von Browser zu Browser, also prüfen Sie dies anhand der Kompatibilitätstabelle.

Initialwert	`none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formal syntax: none | capitalize | uppercase | lowercase | full-width

text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none
text-transform: full-width

text-transform: inherit

Werte

capitalize: Ein Schlüsselwort, dass die Großschreibung des Anfachsbuchstaben jedes Wortes erzwingt. Geändert werden alle Unicode-basierten Zeichen außer Symbole. Dabei bleiben alle anderen Zeichen unverändert.; Bei der automatischen Großschreibung sollte je nach Sprache die Kompatibilität beachtet und überprüft werden.
uppercase: Wendet die Großschreibung auf alle Zeichen an.
lowercase: Erzwingt die Kleinschreibung aller Zeichen.
none: Verhindert Änderungen; alle Buchstaben bleiben unverändert.
full-width: Erzwingt das Rendern der Buchstaben als rechteckige Form, was z.B. die Interaktion mit ostasiatischen Sprachen (z.B. Chinesisch oder Japanisch) erlaubt.

Beispiele

`p { text-transform: none; }`
Zeichenkette	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Echtzeitbeispiel	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Referenzwert	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`

`p { text-transform: capitalize; }`
Zeichenkette	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Echtzeitbeispiel	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Referenzwert	`Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...`

`p { text-transform: capitalize; }` Die Großschreibung beginnt bei Zeichen, die nach Unicode der Buchstabenkategorie angehören.
Zeichenkette	`(this) “is” [a] –short– -test- «for» the _css_ ¿capitalize? ?¡transform!`
Echtzeitbeispiel	`(this) “is” [a] –short– -test- «for» the _css_ ¿capitalize? ?¡transform!`
Referenzwert	`(This) “Is” [A] –Short– -Test- «For» The _Css_ ¿Capitalize? ?¡Transform!`

`p { text-transform: capitalize; }` Symbole werden ignoriert. Auch hier wird erst der erste gefundene Buchstabe in einer Zeichenkette großgeschrieben.
Zeichenkette	`ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl`
Echtzeitbeispiel	`ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl`
Referenzwert	`ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl`

`p { text-transform: capitalize; }` Das dänische Digraph `ij` muss wie ein einzelnes Zeichen behandelt werden.
Zeichenkette	`The Dutch word: "ijsland" starts with a digraph.`
Echtzeitbeispiel	`The Dutch word: "ijsland" starts with a digraph.`
Referenzwert	`The Dutch Word: "IJsland" Starts With A Digraph.`

`p { text-transform: uppercase; }`
Zeichenkette	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Echtzeitbeispiel	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Referenzwert	`LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...`

`p { text-transform: uppercase; }` Bei Griechischen Vokalen sollte, außer bei einem trennenden `eta`, auf Akzente verzichtet werden. Bei der Großschreibung eines ersten Vokals mit Akzent kommt es bei zwei direkt aufeinander folgenden Vokalen zu einer Diaräse.
Zeichenkette	`Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";`
Echtzeitbeispiel	`Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";`
Referenzwert	`ΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΪΚΟ ΦΑΪ" Ή ΣΤΗ "ΝΕΡΑΪΔΑ";`

`p { text-transform: lowercase; }`
Zeichenkette	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Echtzeitbeispiel	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Referenzwert	`lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`

`p { text-transform: lowercase; }` Der griechische Buchstabe Sigma (Σ) wird je nach Kontext in ein kleingeschriebenes Sigma (σ) oder die entsprechene Wortvariante (ς) umgewandelt.
Zeichenkette	`Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.`
Echtzeitbeispiel	`Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.`
Referenzwert	`σ is a greek letter that appears several times in` `ΟΔΥΣΣΕΥς.`

`p { text-transform: full-width; }` Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.
Zeichenkette	0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{\|}~
Echtzeitbeispiel	0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{\|}~
Referenzwert	０１２３４５６７８９ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ！＂＃＄％＆（）＊＋，－．／：；＜＝＞？＠｛｜｝～

Details

Spezifikation	Status	Kommentrar
CSS Text Level 4 Die Definition von 'text-transform' in dieser Spezifikation.	Bearbeiterentwurf	AusCSS Text Level 3 Die Definition von 'text-transform' in dieser Spezifikation. :Fügt das Schlüsselwort `full-size-kana` hinzu und erlaubt die Kombination von Schlüsselwörtern mit `full-width`
CSS Text Level 3 Die Definition von 'text-transform' in dieser Spezifikation.	Arbeitsentwurf	Aus CSS Level 2 (Revision 1) Die Definition von 'text-transform' in dieser Spezifikation. : Mehr Zahlen und Buchstaben können verwendet werden. Das Schlüsselwort capitalize aktiviert die Großschreibung nur beim ersten unterstützten Zeichen eines Wortes; andere Zeichen werden ignoriert. Erhöhung der Kompatibilität des Schlüsselwortes full-width.
CSS Level 2 (Revision 1) Die Definition von 'text-transform' in dieser Spezifikation.	Empfehlung	Aus CSS Level 1 Die Definition von 'text-transform' in dieser Spezifikation. : Ergänzung des Umfangs an unterstützten Zeichen um einige nicht-lateinische Buchstaben
CSS Level 1 Die Definition von 'text-transform' in dieser Spezifikation.	Empfehlung

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Grundfunktionalität	1.0	1.0 (1.7 oder früher)	4.0	7.0	1.0
`capitalize` (CSS3 version)	siehe Bemerkung	14 (14) (siehe Bemerkung)	siehe Bemerkung	?	siehe Bemerkung
`full-size-kana`	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`full-width`	Nicht unterstützt	19 (19)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`ß` → `SS`	?	1.0 (1.7 oder früher)	?	?	?
`i` → `İ` and `ı` → `I`	Nicht unterstützt	14 (14)	?	?	Nicht unterstützt
Dänisches `IJ D`igraph	Nicht unterstützt	14 (14)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
Griech. Zeichen mit Akzent	Nicht unterstützt	15 (15)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`Σ` → `σ` bzw. `ς`	30	14 (14)	Nicht unterstützt	Nicht unterstützt	6.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Grundfunktionalität	1.0	1.0 (1)	6.0	6.0	1.0
`capitalize` (CSS3 version)	siehe Bemerkung	14.0 (14) siehe Bemerkung	siehe Bemerkung	?	siehe Bemerkung
`full-size-kana`	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`full-width`	Nicht unterstützt	19.0 (19)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`ß` → `SS`	?	1.0 (1)	?	?	?
`i` → `İ` and `ı` → `I`	Nicht unterstützt	14.0 (14)	?	?	Nicht unterstützt
Dänisches `IJ D`igraph	Nicht unterstützt	14.0 (14)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
Griech. Zeichen mit Akzent	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`Σ` → `σ` bzw. `ς`	Nicht unterstützt	14.0 (14)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Browserinformationen

Das capitalize Schlüsselwort wurde in CSS1 bzw. CSS 2.1 nicht eindeutig spezifiziert. Dadurch wurde der erste großzuschreibende Buchstabe unterschiedlich ermittelt. Sowohl Webkit-basierte Browser als auch die Gecko Engine identifizierte Symbole fälschlicherwiese als Buchstaben. Beispielsweise galten bei Firefox - respektive _ als Buchstaben. Internet Explorer 9 hielt sich den Spezifikationen insgesamt am nächsten. Mit CSS3 wurde das Verhalten vereinheitlicht. Der Kompatibilitätstabelle können die Browserversionen entnommen werden, mit denen der Standard erstmals exakt umgesetzt wurde.

Siehe auch

font-variant