Difference between revisions of "Text-transform"
From Htmlpedia
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
==CSS 1 property: text-transform== | ==CSS 1 property: text-transform== | ||
− | This | + | This property controls capitalization effects of an element's text. Values have the following meanings: |
+ | ; capitalize : Puts the first character of each word in uppercase; other characters are unaffected. | ||
+ | ; uppercase : Puts all characters of each word in uppercase. | ||
+ | ; lowercase : Puts all characters of each word in lowercase. | ||
+ | ; none : No capitalization effects. | ||
===Property Values=== | ===Property Values=== | ||
Line 7: | Line 11: | ||
This property accepts the following values: | This property accepts the following values: | ||
− | * | + | * none (default) |
− | * | + | * capitalize |
− | * | + | * uppercase |
+ | * lowercase | ||
===Example=== | ===Example=== | ||
<good><pre><style type="text/css"> | <good><pre><style type="text/css"> | ||
− | + | #html_id { text-transform: uppercase; } | |
</style> | </style> | ||
... | ... | ||
− | < | + | <p id="html_id">Contents</p></pre></good> |
===Browser Support=== | ===Browser Support=== | ||
Line 30: | Line 35: | ||
If you indicate that support is "Partial" or "Buggy," please add further comments explaining what's missing or what doesn't work right. | If you indicate that support is "Partial" or "Buggy," please add further comments explaining what's missing or what doesn't work right. | ||
− | + | {| class="wikitable sortable" border="1" | |
− | + | ! Browser !! text-transform support | |
− | + | |- | |
− | + | | IE 3 | |
− | + | | unknown | |
− | + | |- | |
− | + | | IE 4 | |
− | + | | unknown | |
− | + | |- | |
− | + | | IE 5 | |
− | + | | unknown | |
− | + | |- | |
− | + | | IE 5.5 | |
− | + | | unknown | |
− | + | |- | |
− | + | | IE 6 | |
− | + | | unknown | |
− | + | |- | |
− | + | | IE 7 | |
− | + | | <span style="color:#007700">Full</span> | |
+ | |- | ||
+ | | NS 3 | ||
+ | | unknown | ||
+ | |- | ||
+ | | NS 4 | ||
+ | | unknown | ||
+ | |- | ||
+ | | NS 4.5 | ||
+ | | unknown | ||
+ | |- | ||
+ | | NS 6 | ||
+ | | unknown | ||
+ | |- | ||
+ | | NS 7 | ||
+ | | unknown | ||
+ | |- | ||
+ | | NS 8 | ||
+ | | unknown | ||
+ | |- | ||
+ | | Firefox 1 | ||
+ | | unknown | ||
+ | |- | ||
+ | | Firefox 1.5 | ||
+ | | unknown | ||
+ | |- | ||
+ | | Firefox 2 | ||
+ | | <span style="color:#007700">Full</span> | ||
+ | |- | ||
+ | | Mozilla | ||
+ | | unknown | ||
+ | |- | ||
+ | | Opera 6 | ||
+ | | unknown | ||
+ | |- | ||
+ | | Opera 7 | ||
+ | | unknown | ||
+ | |- | ||
+ | | Opera 8 | ||
+ | | unknown | ||
+ | |- | ||
+ | | Opera 9 | ||
+ | | <span style="color:#007700">Full</span> | ||
+ | |- | ||
+ | | Safari 3 | ||
+ | | <span style="color:#007700">Full</span> *1 | ||
+ | |} | ||
+ | |||
+ | <nowiki>*1: tested with: Safari for Windows 3.0.3</nowiki> | ||
===Tips and Tricks=== | ===Tips and Tricks=== | ||
Line 59: | Line 112: | ||
* W3C Specification: [http://www.w3.org/TR/CSS1 CSS Specification Level 1] | * W3C Specification: [http://www.w3.org/TR/CSS1 CSS Specification Level 1] | ||
* HTMLpedia: [[List of CSS Properties]] | * HTMLpedia: [[List of CSS Properties]] | ||
+ | * W3C school [http://www.w3schools.com/htmldom/prop_style_texttransform.asp text-transform in html dom] | ||
+ | * W3C school [http://www.w3schools.com/css/pr_text_text-transform.asp text-transform in css] |
Latest revision as of 18:58, 8 September 2007
Contents
CSS 1 property: text-transform
This property controls capitalization effects of an element's text. Values have the following meanings:
- capitalize
- Puts the first character of each word in uppercase; other characters are unaffected.
- uppercase
- Puts all characters of each word in uppercase.
- lowercase
- Puts all characters of each word in lowercase.
- none
- No capitalization effects.
Property Values
This property accepts the following values:
- none (default)
- capitalize
- uppercase
- lowercase
Example
![]() | <style type="text/css"> #html_id { text-transform: uppercase; } </style> ... <p id="html_id">Contents</p> |
Browser Support
If you have tested support for this property in any of the following browsers, please indicate its level of support using one of the following keywords:
- Full
- Partial
- Buggy
- None
If you indicate that support is "Partial" or "Buggy," please add further comments explaining what's missing or what doesn't work right.
Browser | text-transform support |
---|---|
IE 3 | unknown |
IE 4 | unknown |
IE 5 | unknown |
IE 5.5 | unknown |
IE 6 | unknown |
IE 7 | Full |
NS 3 | unknown |
NS 4 | unknown |
NS 4.5 | unknown |
NS 6 | unknown |
NS 7 | unknown |
NS 8 | unknown |
Firefox 1 | unknown |
Firefox 1.5 | unknown |
Firefox 2 | Full |
Mozilla | unknown |
Opera 6 | unknown |
Opera 7 | unknown |
Opera 8 | unknown |
Opera 9 | Full |
Safari 3 | Full *1 |
*1: tested with: Safari for Windows 3.0.3
Tips and Tricks
If you know of any useful or uncommon tips or techniques using this property, please describe them here.
References
- W3C Specification: CSS Specification Level 1
- HTMLpedia: List of CSS Properties
- W3C school text-transform in html dom
- W3C school text-transform in css