This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

text-transform

Summary

This property transforms text for styling purposes. (It has no effect on the underlying content.)

Overview table

Initial value
none
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
as specified
Animatable
No

CSS Object Model Property
:

Percentages
no

Syntax

  • text-transform: capitalize
  • text-transform: full-width
  • text-transform: lowercase
  • text-transform: none
  • text-transform: uppercase

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.
full-width
Puts all characters in fullwidth form. If the character does not have a corresponding fullwidth form, it is left as is. This value is typically used to typeset Latin characters and digits like ideographic characters.

Examples

Examples using different values for text-transform

/*
    - text-transform property examples
    - explanations inline
*/

body {
    padding:50px;
    font-size:22px;
}

.text--uppercase {
    text-transform:uppercase; /* all uppercase characters */
}

.text--lowercase{
    text-transform: lowercase; /* all lowercase characters */
}

.text--capitalize{
    text-transform: capitalize; /* _first_ letter of each word is capitalized  */
}

.text--no-transform {
    text-transform: none; /* disables any other inherited text-transform */
}

View live example

Using text-transform also works on greek or german letters

/*
    - text-transform property examples
    - explanations inline
*/

body {
    padding:50px;
    font-size:22px;
}

.text--uppercase {
    text-transform:uppercase; /* works on non-latin characters as well */
}

View live example

Notes

When using text-transform: capitalize; authors should not expect capitalize to follow language-specific titlecasing conventions (such as skipping articles in English).

Related specifications

CSS Text Module Level 3
W3C Last Call Working Draft

See also

External resources

http://www.w3.org/TR/CSS2/text.html#caps-prop

http://www.w3.org/wiki/CSS/Properties/text-transform

Related pages

Attributions