Lynxsia IT Solution

CSS Text Transform

CSS text-transform properties is used to specify the capitalization of the text. It may be used to show text in uppercase, lowercase, etc.

Text Transform Values

capitalize: Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged.

uppercase: Is a keyword that converts all characters to uppercase.

lowercase: Is a keyword that converts all characters to lowercase.

none: Is a keyword that prevents the case of all characters from being changed.

Global values: inherit, initial, revert, revert-layer, unset.

					 
        
          /* Keyword values */
          text-transform: none;
          text-transform: capitalize;
          text-transform: uppercase;
          text-transform: lowercase;

          /* Global values */
          text-transform: inherit;
          text-transform: initial;
          text-transform: revert;
          text-transform: revert-layer;
          text-transform: unset;

Test Code Online

Key Points To Remember

The text-transform property takes into account language-specific case mapping rules.

In languages, like Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/I.

In German (de), the ß becomes SS in uppercase.

In Dutch (nl), the ij digraph becomes IJ, even with text-transform: capitalize, which only puts the first letter of a word in uppercase.

In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ).

In Greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. When applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context.

in Irish (ga), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example text-transform: uppercase will change ar aon tslí to AR AON tSLÍ and not, as one might expect, AR AON TSLÍ (Firefox only). In some cases, a hyphen is also removed upon uppercasing: an t-uisce transforms to AN tUISCE (and the hyphen is correctly reinserted by text-transform: lowercase).

Authors should not expect capitalize to follow language-specific title casing conventions (such as skipping articles in English).

View CSS PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Ads

CSS Text Transform

CSS Text Transform

Text Transform Values

Key Points To Remember

Report Us

Solutions

Prices

Industries

Resources

Lynxsia IT Solutions