Propriedade CSS text-transform
Use a propriedade text-transform para controlar os efeitos de capitalização do texto de um elemento. Veja os valores e exemplos práticos.
A propriedade CSS text-transform controla a capitalização do texto de um elemento — ela pode forçar o texto para MAIÚSCULAS, minúsculas ou Capitalizar Cada Palavra, sem alterar o HTML subjacente. Esta é uma mudança puramente visual: o texto de origem permanece exatamente como foi escrito, portanto leitores de tela, copiar e colar e envios de formulários continuam vendo a caixa original.
Esta página aborda todos os valores de text-transform, as armadilhas do valor capitalize, o mapeamento de caixa específico por idioma e exemplos executáveis para cada valor.
Por que usar text-transform em vez de digitar as letras diretamente?
Manter a capitalização no CSS em vez de na marcação mantém o conteúdo limpo e flexível:
- Uma única fonte da verdade. Escreva títulos e rótulos em caixa de frase normal; deixe o CSS deixá-los em maiúsculas apenas onde o design exige. Altere o design depois em um único lugar.
- Amigável à localização. Tradutores editam texto legível, não letras maiúsculas gritantes.
- Acessibilidade e SEO. Mecanismos de busca e tecnologias assistivas leem o texto real, não os glifos estilizados. Aplicar maiúsculas visualmente a um rótulo de
<button>desta forma ainda expõe um nome acessível em caixa normal.
Mapeamento de caixa específico por idioma
text-transform segue as regras de capitalização do idioma do conteúdo (o atributo lang), não uma conversão ASCII simples. Alguns casos notáveis:
- Línguas túrquicas — turco (
tr), azerbaijano (az), tártaro da Crimeia (crh), tártaro do Volga (tt) e bascortostano (ba) têm i com ponto e sem ponto, gerando dois pares de caixa: i/İ e ı/I. - Alemão (
de) — o ß se torna SS em maiúsculas. - Grego (
el) — quando uma palavra inteira é colocada em maiúsculas, o acento da vogal é removido (ά → Α), exceto para a eta disjuntiva (ή/Ή).
O suporte dos navegadores para essas regras específicas por idioma varia, portanto teste se o seu público depende delas.
Os valores full-width e full-size-kana são experimentais. full-width tem suporte parcial no WebKit, enquanto full-size-kana tem suporte muito limitado.
| Valor inicial | none |
|---|---|
| Aplicável a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.textTransform = "capitalize"; |
Sintaxe
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;O valor "uppercase"
uppercase converte todos os caracteres para a forma maiúscula — o uso mais comum é em títulos, botões e rótulos. No exemplo abaixo, o parágrafo e o texto do <div> são forçados a maiúsculas enquanto o HTML mantém sua caixa normal:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Resultado
Os valores "capitalize" e "lowercase"
capitalize coloca em maiúsculas a primeira letra de cada palavra e deixa o restante de cada palavra inalterado. Um limite de "palavra" é qualquer espaço em branco, pontuação ou símbolo, portanto aspas e hifens também iniciam novas palavras (por exemplo, mother-in-law torna-se Mother-In-Law). Duas armadilhas comuns:
- Ele afeta apenas a primeira letra —
iPhonepermaneceIPhone, nãoIphone, porque a caixa existente das letras restantes é preservada. - Um dígito não é considerado uma letra, portanto a primeira letra após um número não é capitalizada.
3rdpermanece3rd, nunca3Rd.
lowercase é o oposto de uppercase: força todos os caracteres para minúsculas. No exemplo abaixo, o primeiro <div> usa capitalize e o segundo usa lowercase:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br />
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>O valor "none"
none é o padrão — o texto é exibido exatamente como escrito, sem nenhum efeito de capitalização. Você usa principalmente para cancelar um text-transform que um elemento herdaria de outro, já que a propriedade é herdada por padrão.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none" value:
</h2>
</body>
</html>O valor "initial"
initial redefine a propriedade para o padrão definido pelo CSS (none), independentemente de qualquer valor herdado. O exemplo abaixo redefine text-transform em um parágrafo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial" value:
</p>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Nenhum efeito de capitalização. Este é o valor padrão desta propriedade. | Experimente » |
| capitalize | Coloca em maiúsculas o primeiro caractere de cada palavra. | Experimente » |
| uppercase | Coloca em maiúsculas todos os caracteres de cada palavra. | Experimente » |
| lowercase | Coloca em minúsculas todos os caracteres de cada palavra. | Experimente » |
| full-width | Coloca a escrita de um caractere (ideogramas e scripts latinos) dentro de um quadrado, permitindo alinhá-los com texto chinês ou japonês. | Experimente » |
| full-size-kana | Converte todos os pequenos caracteres Kana para o Kana de tamanho completo, para compensar problemas de legibilidade em tamanhos de fonte pequenos usados tipicamente em ruby. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
text-transform é uma das várias ferramentas CSS para moldar como o texto aparece. Combine-a com estas propriedades relacionadas:
- text-decoration — sublinhado, linha acima ou tachado no texto.
- font-variant — renderiza o texto como versaletes (uma variante tipográfica real, diferente de maiúsculas visuais).
- letter-spacing e word-spacing — combina bem com títulos em maiúsculas, que geralmente ficam mais legíveis com espaçamento extra.
- text-align — controla o alinhamento horizontal do texto transformado.
- ::first-letter e ::first-line —
text-transformtambém se aplica a esses pseudo-elementos, úteis para efeitos de capitular.