text-transform

  • Revision slug: CSS/text-transform
  • Revision title: text-transform
  • Revision id: 25180
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 121 words added, 39 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.

  • {{ 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.
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.

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 symbole 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 ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Live example ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Reference result ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl

 

p { text-transform: uppercase; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p { text-transform: lowercase; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

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>
<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>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.</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>
</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 symbole 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>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙ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>
<pre>p { text-transform: uppercase; }
</pre>
<p style="text-transform: uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<pre>p { text-transform: lowercase; }
</pre>
<p style="text-transform: lowercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><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> </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> </tbody> </table>
</div>
<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