[This documentation is preliminary and is subject to change.]
Sets or retrieves the rendering of the text in the object.
 |
Syntax
text-transform: capitalize | uppercase | lowercase | none
Property values
A variable of type String that specifies or receives one of the following values:
none-
Default. Text is not transformed.
capitalize-
Transforms the first character of each word to uppercase.
uppercase-
Transforms all the characters to uppercase.
lowercase-
Transforms all the characters to lowercase.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value |
Standards information
- CSS 2.1, Section 5.4.5
Examples
The following examples use the text-transform attribute and the text-transform property to transform a block of text from lower case to upper case when the user moves the mouse over the text. The text transforms back to lower case when the user clicks the text.
This example uses three calls to an embedded (global) style sheet to transform the text.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/text-transform.htm
<STYLE>
.transform1 { text-transform:uppercase }
.transform2 { text-transform:lowercase }
.transform3 { text-transform:none }
</STYLE>
</HEAD>
<BODY>
<DIV STYLE="font-size:14"
onmouseover="this.className='transform1'"
onclick= "this.className='transform2'"
ondblclick="this.className='transform3'">
:
</DIV>
This example uses inline scripting to transform the text when different mouse events occur.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/textTransform.htm
<DIV STYLE="font-size:14"
onmouseover="this.style.textTransform='uppercase'"
onmouseout="this.style.textTransform='lowercase'"
onclick="this.style.textTransform='none'">
:
</DIV>
Build date: 3/14/2012