CSS text-transform

The text-transform CSS property sets the capitalization of text, ignoring the case of the text in the document. It allows to either force capitalizing the first letter of each word or force all text to lowercase or uppercase.

text-transform: none|capitalize|uppercase|lowercase
text-transform: uppercase;    /* all caps */
text-transform: capitalize;   /* first letter of each word */

A value of capitalize will capitalize the first letter of each word, leaving the rest as is. uppercase will make all the text uppercase. text-transform doesn't follow language conventions like not capitalizing articles in English.

Browser Support: Full

lowercase/uppercase with CSS

To capitalize all characters simply use the uppercase value. Every letter will be trasformed. Remember the property will be inherited. Apply text-transform: none on child elements to use the case of the document.

p.upper {
text-transform: uppercase;
} p.lower {
text-transform: lowercase;
}

Hello, I'm in uppercase.

Hello, I'm in lowercase.

text-transform: capitalize

The capitalize value doesn't work exactly in the way one expects at first. It will always capitalize the first letter of each word but it won't make the rest lowercase.

<p class="capitalize" >this text was all lowercase AND THIS WAS ALL CAPS</h3>
p.capitalize {
text-transform: capitalize;
}

this text was all lowercase AND THIS WAS ALL CAPS

There's currently no CSS way to capitalize the first letter only if the text has all-uppercase words.

CSS Title Case

Title case is the convention to capitalize the principal words in titles, while skipping prepositions, articles and conjunctions.

This is Title Case

There's no way to apply title case with CSS only. The front-end solution would be Javascript. See Convert string to title case with Javascript in Stackoverflow for several solutions.

text-transform vs font-variant

The font-variant: small-caps rule (see font-variant) is also used to capitalize text with an important difference from text-transform: uppercase:

Take the following example:
<p>This Text Is Capitalized With...</p>
The result using font-variant and text-transform is:

This Text Is Capitalized With font-variant: small-caps

This Text Is Capitalized With text-transform: uppercase

As you can see the small-caps property makes the text uppercase but all characters have the same height of the original text with default casing. text-transform gives full-height uppercase characters always.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>