text-transform

Summary

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

The text-transform property takes into account language-specific case mapping rules, like:

• in Turkic languages, like Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/I.

• In German (de), the ß becomes SS in uppercase.

• In Dutch (nl), the ij digraph becomes IJ, even with text-transform: capitalize, which only put the first letter of a word in uppercase.

• In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ).

• In Greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. When applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context.

On the other some other specific case mapping rules are not taken into account by any browser like:

• in Gaelic (ga), a prefix letter remains in lowercase when the base initial is capitalised, so in this example the h- should not be capitalized: text-transform: uppercase will change Meud na h-aplacaid to MEUD NA H-APLACAID which violates the locale orthographic rules, as it ought to be MEUD NA h-APLACAID.

The language is defined by the lang HTML attribute or the xml:lang XML attribute.

Support for these specific cases vary from one browser to the other, so check the browser compatibility table.

Syntax

/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

Values

capitalize

Is a keyword forcing the first letter of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general categories : it excludes any punctuation marks or symbols at the beginning of the word.

Authors should not expect capitalize to follow language-specific titlecasing conventions (such as skipping articles in English).

uppercase

Is a keyword forcing all characters to be converted to uppercase.

lowercase

Is a keyword forcing all characters to be converted to lowercase.

none

Is a keyword preventing the case of all characters to be changed.

full-width

Is a keyword forcing the writing of a character, mainly ideograms and latin scripts inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

Formal syntax

none | capitalize | uppercase | lowercase | full-width

Examples

Specifications

Browser compatibility

[1] The capitalize keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like ⓐ to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.

See also

• font-variant