The CSS text-transform Property

Overview

The text-transform property is used to modify the capitalization of text elements. It enables developers to apply various capitalization styles, such as uppercase, lowercase, or capitalize. The property could prove useful for formatting text consistently across a website or application. However, it's crucial to consider the implications of using text-transform on content readability and localization when working with different languages.

Examples and Usage

To demonstrate the text-transform property, we'll use the following text to apply different capitalization styles: none, capitalize, uppercase, and lowercase.

HTML Structure

<p class="none">Learn how to build for the web, and have some fun with Web Reference</p>

<p class="capitalize">Learn how to build for the web, and have some fun with Web Reference </p>

<p class="uppercase">Learn how to build for the web, and have some fun with Web Reference</p>

<p class="lowercase">Learn how to build for the web, and have some fun with Web Reference </p>

CSS Styling

p {
     /* Set font */
    font-family: UI Monospace, monospace;
}

.none {
  /* No text transformation applied */
  text-transform: none;
}

.capitalize {
  /* Capitalize the first letter of each word */
  text-transform: capitalize;
}

.uppercase {
  /* Transform all letters to uppercase */
  text-transform: uppercase;
}

.lowercase {
  /* Transform all letters to lowercase */
  text-transform: lowercase;
}

These examples show us the different capitalization styles that can be applied. By applying the corresponding class to each paragraph, we can observe the effects of each transformation on the text.

The property can have different behavior across languages and specific use cases. For instance, it might not follow language-specific title casing conventions, and its behavior could vary when applied to characters from non-Latin scripts. Always consider potential language and context issues when using it.

Values

The text-transform property can accept the following values:

Value	Description
`none`	No capitalization change is applied.
`capitalize`	The first letter of each word is capitalized.
`uppercase`	All characters are transformed to uppercase.
`lowercase`	All characters are transformed to lowercase.
`full-width`	Transforms characters, mainly ideograms and Latin scripts, into squares for alignment in East Asian scripts like Chinese or Japanese.
`full-size-kana`	Converts small Kana characters to full-size Kana for improved legibility, typically used in `<ruby>` annotation text.

Note: Don't expect capitalize to follow language-specific title casing conventions (e.g., skipping articles in English). Also, the behavior of capitalize has been more precisely defined in CSS Text Module Level 3, resolving previous inconsistencies between browsers.

Associated Properties

font-variant
text-indent
letter-spacing
word-spacing

Tips and Tricks

Applying text-transform indiscriminately to content might lead to grammar issues in different languages. It's better to provide grammar-correct text for each language rather than relying solely on CSS transformations.
Text set entirely in uppercase can be difficult for people with cognitive concerns, such as dyslexia, to read. Be mindful of accessibility when using the uppercase value for large sections of text.
The capitalize value will capitalize words inside single or double quotes and the first letter after a hyphen, but it won't capitalize the first letter after a number.
The capitalize value only affects the first letters of words and won't change the case of the rest of the letters in a word.
Using text-transform can be helpful for formatting text consistently, like capitalizing proper nouns in usernames or ensuring blog post titles are in title case.
The none value can be used to prevent text from being manipulated by inherited text-transform styles.
Be cautious when using text-transform with non-Latin scripts or languages with case distinctions, as the property may not behave as expected across different browsers.

Browser Compatibility

In Safari, text-transform may not work with ::first-line pseudo-elements (including the old single-colon syntax). See the WebKit bug 3409 for more details.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes	Yes*	Yes*

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)