Css text transform is a powerful property that allows you to manipulate the text's appearance in various ways.
You can use text transform to change the case of the text, such as converting it to uppercase or lowercase. For example, the text "Hello World" can be transformed into "HELLO WORLD" or "hello world" using the text-transform property.
Browser support for text transform is good, with all major browsers supporting it, including Chrome, Firefox, Safari, and Edge.
What Is It and How Does It Work?
The CSS text-transform property is a powerful tool that allows you to control the capitalization of text. It can be used to change the text to uppercase, lowercase, or capitalize the first letter of each word.
This property works by taking the original text and transforming it based on the value you set. For example, if you set the value to 'uppercase', all the letters in the text will be transformed to uppercase, regardless of how they were originally typed.
You can use the text-transform property to make text more visually appealing, such as capitalizing the first letter of each word in a heading.
Browser Support
Firefox is the only browser that supports text-transform: full-width;, which can help improve the readability of text that includes a mixture of latin and East Asian scripts.
The CSS text-transform property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported in older versions of these browsers, so it's always a good idea to check the browser compatibility before using this property.
In Firefox, you can take advantage of language-specific capitalization rules for Turkic languages, German, Dutch, and Greek, which are not supported by other browsers.
The table below shows the browser support for text-transform:
Note: 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.
Text Transform Options
You can use the CSS text-transform property to change the case of text in various ways. The options include lowercase, uppercase, capitalize, none, inherit, and more.
The lowercase value makes all the letters in the selected text lowercase. This is useful for creating a clean and simple look.
You can use the uppercase value to make all the letters in the selected text uppercase, which is great for headings and titles.
The capitalize value capitalizes the first letter of each word in the selected text. This is perfect for creating title case.
You can use the none value to leave the text's case and capitalization exactly as it was entered, which is ideal for preserving the original text.
The inherit value gives the text the case and capitalization of its parent. This is useful for maintaining consistency throughout your design.
Here are the text transform options in a nutshell:
- lowercase: all lowercase letters
- uppercase: all uppercase letters
- capitalize: first letter of each word capitalized
- none: original case and capitalization
- inherit: inherits case and capitalization from parent
Applying Text Transform
You can use the CSS text-transform property to change the case of text, making it easier to style and format your content.
To change text to uppercase, simply set the value of the text-transform property to 'uppercase'. This will transform all the text within the specified element to uppercase.
The text-transform property has several other values, including 'lowercase', 'capitalize', and 'none'. The 'lowercase' value makes all the letters in the selected text lowercase, while the 'capitalize' value capitalizes the first letter of each word.
Here are the different text-transform values:
- lowercase: makes all the letters in the selected text lowercase.
- uppercase: makes all the letters in the selected text uppercase.
- capitalize: capitalizes the first letter of each word in the selected text.
- none: leaves the text’s case and capitalization exactly as it was entered.
- inherit: gives the text the case and capitalization of its parent.
You can also use the ::first-letter selector to apply a different style to the first character of a string, allowing you to create a "calligraphy effect" where the first letter of a chapter is large and decorative.
To capitalize the first letter of each word, simply set the value of the text-transform property to 'capitalize'. This will transform the first letter of each word within the specified element to uppercase.
Supported in All Browsers?
The CSS text-transform property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported in older versions of these browsers.
Firefox stands out for supporting language-specific capitalization rules for certain languages, such as Turkic languages, German, Dutch, and Greek, which other browsers don't support.
Safari has a known issue with text-transform not working with ::first-line pseudo-elements, but you can find more details about this issue on the WebKit bug 3409.
Here's a quick rundown of browser support:BrowserChromeEdgeSafariFirefoxOperaInternet ExplorerSupportYes*Yes*Yes*YesYes*Yes*
Internet Explorer support data may be outdated, and early Edge versions used EdgeHTML, leading to mismatched version numbers.
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.
Here are some key points to keep in mind when using text-transform:
- 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.
- The none value can be used to prevent text from being manipulated by inherited text-transform styles.
- 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.
Frequently Asked Questions
How to flip text in CSS?
To flip text in CSS, use the "transform: rotateX(180deg);" property inside a class, such as "mirror". This simple trick can add a unique visual effect to your text.
How to make text all caps in CSS?
To make text all caps in CSS, use the text-transform property with the value uppercase. This will instantly convert all text within the targeted element to uppercase.
Featured Images: pexels.com