docs.rodeo

MDN Web Docs mirror

text-transform

{{CSSRef}} 

The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.

{{EmbedInteractiveExample("pages/css/text-transform.html")}} 

The text-transform property takes into account language-specific case mapping rules such as the following:

The language is defined by the lang HTML attribute or the xml:lang XML attribute.

[!NOTE] Support for language-specific cases varies between browsers, so check the browser compatibility table.

Syntax

/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;

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

Accessibility

Large sections of text set with a text-transform value of uppercase may be difficult for people with cognitive concerns such as Dyslexia to read.

Formal definition

{{CSSInfo}} 

Formal syntax

{{csssyntax}} 

Examples

Example using “none”

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: none;
}
strong {
  float: right;
}

This demonstrates no text transformation.

{{ EmbedLiveSample('Example using "none"', '100%', '100px') }} 

Example using “capitalize” (general)

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

This demonstrates text capitalization.

{{ EmbedLiveSample('Example using "capitalize" (general)', '100%', '100px') }} 

Example using “capitalize” (punctuation)

<p>
  Initial String
  <strong
    >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
  >
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

This demonstrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

{{ EmbedLiveSample('Example using "capitalize" (punctuation)', '100%', '100px') }} 

Example using “capitalize” (Symbols)

<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

{{ EmbedLiveSample('Example using "capitalize" (symbols)', '100%', '100px') }} 

Example using “capitalize” (Dutch ij digraph)

<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span lang="nl"
      >The Dutch word: "ijsland" starts with a digraph.</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

This demonstrates how the Dutch ij digraph must be handled like one single letter.

{{ EmbedLiveSample('Example using "capitalize" (Dutch ij digraph)', '100%', '100px') }} 

Example using “uppercase” (general)

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

This demonstrates transforming the text to uppercase.

{{ EmbedLiveSample('Example using "uppercase" (general)', '100%', '100px') }} 

Example using “uppercase” (Greek vowels)

<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
  >
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

This demonstrates how Greek vowels except disjunctive eta should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.

{{ EmbedLiveSample('Example using "uppercase" (Greek vowels)', '100%', '100px') }} 

Example using “lowercase” (general)

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

This demonstrates transforming the text to lowercase.

{{ EmbedLiveSample('Example using "lowercase" (general)', '100%', '100px') }} 

Example using “lowercase” (Greek Σ)

<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
    ></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

This demonstrates how the Greek character sigma (Σ) is transformed into the regular lowercase sigma (σ) or the word-final variant (ς), according the context.

{{ EmbedLiveSample('Example using "lowercase" (Greek Σ)', '100%', '100px') }} 

Example using “lowercase” (Lithuanian)

<p>
  Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

This demonstrates how the Lithuanian letters Ĩ and J́ retain their dot when transformed to lowercase.

{{ EmbedLiveSample('Example using "lowercase" (Lithuanian)', '100%', '100px') }} 

Example using “full-width” (general)

<p>
  Initial String
  <strong
    >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
  >
</p>
<p>
  text-transform: full-width
  <strong
    ><span
      >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
    ></strong
  >
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Some characters exist in two formats: normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.

{{ EmbedLiveSample('Example using "full-width" (general)', '100%', '175px') }} 

Example using “full-width” (Japanese half-width katakana)

<p>
  Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

The Japanese half-width katakana was used to represent katakana in 8-bit character codes. Unlike regular (full-width) katakana characters, a letter with dakuten (voiced sound mark) is represented as two code points, the body of letter and dakuten. The full-width combines these into a single code point when converting these characters into full-width.

{{ EmbedLiveSample('Example using "full-width" (Japanese half-width katakana)', '100%', '175px') }} 

Example using “full-size-kana”

<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>

p:nth-of-type(2) {
  text-transform: full-size-kana;
}

{{ EmbedLiveSample('Example using "full-size-kana"', '100%', '175px') }} 

Example using “math-auto”

In this example, we use pure HTML markup to create a math formula:

<div>
  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  = 1
</div>

We give every .math-id element text-transform: math-auto. However, note how only the x characters become italic, while the sin and cos remain unchanged.

.math-id {
  text-transform: math-auto;
}

{{ EmbedLiveSample('Example using "math-auto"', '', '100px') }} 

However, you are encouraged to use MathML for mathematical formulas, as it provides a more robust and accessible way to represent mathematical content. Here’s the same formula using MathML:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN