CSS - text-transform
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.
Examples
none
<p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p></code> <p>text-transform: none <strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong> </p>
span { text-transform: none; } strong { float: right; }
This demonstrates no text transformation.
capitalize (General)
<p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p></code> <p>text-transform: capitalize <code> <strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> </p>
span { text-transform: capitalize; } strong { float: right; }
This demonstrates text capitalization.
capitalize (Punctuation)
<p>Initial String <strong><code>(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong> </p></code> <p>text-transform: capitalize <code><strong></code><span><code>(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code> </p>
span { text-transform: capitalize; } strong { float: right; }
This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.
capitalize (Symbols)
<p>Initial String <strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong> </p></code> <p>text-transform: capitalize <code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code> </p>
span { text-transform: capitalize; } strong { float: right; }
This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.
capitalize (Dutch ij digraph)
<p>Initial String <strong lang="nl"><code>The Dutch word: "ijsland" starts with a digraph.</code><code></strong> </p></code> <p>text-transform: capitalize <code><strong></code><span lang="nl"><code>The Dutch word: "ijsland" starts with a digraph.</code></span><code></strong></code> </p>
span { text-transform: capitalize; } strong { float: right; }
This demonstrates how the Dutch ij digraph must be handled like one single letter.
uppercase (General)
<p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> </p></code> <p>text-transform: uppercase <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> </p>
span { text-transform: uppercase; } strong { float: right; }
This demonstrates transforming the text to uppercase.
uppercase (Greek Vowels)
<p>Initial String <strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong> </p></code> <p>text-transform: uppercase <code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code> </p>
span { text-transform: uppercase; } strong { float: right; }
This demonstrates how Greek vowels except disjunctive eta should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.
lowercase (General)
<p>Initial String <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> </p></code> <p>text-transform: lowercase <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> </p>
span { text-transform: lowercase; } strong { float: right; }
This demonstrates transforming the text to lowercase.
lowercase (Greek Σ)
<p>Initial String <strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong> </p></code> <p>text-transform: lowercase <code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code> </p>
span { text-transform: lowercase; } strong { float: right; }
This demonstrates how the Greek character sigma (Σ
) is transformed into the regular lowercase sigma (σ
) or the word-final variant (ς
), according the context.
full-width (General)
<p>Initial String <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong> </p></code> <p>text-transform: full-width <code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code> </p>
span { text-transform: full-width; } strong { width: 100%; float: right; }
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.
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 expectcapitalize
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 <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> capitalize <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> uppercase <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> lowercase <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> full-width
Description
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ß
becomesSS
in uppercase. -
In Dutch (
nl
), theij
digraph becomesIJ
, even withtext-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 applyingtext-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 theh-
should not be capitalized:text-transform: uppercase
will changeMeud na h-aplacaid
toMEUD NA H-APLACAID
which violates the locale orthographic rules, as it ought to beMEUD 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.
Initial value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 |
capitalize (CSS3 version) |
?[1] | 14 (14)[1] | ?[1] | ?[1] | ?[1] |
full-size-kana |
No support | No support | No support | No support | No support |
full-width |
No support | 19 (19) | No support | No support | No support |
ß → SS |
? | 1.0 (1.7 or earlier) | ? | ? | ? |
i → İ and ı → I |
No support | 14 (14) | ? | ? | No support |
Dutch IJ digraph |
No support | 14 (14) | No support | No support | No support |
Greek accented letters | 30 | 15 (15) | No support | No support | No support |
Σ → σ or word-final ς |
30 | 14 (14) | No support | No support | 6.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
capitalize (CSS3 version) |
?[1] | 14.0 (14)[1] | ?[1] | ?[1] | ?[1] |
full-size-kana |
No support | No support | No support | No support | No support |
full-width |
No support | 19.0 (19) | No support | No support | No support |
ß → SS |
? | 1.0 (1) | ? | ? | ? |
i → İ and ı → I |
No support | 14.0 (14) | ? | ? | No support |
Dutch IJ digraph |
No support | 14.0 (14) | No support | No support | No support |
Greek accented letters | No support | No support | No support | No support | No support |
Σ → σ or word-final ς |
No support | 14.0 (14) | No support | No support | No support |
[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
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Level 4 The definition of 'text-transform' in that specification. |
Working Draft | From CSS Text Level 3 The definition of 'text-transform' in that specification., adds the full-size-kana keyword and allows the full-width keyword to be used together with another keyword. |
CSS Text Level 3 The definition of 'text-transform' in that specification. |
Working Draft | From CSS Level 2 (Revision 1) The definition of 'text-transform' in that specification., extends letters to any Unicode character in the Number or Letter general category. Modifies the behavior of capitalize to apply to the first letter of the word, ignoring initial punctuations or symbols. Adds the full-width keyword to mix smoothly ideographic characters and alphabetical characters. |
CSS Level 2 (Revision 1) The definition of 'text-transform' in that specification. |
Recommendation | From CSS Level 1 The definition of 'text-transform' in that specification., extends letters to non-latin bi-cameral scripts |
CSS Level 1 The definition of 'text-transform' in that specification. |
Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/text-transform