Propriedade writing-mode
Última atualização: 2026-09-13
writing-mode Propriedade writing-mode
A propriedade writing-mode do CSS define a direção geral do layout do texto, com suporte aos modos horizontal (horizontal-tb) e vertical (vertical-rl, vertical-lr). Ela é usada para criar texto vertical como em livros tradicionais chineses ou japoneses e também altera como os elementos de bloco e inline se dispõem, sendo uma ferramenta importante para a tipografia do Leste Asiático.
| Categoria | |
|---|---|
| Valor Inicial | horizontal-tb |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
writing-mode: horizontal-tb | vertical-rl | vertical-lr;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
horizontal-tb | vertical-rl | vertical-lr | Palavra-chave | Valores da direção de escrita |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| writing-mode | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Suportado em todos os principais navegadores | |||||
Dica： vertical-rl é o layout tradicional dos livros chineses (de cima para baixo, da direita para a esquerda); vertical-lr é usado em alguns layouts mongóis e japoneses.
Importante： writing-mode altera o mapeamento de direção das propriedades lógicas do CSS: por exemplo, width passa a corresponder a block-size e height a inline-size em um layout vertical.
❓ Perguntas Frequentes
QQual é a diferença entre writing-mode e direction no CSS?
Adirection apenas altera o fluxo do texto (esquerda ou direita), enquanto os elementos permanecem horizontais; writing-mode muda toda a direção do layout, fazendo os elementos de bloco empilharem na vertical e o conteúdo inline também ser exibido na vertical.
QOs caracteres giram em um modo de escrita vertical como vertical-rl?
AEm vertical-rl e vertical-lr os caracteres permanecem na vertical (em pé), apenas organizados de cima para baixo. Se você precisar que os glifos girem 90 graus, use adicionalmente text-orientation: sideways.
QComo crio texto chinês vertical usando a propriedade writing-mode?
ADefina writing-mode: vertical-rl e o texto flui de cima para baixo, da direita para a esquerda, imitando o layout tradicional dos livros chineses; vertical-lr produz texto vertical fluindo da esquerda para a direita. Por padrão, os caracteres permanecem na vertical e sem rotação.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
