Tag HTML <bdo>
A tag HTML <bdo> força a direção do texto (ltr ou rtl), substituindo o algoritmo bidirecional do navegador. Aprenda o atributo dir com exemplos RTL/LTR.
A tag HTML <bdo> ("substituição bidirecional") força uma direção específica de texto, substituindo o algoritmo bidirecional (bidi) integrado do navegador. É mais útil quando você precisa exibir caracteres em uma ordem fixa da esquerda para a direita ou da direita para a esquerda, independentemente da direção natural do script a que esses caracteres pertencem.
Esta página aborda o que a substituição faz, o atributo dir obrigatório, exemplos práticos de RTL e LTR que você pode executar, o equivalente em CSS, suporte a navegadores e notas de acessibilidade.
Por que existe a substituição bidirecional
Por padrão, os navegadores lidam com texto de direção mista automaticamente usando o algoritmo bidirecional Unicode. Esse algoritmo analisa a direção inerente de cada caractere — letras latinas fluem da esquerda para a direita (LTR), enquanto letras árabes e hebraicas fluem da direita para a esquerda (RTL) — e os dispõe de acordo. Na maioria das vezes, isso é exatamente o que você quer.
<bdo> é a válvula de escape para os casos raros em que você precisa forçar a ordem visual em vez de deixar o algoritmo decidir. Ele substitui a direcionalidade inerente de cada caractere dentro dele. Esta é uma ferramenta deliberada e de baixo nível: use-a apenas quando você genuinamente precisar de uma ordem específica de caracteres, e não como uma forma geral de exibir textos em idiomas estrangeiros.
Se seu objetivo é simplesmente isolar um trecho de texto cuja direção você não controla (por exemplo, um nome fornecido pelo usuário) para que ele não perturbe o layout ao redor, use <bdi> — ele isola sem substituir.
O atributo dir obrigatório
O atributo dir é obrigatório em <bdo>. Ele informa ao navegador qual direção forçar, e aceita dois valores:
rtl— renderiza o conteúdo da direita para a esquerda. Use com scripts RTL como árabe e hebraico, ou para forçar a ordenação RTL em qualquer conteúdo.ltr— renderiza o conteúdo da esquerda para a direita. Isso é especialmente útil para forçar a ordenação LTR em um fragmento (como um trecho de código, URL ou número) que fica dentro de um contexto RTL, como um parágrafo em árabe.
Ao contrário do atributo global dir, que apenas define uma direção base e ainda permite ao algoritmo bidi reordenar sequências de caracteres de direção oposta, dir em um elemento <bdo> substitui esse algoritmo completamente.
Sintaxe
A tag <bdo> vem em pares. O conteúdo é escrito entre as tags de abertura (<bdo>) e fechamento (</bdo>), e dir deve sempre estar presente:
<bdo dir="rtl">…content…</bdo>Exemplo RTL (árabe)
Aqui, um parágrafo base LTR contém uma frase em árabe. Como dir="rtl" corresponde à direção natural do script árabe, o texto é lido corretamente da direita para a esquerda.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This sentence runs left to right.</p>
<p>
Arabic greeting:
<bdo dir="rtl">مرحبا بكم في موقعنا</bdo>
</p>
</body>
</html>Resultado
Substituição LTR dentro de um contexto RTL
Quando a direção base é RTL (um parágrafo em árabe, neste caso), o algoritmo bidi normalmente inverteria a ordem de um fragmento LTR, como um caminho de arquivo ou código de produto. Envolver esse fragmento em <bdo dir="ltr"> força que ele permaneça na ordem da esquerda para a direita pretendida:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p dir="rtl">
المسار هو
<bdo dir="ltr">C:\Users\docs\file.txt</bdo>
</p>
</body>
</html>Resultado
O equivalente em CSS
O efeito de <bdo> pode ser reproduzido em CSS combinando a propriedade direction com unicode-bidi: bidi-override. Na verdade, o elemento HTML é definido em termos desse CSS:
bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}A parte fundamental é unicode-bidi: bidi-override. Definir apenas direction muda somente a direção base (a mesma coisa que o atributo dir faz); é o bidi-override que desabilita a reordenação automática. Se você quiser o comportamento de substituição em um elemento diferente de <bdo>, aplique ambas as declarações manualmente. Por outro lado, prefira o elemento semântico <bdo> quando a marcação representa uma substituição direcional deliberada — isso mantém a intenção no HTML em vez de escondê-la em uma folha de estilos.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| dir | ltr | rtl | Obrigatório. Define a direção do texto: da esquerda para a direita (ltr) ou da direita para a esquerda (rtl). |
A tag <bdo> também suporta Atributos Globais e Atributos de Eventos.
Suporte a navegadores
<bdo> faz parte do padrão HTML e tem sido suportado em todos os principais navegadores há muito tempo, incluindo Chrome, Firefox, Safari, Edge e Opera. Nenhum fallback é necessário para navegadores atuais.
Acessibilidade
<bdo> altera apenas a ordem visual dos caracteres; não altera a pronúncia nem a ordem de leitura lógica exposta à tecnologia assistiva. Leitores de tela anunciam o texto em sua ordem lógica (de documento) subjacente, e não na ordem visual substituída.
Por isso, reserve <bdo> para casos em que a ordem visual dos caracteres genuinamente importa (como forçar um fragmento de código ou identificador a permanecer LTR). Para conteúdo multilíngue comum, defina uma direção base correta com o atributo global dir no elemento circundante e deixe o algoritmo bidi fazer seu trabalho, ou use <bdi> para isolar texto não confiável — ambos proporcionam uma experiência mais precisa para usuários de leitores de tela do que substituir a direção diretamente.