Atributo dir do HTML
O atributo dir faz parte dos Atributos Globais e especifica a direção do texto do conteúdo de um elemento. Leia e descubra em quais elementos ele pode ser usado.
O atributo dir do HTML especifica a direção de base do texto do conteúdo de um elemento. Ele é essencial para exibir corretamente o HTML em escritas da direita para a esquerda (RTL), como árabe, hebraico, persa e urdu. Centenas de milhões de pessoas leem idiomas escritos nesses sistemas, portanto definir a direção corretamente é uma parte fundamental da internacionalização.
dir é um Atributo Global, podendo ser usado em qualquer elemento HTML. O valor utilizado por um elemento é herdado do ancestral mais próximo que possui dir definido, recorrendo a ltr caso nenhum o tenha.
Valores
O atributo dir pode ter três valores:
ltr— direção do texto da esquerda para a direita (o padrão na maioria dos navegadores). Usado para escritas latina, cirílica, grega, CJK e a maioria das demais.rtl— direção do texto da direita para a esquerda. Usado para árabe, hebraico e escritas semelhantes.auto— permite que o navegador decida com base no conteúdo, usando a heurística do primeiro caractere direcional forte (veja o aviso abaixo).
Sintaxe
<tag dir="ltr | rtl | auto">content</tag>Definindo a direção do documento com dir em <html>
O uso mais comum e importante de dir é no elemento <html>. Isso define a direção de base para toda a página, que todos os elementos herdam. Para uma página em árabe ou hebraico, você deve sempre combinar dir="rtl" com o atributo lang correspondente:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا مثال على نص يُكتب من اليمين إلى اليسار.</p>
</body>
</html>Como dir="rtl" está em <html>, o título, o parágrafo, os marcadores de lista, a posição da barra de rolagem e o alinhamento padrão do texto fluem da direita para a esquerda sem marcação adicional.
Exemplo: efeito RTL visível
O exemplo original colocava dir="rtl" em texto em inglês, onde o efeito mal é perceptível. A direção só é óbvia com texto real em escrita RTL ou com pontuação mista. Compare estes parágrafos:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dir attribute</title>
</head>
<body>
<p dir="ltr">שלום עולם — Hebrew greeting (forced ltr)</p>
<p dir="rtl">שלום עולם — Hebrew greeting (rtl)</p>
<p dir="auto">שלום עולם — Hebrew greeting (auto)</p>
</body>
</html>No parágrafo rtl, o hebraico flui da direita para a esquerda e o texto e a pontuação subsequentes são reordenados adequadamente. No parágrafo auto, o navegador detecta o primeiro caractere forte (hebraico) e escolhe rtl automaticamente.
Quando definir ltr explicitamente
Definir dir="ltr" em um elemento filho é útil para sobrescrever uma direção rtl herdada. Por exemplo, dentro de uma página em árabe (rtl), você pode ter um bloco de código, uma URL ou um campo de formulário em inglês que deve permanecer da esquerda para a direita:
<html lang="ar" dir="rtl">
<body>
<p>عنوان الموقع:</p>
<p dir="ltr">https://www.w3docs.com/learn-html</p>
</body>
</html>Sem dir="ltr", a URL herdaria a direção rtl da página e sua pontuação poderia ser reordenada visualmente de maneiras confusas.
Uma observação sobre auto
auto é conveniente para conteúdo gerado pelo usuário (comentários, nomes de usuário, resultados de pesquisa) quando você não sabe o idioma com antecedência. Mas ele depende de uma heurística simples: o navegador varre em busca do primeiro caractere direcional forte e usa isso para escolher a direção do elemento inteiro. Isso pode estar errado — por exemplo, um comentário que começa com um emoji, um número ou uma palavra em latim, mas é majoritariamente em árabe, será exibido da esquerda para a direita. Para isolamento por string de texto com direção desconhecida, prefira o elemento <bdi>, que isola o texto e pode aplicar auto.
dir vs. <bdo>, <bdi> e direction CSS
Essas ferramentas são relacionadas, mas resolvem problemas diferentes:
- Atributo
dir— define a direção de base que o elemento e seus filhos herdam. O navegador ainda aplica o algoritmo bidirecional Unicode (bidi) para reordenar trechos com direções mistas. <bdo>— substituição bidirecional. Força uma única direção e desativa a reordenação bidi automática para seu conteúdo. Use quando precisar inverter caracteres independentemente de sua direção natural.<bdi>— isolamento bidirecional. Isola um trecho de texto para que sua direção não afete o texto ao redor — ideal para incorporar conteúdo imprevisível de usuários.- CSS
direction— o equivalente na camada de estilo do atributodir. O atributodirdo HTML é geralmente preferido porque também informa tecnologias assistivas e o algoritmo bidi, enquanto o CSS sozinho nem sempre o faz. Quando ambos estão presentes, o atributo geralmente mapeia para o mesmo valor calculado.
Suporte nos navegadores
O atributo dir é suportado em todos os navegadores modernos há bastante tempo, portanto você pode usá-lo sem alternativas de fallback.