mozilla

Revision 25179 of text-transform

  • Revision slug: CSS/text-transform
  • Revision title: text-transform
  • Revision id: 25179
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 165 words added, 24 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; }

will prevent any transform:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

stays:

Live example:Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

<p">Reference:Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

 

p { text-transform: capitalize; }

will transform:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

to:

Live example: Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

Reference: Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...

But, it ignores punctuation characters at the start of a word:

Live example:  (this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ¡transform!

Reference: (This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ¡Transform!

It also ignores symbols:

Live example:  ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl

Reference: ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙ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>
<pre>p { text-transform: none; }
</pre>
<p>will prevent any transform:</p>
<p><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></p>
<p>stays:</p>
<p style="text-transform: none">Live example:<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></p>
&lt;p"&gt;Reference:<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>
<p> </p>
<pre>p { text-transform: capitalize; }
</pre>
<p>will transform:</p>
<p><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></p>
<p>to:</p>
<p style="text-transform: capitalize">Live example: <code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></p>
<p>Reference: <code>Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...</code></p>
<p>But, it ignores punctuation characters at the start of a word:</p>
<p style="text-transform: capitalize">Live example:  <code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ¡transform!</code></p>
<p>Reference:<code> (This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ¡Transform!</code></p>
<p>It also ignores symbols:</p>
<p style="text-transform: capitalize">Live example:  ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</p>
<p>Reference:<code> </code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl</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