Propriedade CSS direction
A propriedade CSS direction define em qual direção o texto deve fluir. Veja exemplos e experimente você mesmo.
A propriedade CSS direction define a direção de escrita base do texto e do conteúdo inline — da esquerda para a direita (ltr, o padrão) ou da direita para a esquerda (rtl). É essa propriedade que faz com que scripts da direita para a esquerda, como o árabe, hebraico, persa e urdu, sejam exibidos corretamente.
Esta página explica o que direction controla, como ela difere do atributo HTML dir, quando você realmente precisa dela e as armadilhas mais comuns.
O que direction afeta
Definir direction em um elemento de nível de bloco altera várias coisas ao mesmo tempo:
- A direção de texto base do conteúdo do elemento.
- O alinhamento padrão do texto dentro desse elemento (
rtlfaz o texto alinhar à direita,ltrà esquerda), a menos que você substitua comtext-align. - A ordem em que as células de tabela fluem dentro de uma linha (a mais à direita primeiro para
rtl). - A direção dos embeddings bidirecionais criados em conjunto com a propriedade
unicode-bidi.
direction também influencia o lado em que marcadores de lista, barras de rolagem e estouro aparecem, porque o início inline do elemento é invertido.
direction vs. o atributo HTML dir
Em documentos reais, a direção geralmente é definida com o atributo HTML dir (<html dir="rtl">) em vez da propriedade CSS, pois dir carrega significado semântico do qual a tecnologia assistiva e o algoritmo bidi do navegador dependem.
Os dois não são perfeitamente equivalentes: ao contrário do atributo HTML dir, a propriedade CSS direction não é herdada por células de tabela a partir de colunas de tabela — as células de tabela vivem dentro de linhas, não de colunas, portanto uma célula herda sua direção do próprio elemento de tabela.
Para alterar a ordem do layout puramente visual (itens flex/grid, margens, padding), prefira as propriedades lógicas modernas e writing-mode. Use direction especificamente para a direção de leitura do texto. Veja writing-mode.
| Valor Inicial | ltr |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Sim. |
| Animável | Discreto. |
| Versão | CSS2 |
| Sintaxe DOM | object.style.direction = "rtl"; |
Sintaxe
Sintaxe da propriedade CSS direction
direction: ltr | rtl | initial | inherit;Exemplo: comparando ltr e rtl
O <p> mantém a direção ltr padrão; o <div> é alterado para rtl, de modo que seu texto começa na borda direita e é lido em direção à esquerda.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
direction: rtl;
}
</style>
</head>
<body>
<p>As you can see, this text is written with default direction.</p>
<div>However, this text is written from right to left as we defined.</div>
</body>
</html>Resultado
![Propriedade CSS direction](https://api.w3docs.com/uploads/media/default/0001/03/576170a14b5c571d29380b8bdc5880bafac595b3.png "CSS direction property rtl example" =420x)
No exemplo acima, o valor rtl é utilizado, portanto o texto no <div> flui da direita para a esquerda e se alinha à direita por padrão.
Exemplo: uma lista e citação da direita para a esquerda
Como direction inverte o início inline, os marcadores de lista e o alinhamento de texto padrão se movem para o lado direito — exatamente o que você deseja para um trecho em árabe ou hebraico.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.rtl {
direction: rtl;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<ul class="rtl">
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>Os marcadores são renderizados à direita e o texto se alinha à direita — sem nenhuma regra text-align.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| ltr | Indica que a direção do texto será da esquerda para a direita. Este é o valor padrão da propriedade. | Experimente » |
| rtl | Indica que a direção do texto será da direita para a esquerda. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Armadilhas comuns
directionpor si só não afeta a ordem das caixas inline. Para reordenar de fato textos mistos da esquerda para a direita e da direita para a esquerda, você também precisa deunicode-bidi(por exemplo,unicode-bidi: bidi-override).- Alinhamento vs. direção.
rtlaltera o alinhamento padrão, mas uma regra explícita detext-alignainda prevalece. Se o texto estiver alinhado de forma "errada" após trocar a direção, verifique se há umtext-alignconflitante. - É herdado. Defina
directionuma vez em um contêiner de alto nível (ou via<html dir="rtl">) e toda a subárvore o herda, exceto as células de tabela, conforme mencionado acima.
Propriedades relacionadas
unicode-bidi— controle refinado sobre texto bidirecional.writing-mode— fluxo vertical vs. horizontal e direção de bloco.text-align— alinhamento horizontal explícito do conteúdo inline.