text-transform
==============

A propriedade de CSS **`text-transform`** especifica como capitalizar um texto de um elemento. Pode ser usado para que o texto apareça com todas as letras maiúsculas ou todas minúsculas, ou com cada palavra em maiúscula.


```css
/\* Keyword values \*/
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/\* Global values \*/
text-transform: inherit;
text-transform: initial;
text-transform: unset;
```


The `text-transform` property takes into account language-specific case mapping rules, like:

* in Turkic 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 put 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 capitalised, 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`)

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

Support for these specific cases vary from one browser to the other, so check the browser compatibility table.

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Syntax
------

`capitalize`

Is a keyword forcing the first *letter* of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general categories 
Experimental
 : it excludes any punctuation marks or symbols at the beginning of the word.

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

**Nota:** The `capitalize` keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and \_ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like `ⓐ` to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The `capitalize` line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.

`uppercase`

Is a keyword forcing all characters to be converted to uppercase.

`lowercase`

Is a keyword forcing all characters to be converted to lowercase.

`none`

Is a keyword preventing the case of all characters to be changed.

`full-width` 
Experimental

Is a keyword forcing the writing of a character — mainly ideograms and latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

### Formal syntax
```

text-transform =   
  none                                                | (en-US)  
  [ (en-US) capitalize | (en-US) uppercase | (en-US) lowercase ] (en-US) || (en-US) full-width || (en-US) full-size-kana  | (en-US)  
  math-auto                                             
  
```

Examples
--------

### Example using "none"


```html
<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>
```



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


This demonstrates no text transformation.

### `capitalize` (General)


```html
<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>
```



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


This demonstrates text capitalization.

### `capitalize` (Punctuation)


```html
<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>
```



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


This demostrates 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.

### `capitalize` (Symbols)


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



```css
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.

### `capitalize` (Dutch *ij* digraph)


```html
<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>
```



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


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

### `uppercase` (General)


```html
<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>
```



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


This demonstrates transforming the text to uppercase.

### `uppercase` (Greek Vowels)


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



```css
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.

### `lowercase` (General)


```html
<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>
```



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


This demonstrates transforming the text to lowercase.

### `lowercase` (Greek Σ)


```html
<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>
```



```css
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.

### `full-width` (General)


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



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


Some characters exists 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.

Specifications
--------------

| Specification |
| --- |
| CSS Text Module Level 3 # text-transform |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-variant` (en-US)