Propriedade direction
Última atualização: 2026-09-13
direction Propriedade direction
A propriedade direction do CSS define a direção da escrita do texto — da esquerda para a direita (ltr) ou da direita para a esquerda (rtl). Ela afeta principalmente idiomas escritos da direita para a esquerda, como o árabe e o hebraico, e também altera o alinhamento do texto, a posição da barra de rolagem e o fluxo do layout. Em sites multilíngues, é preferível usar o atributo dir no elemento HTML em vez da propriedade CSS.
| Categoria | |
|---|---|
| Valor Inicial | ltr |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
direction: ltr | rtl;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
ltr | rtl | Palavra-chave | Direção do texto |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| direction | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Para idiomas RTL, use dir="rtl" diretamente no elemento HTML — é mais semântico e afeta automaticamente todo o fluxo do documento.
Importante： direction altera o mapeamento físico de propriedades lógicas como margin e padding; combiná-la com propriedades lógicas do CSS, como margin-inline-start, oferece melhor suporte à internacionalização.
❓ Perguntas Frequentes
QQual é a diferença entre direction e writing-mode no CSS?
Adirection controla o fluxo do texto na horizontal (da esquerda para a direita ou da direita para a esquerda); writing-mode controla a direção geral do layout do texto, horizontal ou vertical. Elas podem ser combinadas para produzir diferentes layouts tipográficos.
QPor que o layout da página muda depois que defino direction: rtl no CSS?
Adirection: rtl inverte o fluxo do texto, então o texto começa a partir da borda direita e a barra de rolagem também se move para a esquerda. Se você quiser apenas alterar o alinhamento do texto sem afetar o layout, use text-align em vez disso.
QComo configuro um layout da direita para a esquerda para textos em árabe ou hebraico no meu site?
AEscreva dir="rtl" no elemento <html> ou <body> — é mais semântico do que direction: rtl em CSS e também afeta o comportamento do navegador, como formulários e barras de rolagem. No CSS, você pode escrever direction: rtl e combiná-lo com unicode-bidi para textos mistos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
