text-transform

  • Revision slug: CSS/text-transform
  • Revision title: text-transform
  • Revision id: 25196
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 71 words added, 5 words removed

Revision Content

{{ CSSRef() }}

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 in the text-transform: capitalize case which only put the first letter of a word in uppercase.
  • In Greek (gr), accented letters lose their accent when capitalized (ά/Α) and first-vowel accented diphthongs transforms both the accent and its position (άι/ΑΪ).
  • In Greek (gr), there are two forms of the lowercase sigma characters: σ and ς. The second one is the final form of the letter and is used only when the sigma terminates a word (and doesn't start it). The text-transform: lowercase must choose the right lowercase sigma from the context when applied to an uppercase sigma (Σ).

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.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

text-transform:  none | [ [capitalize | uppercase | lowercase ] || full-width || full-size-kana ] 

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 {{ experimental_inline() }} : 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 {{ experimental_inline() }}
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 Oriental scripts (like Chinese or Japanese).
full-size-kana {{ experimental_inline() }}
Is a keyword forcing small kanas (like ッ or っ) to be written at the regular size (ツ or つ). This is useful when writing furigana as the small kanas wouldn't be legible.

Examples

p { text-transform: none; }
Initial string Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Live example Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Reference result Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

 

p { text-transform: capitalize; }
Initial string Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Live example Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Reference result Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...

 

p { text-transform: capitalize; }
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.
Initial string (this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
Live example (this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
Reference result (This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ?¡Transform!

 

p { text-transform: capitalize; }
Initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.
Initial string ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Live example ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Reference result ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl

 

p { text-transform: uppercase; }
Initial string Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Live example Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Reference result LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...

 

p { text-transform: lowercase; }
Initial string Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Live example Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Reference result lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

Specifications

Specification Status Comment
CSS Text Level 3 {{ Spec2('CSS3 Text') }} Extends letters to any Unicode character in the Number or Letter general category. Adds the full-width and full-size-kana keyword. Modifies the behavior of capitalize to apply to the first letter of the word, ignoring initial punctuations or symbols.
CSS 2.1 {{ Spec2('CSS2.1') }} Extends letters to non-latin bi-cameral scripts
CSS 1 {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 4.0 7.0 1.0
capitalize (CSS3 version) see note {{ CompatGeckoDesktop("14") }} (see note) see note {{ CompatUnknown() }} see note
full-size-kana {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
full-width {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
ßSS {{ CompatUnknown() }} {{ CompatGeckoDesktop("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
iİ and ıI {{ CompatNo() }} {{ CompatGeckoDesktop("14") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}
Dutch IJ digraph {{ CompatNo() }} {{ CompatGeckoDesktop("14") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Greek accented letters {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Σσ or word-final ς {{ CompatNo() }} {{ CompatGeckoDesktop("14") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0
capitalize (CSS3 version see note {{ CompatGeckoMobile("14") }} see note see note {{ CompatUnknown() }} see note
full-size-kana {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
full-width {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
ßSS {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
iİ and ıI {{ CompatNo() }} {{ CompatGeckoMobile("14") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}
Dutch IJ digraph {{ CompatNo() }} {{ CompatGeckoMobile("14") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Greek accented letters {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Σσ or word-final ς {{ CompatNo() }} {{ CompatGeckoMobile("14") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Browser notes

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

  • {{ cssxref("font-variant") }}
  • {{ CSS_Reference:Text() }}

{{ languages( {"fr": "fr/CSS/text-transform" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>text-transform</code> 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.</p>
<div class="note"> <p>The <code>text-transform</code> property takes into account language-specific case mapping rules, like:</p> <ul> <li>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: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</li> <li>In German (de), the <code>ß</code> becomes <code>SS</code> in uppercase.</li> <li>In Dutch (nl), the <code>ij</code> digraph becomes <code>IJ</code>, even in the <code>text-transform: capitalize</code> case which only put the first letter of a word in uppercase.</li> <li>In Greek (gr), accented letters lose their accent when capitalized (<code>ά</code>/<code>Α</code>) and first-vowel accented diphthongs transforms both the accent and its position (<code>άι</code>/<code>ΑΪ</code>).</li> <li>In Greek (gr), there are two forms of the lowercase sigma characters: <code>σ</code> and <code>ς</code>. The second one is the final form of the letter and is used only when the sigma terminates a word (and doesn't start it). The <code>text-transform:</code><code> lowercase</code> must choose the right lowercase sigma from the context when applied to an uppercase sigma (<code>Σ</code>).</li> </ul> <p>The language is defined by the <code>lang</code> HTML attribute or the <code>xml:lang</code> XML attribute.</p> <p>Support for these specific cases vary from one browser to the other, so check the <a href="/en/CSS/text-transform#Browser_compatibility" title="https://developer.mozilla.org/en/CSS/text-transform#Browser_compatibility">browser compatibility table</a>.</p>
</div>
<ul class="cssprop" style="display:table;padding: 0.4em;border-left:0.15em solid;background-color:#eeeeff"> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("none") }}</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Applies to:</dfn> all elements</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_cssinherited() }}:</dfn> yes</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Media:</dfn> {{ Xref_cssvisual() }}</li> <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul><h2>Syntax</h2>
<pre class="eval syntaxbox" style="border:1px solid #cccccc;background-color:#ffe;border-radius:1em">text-transform:  none | [ [capitalize | uppercase | lowercase ] || full-width || full-size-kana ] 
</pre>
<h3>Values</h3>
<dl> <dt><code>capitalize</code></dt> <dd> <p>Is a keyword forcing the first <em>letter</em> 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 {{ experimental_inline() }} : it excludes any punctuation marks or symbols at the beginning of the word.</p> <div class="note">Authors should not expect <code class="css">capitalize</code> to follow language-specific titlecasing conventions (such as skipping articles in English).</div> </dd> <dt><code>uppercase</code></dt> <dd>Is a keyword forcing all characters to be converted to uppercase.</dd> <dt><code>lowercase</code></dt> <dd>Is a keyword forcing all characters to be converted to lowercase.</dd> <dt><code>none</code></dt> <dd>Is a keyword preventing the case of all characters to be changed.</dd> <dt><code>full-width</code> {{ experimental_inline() }}</dt> <dd>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 Oriental scripts (like Chinese or Japanese).</dd> <dt><code>full-size-kana</code> {{ experimental_inline() }}</dt> <dd>Is a keyword forcing small kanas (like ッ or っ) to be written at the regular size (ツ or つ). This is useful when writing furigana as the small kanas wouldn't be legible.</dd>
</dl>
<h2>Examples</h2>
<table class="standard-table"> <tbody> <tr> <td colspan="2"><code>p { text-transform: none; }</code></td> </tr> <tr> <td>Initial string</td> <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Live example</td> <td><code style="text-transform:none">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Reference result</td> <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> </tbody>
</table>
<p> </p>
<table class="standard-table"> <tbody> <tr> <td colspan="2"><code>p { text-transform: capitalize; }</code></td> </tr> <tr> <td>Initial string</td> <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Live example</td> <td><code style="text-transform:capitalize">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Reference result</td> <td><code>Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...</code></td> </tr> </tbody>
</table>
<p> </p>
<table class="standard-table"> <tbody> <tr> <td colspan="2"><code>p { text-transform: capitalize; }</code><br> 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.</td> </tr> <tr> <td>Initial string</td> <td><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td> </tr> <tr> <td>Live example</td> <td><code style="text-transform:capitalize">(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td> </tr> <tr> <td>Reference result</td> <td><code>(This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ?¡Transform!</code></td> </tr> </tbody>
</table>
<p> </p>
<table class="standard-table"> <tbody> <tr> <td colspan="2"><code>p { text-transform: capitalize; }</code><br> Initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.</td> </tr> <tr> <td>Initial string</td> <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td> </tr> <tr> <td>Live example</td> <td style="text-transform:capitalize"><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td> </tr> <tr> <td>Reference result</td> <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl</code></td> </tr> </tbody>
</table>
<p> </p>
<table class="standard-table"> <tbody> <tr> <td colspan="2"><code>p { text-transform: uppercase; }</code></td> </tr> <tr> <td>Initial string</td> <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Live example</td> <td><code style="text-transform:uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Reference result</td> <td><code>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...</code></td> </tr> </tbody>
</table>
<p> </p>
<table class="standard-table"> <tbody> <tr> <td colspan="2"><code>p { text-transform: lowercase; }</code></td> </tr> <tr> <td>Initial string</td> <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Live example</td> <td><code style="text-transform:lowercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> <tr> <td>Reference result</td> <td><code>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td> </tr> </tbody>
</table>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-text/#text-transform" title="http://dev.w3.org/csswg/css3-text/#text-transform">CSS Text Level 3</a></td> <td>{{ Spec2('CSS3 Text') }}</td> <td>Extends letters to any Unicode character in the Number or Letter general category. Adds the <code>full-width</code> and <code>full-size-kana</code> keyword. Modifies the behavior of <code>capitalize</code> to apply to the <em>first</em> letter of the word, ignoring initial punctuations or symbols.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/text.html#caps-prop" title="http://www.w3.org/TR/CSS21/text.html#caps-prop">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>Extends letters to non-latin bi-cameral scripts</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/REC-CSS1/#text-transform" title="http://www.w3.org/TR/REC-CSS1/#text-transform">CSS 1</a></td> <td>{{ Spec2('CSS1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>4.0</td> <td>7.0</td> <td>1.0</td> </tr> <tr> <td><code>capitalize</code> (CSS3 version)</td> <td>see note</td> <td>{{ CompatGeckoDesktop("14") }} (see note)</td> <td>see note</td> <td>{{ CompatUnknown() }}</td> <td>see note</td> </tr> <tr> <td><code>full-size-kana</code></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>full-width</code></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>ß</code> → <code>SS</code></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=21312" title="https://bugs.webkit.org/show_bug.cgi?id=21312"></a></td> <td>{{ CompatGeckoDesktop("14") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=21312" title="https://bugs.webkit.org/show_bug.cgi?id=21312"></a></td> </tr> <tr> <td>Dutch <code>IJ</code> digraph</td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoDesktop("14") }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=740477" title="https://bugzilla.mozilla.org/show_bug.cgi?id=740477"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td>Greek accented letters</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=307039" title="https://bugzilla.mozilla.org/show_bug.cgi?id=307039"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>Σ</code> → <code>σ</code> or word-final <code>ς</code></td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoDesktop("14") }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=740120" title="https://bugzilla.mozilla.org/show_bug.cgi?id=740120"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>6.0</td> <td>6.0</td> <td>1.0</td> </tr> <tr> <td><code>capitalize</code> (CSS3 version</td> <td>see note</td> <td>{{ CompatGeckoMobile("14") }} see note</td> <td>see note</td> <td>{{ CompatUnknown() }}</td> <td>see note</td> </tr> <tr> <td><code>full-size-kana</code></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>full-width</code></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>ß</code> → <code>SS</code></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=21312" title="https://bugs.webkit.org/show_bug.cgi?id=21312"></a></td> <td>{{ CompatGeckoMobile("14") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=21312" title="https://bugs.webkit.org/show_bug.cgi?id=21312"></a></td> </tr> <tr> <td>Dutch <code>IJ</code> digraph</td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoMobile("14") }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=740477" title="https://bugzilla.mozilla.org/show_bug.cgi?id=740477"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td>Greek accented letters</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=740477" title="https://bugzilla.mozilla.org/show_bug.cgi?id=740477"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>Σ</code> → <code>σ</code> or word-final <code>ς</code></td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoMobile("14") }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=740120" title="https://bugzilla.mozilla.org/show_bug.cgi?id=740120"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<h3>Browser notes</h3>
<p>The <code>capitalize</code> 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 <code>ⓐ</code> 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 <code>capitalize</code> line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.</p><h2>See also</h2>
<ul> <li>{{ cssxref("font-variant") }}</li> <li>{{ CSS_Reference:Text() }}</li>
</ul>
<p>{{ languages( {"fr": "fr/CSS/text-transform" } ) }}</p>
Revert to this revision