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. It also can help improve legibility for ruby.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The text-transform
property takes into account language-specific case mapping rules such as the following:
- In Turkic languages, like Turkish (
tr
), Azerbaijani (az
), Crimean Tatar (crh
), Volga Tatar (tt
), and Bashkir (ba
), there are two kinds ofi
, 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 puts 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. - in Irish (
ga
), certain prefixed letters remain in lowercase when the base initial is capitalized, so for exampletext-transform: uppercase
will changear aon tslí
toAR AON tSLÍ
and not, as one might expect,AR AON TSLÍ
(Firefox only). In some cases, a hyphen is also removed upon uppercasing:an t-uisce
transforms toAN tUISCE
(and the hyphen is correctly reinserted bytext-transform: lowercase
).
The language is defined by the lang
HTML attribute or the xml:lang
XML attribute.
Note: Support for language-specific cases varies between browsers, so check the browser compatibility table.
Syntax
/* Keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-size-kana; /* Global values */ text-transform: inherit; text-transform: initial; text-transform: unset;
capitalize
Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text). A letter is defined as a character that is part of Unicode's Letter or Number general categories ' ; thus, any punctuation marks or symbols at the beginning of a word are ignored.
Authors should not expect
capitalize
to follow language-specific title casing conventions (such as skipping articles in English).The
capitalize
keyword was under-specified in CSS 1 and CSS 2.1. This resulted in differences between browsers in the way the first letter was calculated (Firefox considered-
and_
as letters, but other browsers did not. 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. Thecapitalize
line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.uppercase
- Is a keyword that converts all characters to uppercase.
lowercase
- Is a keyword that converts all characters to lowercase.
none
- Is a keyword that prevents the case of all characters from being changed.
full-width
- Is a keyword that forces 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).
full-size-kana
- Generally used for
<ruby>
annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.
Accessibility concerns
Large sections of text set with a text-transform
value of uppercase
may be difficult for people with cognitive concerns such as Dyslexia to read.
Formal definition
Initial value | none
|
Applies to | all elements. It also applies to ::first-letter and ::first-line .
|
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
none | capitalize | uppercase | lowercase | full-width | full-size-kana
Examples
none
<p>Initial String
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: none
<strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
text-transform: none;
}
strong { float: right; }
This demonstrates no text transformation.
capitalize (General)
<p>Initial String
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: capitalize
<strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
text-transform: capitalize;
}
strong { float: right; }
This demonstrates text capitalization.
capitalize (Punctuation)
<p>Initial String
<strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
</p>
<p>text-transform: capitalize
<strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
</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>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>text-transform: capitalize
<strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</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">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>text-transform: capitalize
<strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
</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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: uppercase
<strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
text-transform: uppercase;
}
strong { float: right; }
This demonstrates transforming the text to uppercase.
uppercase (Greek Vowels)
<p>Initial String
<strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>text-transform: uppercase
<strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
</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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: lowercase
<strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
text-transform: lowercase;
}
strong { float: right; }
This demonstrates transforming the text to lowercase.
lowercase (Greek Σ)
<p>Initial String
<strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>text-transform: lowercase
<strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
</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.
lowercase (Lithuanian)
<p>Initial String
<strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>text-transform: lowercase
<strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>
span {
text-transform: lowercase;
}
strong { float: right; }
This demonstrates how the Lithuanian letters Ĩ
and J́
retain their dot when transformed to lowercase.
full-width (General)
<p>Initial String
<strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
</p>
<p>text-transform: full-width
<strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
</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.
full-width (Japanese half-width katakana)
<p>Initial String
<strong>ウェブプログラミングの勉強</strong>
</p>
<p>text-transform: full-width
<strong><span>ウェブプログラミングの勉強</span></strong>
</p>
span {
text-transform: full-width;
}
strong { width: 100%; float: right; }
The Japanese half-width katakana was used to represent katakana in 8-bit character codes. Unlike regular (full-width) katakana characters, a letter with dakuten (voiced sound mark) is represented as two code points, the body of letter and dakuten. The full-width
combines these into a single code point when converting these characters into full-width.
full-size-kana
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>
p:nth-of-type(2) {
text-transform: full-size-kana;
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3The 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 and full-size-kana keywords.
|
CSS Level 2 (Revision 1)The definition of 'text-transform' in that specification. | Recommendation | From CSS Level 1The definition of 'text-transform' in that specification., extends letters to non-latin bi-cameral scripts |
CSS Level 1The definition of 'text-transform' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-transform
|
Chrome Full support 1 Full support 1 Notes' The |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 4 |
Opera Full support 7 Full support 7 Notes' Since Opera 15, the |
Safari Full support 1 Full support 1 Notes' The |
WebView Android Full support 1 Full support 1 Notes' The |
Chrome Android Full support 18 Full support 18 Notes' The |
Firefox Android
Full support 4 |
Opera Android
Full support 11 |
Safari iOS Full support 1 Full support 1 Notes' The |
Samsung Internet Android Full support 1.0 Full support 1.0 Notes' The |
capitalize
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 1 Full support 1 Notes' Before Firefox 14, some punctuation characters could interfere with correct capitalization. See bug 731536. |
IE
Full support 4 |
Opera
Full support 7 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android Full support 4 Full support 4 Notes' Before Firefox 14, some punctuation characters could interfere with correct capitalization. See bug 731536. |
Opera Android
Full support 11 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Dutch IJ digraph
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 14 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 14 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
full-size-kana
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 64 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 64 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
full-width
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 19 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 19 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Greek accented letters | Chrome
Full support 34 |
Edge
Full support 79 |
Firefox
Full support 15 |
IE
No support No |
Opera
Full support 21 |
Safari
No support No |
WebView Android
Full support 4.4 |
Chrome Android
Full support 34 |
Firefox Android
Full support 15 |
Opera Android
Full support 21 |
Safari iOS
No support No |
Samsung Internet Android
Full support 2.0 |
Σ → σ or word-final ς
|
Chrome
Full support 30 |
Edge
Full support 12 |
Firefox
Full support 14 |
IE
Full support 4 |
Opera
Full support 17 |
Safari
Full support 6 |
WebView Android
Full support 4.4 |
Chrome Android
Full support 30 |
Firefox Android
Full support 14 |
Opera Android
Full support 18 |
Safari iOS
Full support 6 |
Samsung Internet Android
Full support 2.0 |
i → İ and ı → I
|
Chrome
Full support 31 |
Edge
Full support 12 |
Firefox
Full support 14 |
IE
Full support 4 |
Opera
Full support 18 |
Safari
Full support 8 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 31 |
Firefox Android
Full support 14 |
Opera Android
Full support 18 |
Safari iOS
Full support 8 |
Samsung Internet Android
Full support 2.0 |
ß → SS
|
Chrome
Full support 1 |
Edge
Full support 18 |
Firefox
Full support 1 |
IE
No support No |
Opera
Full support 7 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 11 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
See also
text-transform by Mozilla Contributors is licensed under CC-BY-SA 2.5.