Difference between revisions of "Text-transform"

From Htmlpedia
Jump to: navigation, search
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
==CSS 1 property: text-transform==
 
==CSS 1 property: text-transform==
  
This article is a stub for the property text-transform. Please help us improve HTMLpedia by improving this article.
+
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:
  
* List
+
* none (default)
* of
+
* capitalize
* values
+
* uppercase
 +
* lowercase
  
 
===Example===
 
===Example===
  
 
<good><pre>&lt;style type="text/css"&gt;
 
<good><pre>&lt;style type="text/css"&gt;
     element { text-transform: value; }
+
     #html_id { text-transform: uppercase; }
 
&lt;/style&gt;
 
&lt;/style&gt;
 
...
 
...
&lt;element attribute="foo"&gt;Contents&lt;/element&gt;</pre></good>
+
&lt;p id="html_id"&gt;Contents&lt;/p&gt;</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.
  
; IE 3 : Support is Unknown
+
{| class="wikitable sortable" border="1"
; IE 4 : Support is Unknown
+
! Browser !! text-transform support
; IE 5 : Support is Unknown
+
|-
; IE 5.5 : Support is Unknown
+
| IE 3
; IE 6 : Support is Unknown
+
| unknown
; IE 7 : Support is Unknown
+
|-
; NS 3 : Support is Unknown
+
| IE 4
; NS 4 : Support is Unknown
+
| unknown
; NS 4.5 : Support is Unknown
+
|-
; NS 6 : Support is Unknown
+
| IE 5
; NS 7 : Support is Unknown
+
| unknown
; NS 8 : Support is Unknown
+
|-
; Firefox 1 : Support is Unknown
+
| IE 5.5
; Firefox 1.5 : Support is Unknown
+
| unknown
; Firefox 2 : Support is Unknown
+
|-
; Mozilla : Support is Unknown
+
| IE 6
; Opera 6 : Support is Unknown
+
| unknown
; Opera 7 : Support is Unknown
+
|-
; Opera 8 : Support is Unknown
+
| IE 7
; Opera 9 : Support is Unknown
+
| <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

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

Good
<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