I volontari di MDN non hanno ancora tradotto questo articolo in Italiano. Unisciti a noi e traducilo tu stesso.
Puoi anche consultare l’articolo in English (US).

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 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 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 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 applying text-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 example text-transform: uppercase will change ar aon tslí to AR 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 to AN tUISCE (and the hyphen is correctly reinserted by text-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. The capitalize 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.

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.

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-size-kana

<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

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.

Specifications

Specification Status Comment
CSS Text Module 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 and full-size-kana keywords.
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

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-transformChrome Full support 1
Notes
Full support 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7
Notes
Full support 7
Notes
Notes Since Opera 15, the text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Safari Full support 1
Notes
Full support 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.
WebView Android Full support 1
Notes
Full support 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Chrome Android Full support 18
Notes
Full support 18
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1
Notes
Full support 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.
Samsung Internet Android Full support Yes
capitalize as defined by CSS level 3Chrome Full support YesEdge Full support 12Firefox Full support 14IE Full support 3Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
full-width
Experimental
Chrome No support NoEdge No support NoFirefox Full support 19IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 19Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
full-size-kana
Experimental
Chrome No support NoEdge No support NoFirefox Full support 64IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 64Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Dutch IJ digraphChrome No support NoEdge No support NoFirefox Full support 14IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 14Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Greek accented lettersChrome Full support 30Edge Full support 12Firefox Full support 15IE Full support 4Opera Full support 17Safari Full support YesWebView Android Full support 4.4Chrome Android Full support 30Edge Mobile Full support 12Firefox Android Full support 15Opera Android Full support 18Safari iOS Full support YesSamsung Internet Android Full support Yes
Σσ or word-final ςChrome Full support 30Edge Full support 12Firefox Full support 14IE Full support 4Opera Full support 17Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 30Edge Mobile Full support 12Firefox Android Full support 14Opera Android Full support 18Safari iOS Full support 6Samsung Internet Android Full support Yes
iİ and ıIChrome Full support YesEdge Full support 12Firefox Full support 14IE Full support 4Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ßSSChrome Full support YesEdge Full support 18Firefox Full support 1IE No support NoOpera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile No support NoFirefox Android Full support 4Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also

Tag del documento e collaboratori

Ultima modifica di: mdnwebdocs-bot,