Propriedade CSS writing-mode
Use a propriedade CSS writing-mode para definir a direção do fluxo do texto. Veja os valores da propriedade e experimente exemplos práticos.
A propriedade CSS writing-mode define se as linhas de texto são dispostas horizontalmente ou verticalmente, e em qual direção os blocos e linhas avançam.
Esta página explica o que a propriedade faz, os valores que aceita, quando utilizá-la na prática e como ela interage com propriedades relacionadas como text-orientation e direction.
O que writing-mode controla
writing-mode altera a direção do fluxo de bloco — a direção em que as caixas em nível de bloco (parágrafos, títulos, etc.) se empilham — e a direção de base inline em que os caracteres fluem dentro de uma linha. Em uma página em inglês normal, os blocos se empilham de cima para baixo e o texto dentro de uma linha flui da esquerda para a direita (horizontal-tb). Ao alternar para um valor vertical, todo esse modelo é rotacionado: as linhas correm de cima para baixo e se empilham da direita para a esquerda ou da esquerda para a direita.
Por remapear o significado de "início", "fim", "bloco" e "inline", writing-mode funciona em conjunto com as propriedades lógicas do CSS (margin-block, padding-inline, inset-block, entre outras), que seguem automaticamente o modo de escrita ativo em vez de ficarem vinculadas a lados físicos.
Quando devo usá-la?
- Scripts asiáticos verticais (chinês tradicional, japonês, coreano) que são escritos de cima para baixo, com colunas correndo da direita para a esquerda — use
vertical-rl. - Rótulos de UI rotacionados, como um cabeçalho de coluna lateral em uma tabela ou um rótulo de eixo vertical em um gráfico.
- Layouts editoriais ou estilo "revista" que intencionalmente posicionam um título ou destaque de lado.
Para os modos verticais, você quase sempre combina writing-mode com text-orientation para decidir se os caracteres latinos individuais permanecem na posição vertical ou são girados 90°.
Os navegadores modernos oferecem suporte completo à propriedade writing-mode sem prefixos de fornecedor.
| Valor Inicial | horizontal-tb |
|---|---|
| Aplica-se a | Todos os elementos, exceto grupos de linhas de tabela, grupos de colunas de tabela, linhas de tabela, colunas de tabela, contêiner de base ruby e contêiner de anotação ruby. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.writingMode = "vertical-lr"; |
Sintaxe
Valores de CSS writing-mode
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;O padrão é horizontal-tb. A propriedade é herdada, portanto, defini-la em um contêiner aplica-se a todos os descendentes, a menos que eles a substituam.
Exemplo da propriedade writing-mode com o valor horizontal-tb:
Exemplo de código CSS writing-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: horizontal-tb;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Resultado
Outro exemplo em que o conteúdo flui verticalmente de cima para baixo e da direita para a esquerda.
Exemplo da propriedade writing-mode com o valor vertical-rl:
Exemplo CSS writing-mode vertical-rl
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-rl;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>No exemplo a seguir, o conteúdo flui verticalmente de cima para baixo e da esquerda para a direita.
Exemplo da propriedade writing-mode com o valor vertical-lr:
Exemplo CSS writing-mode vertical-lr
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-lr;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Combinando com text-orientation
Em um modo de escrita vertical, text-orientation decide como cada glifo é rotacionado. A combinação mais comum mantém os caracteres CJK na posição vertical enquanto ainda flui a linha verticalmente:
.vertical {
writing-mode: vertical-rl;
text-orientation: upright; /* keep characters upright instead of rotated 90° */
}Sem text-orientation: upright, as letras latinas e os números são rotacionados 90° no sentido horário por padrão em um modo vertical.
Valores
horizontal-tb é o único valor horizontal. Os demais valores são todos verticais e diferem na direção em que as linhas se empilham e em como os glifos são orientados.
| Valor | Descrição |
|---|---|
| horizontal-tb | Padrão. O conteúdo flui horizontalmente da esquerda para a direita, e as linhas se empilham de cima para baixo. |
| vertical-rl | O conteúdo flui verticalmente de cima para baixo, e as linhas se empilham da direita para a esquerda. |
| vertical-lr | O conteúdo flui verticalmente de cima para baixo e horizontalmente da esquerda para a direita. |
| sideways-rl | Descontinuado no CSS Writing Modes Level 3. O conteúdo flui verticalmente de cima para baixo e todos os glifos são dispostos de lado voltados para a direita. |
| sideways-lr | Descontinuado no CSS Writing Modes Level 3. O conteúdo flui verticalmente de cima para baixo e todos os glifos são dispostos de lado voltados para a esquerda. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do seu elemento pai. |
Propriedades relacionadas
text-orientation— controla como os glifos individuais são rotacionados dentro de um modo de escrita vertical.direction— define a direção de base inline (LTR vs RTL) para o texto.text-align— alinha o conteúdo inline; as palavras-chavestart/endrespeitam o modo de escrita.transform— uma forma alternativa de rotacionar elementos visualmente, sem alterar o modelo de layout.