Os elementos bdi e bdo

O Algoritmo bidirecional do Unicode normalmente lida bem com textos de direções mistas, mas às vezes é necessário substituí-lo — para isolar um nome fornecido pelo usuário e impedir que ele altere a direção do texto ao redor ou para forçar uma direção específica em um bloco de código.

<bdi> (isolamento bidirecional) trata seu conteúdo como um contexto bidirecional separado. A direção do texto dentro de <bdi> não pode afetar a direção do texto fora dele, e vice-versa.

Uma lista de usuários que mistura nomes em inglês e árabe corre o risco de os nomes árabes "vazarem" seu fluxo RTL para o texto ao redor. Envolver cada nome em <bdi> o isola: o layout permanece consistente, independentemente da direção de cada nome.

<bdo dir="rtl"> (substituição bidirecional) força uma direção específica no conteúdo, substituindo a resolução bidirecional natural. Use-o quando quiser exibir um texto em uma direção não natural — por exemplo, para renderizar trechos de código em LTR dentro de uma página RTL.

O atributo dir em um elemento comum define uma direção de base, e o algoritmo bidirecional continua sendo aplicado internamente. <bdo> desativa o algoritmo bidirecional para seu conteúdo — cada caractere flui estritamente na direção especificada, independentemente de seu sistema de escrita.

Sempre que incorporar texto gerado pelo usuário ao conteúdo de interface ao redor — nomes nos cabeçalhos de conversas, nomes de usuário em comentários e títulos em itens de um feed. O isolamento garante que o layout da interface não seja afetado pelo que o usuário digitou.

Raramente. O principal uso legítimo é ensinar sobre texto bidirecional (mostrar como uma cadeia de caracteres fica quando invertida) ou corrigir dados marcados incorretamente, nos quais a resolução bidirecional natural produz a ordem visual errada.

Para conteúdo do usuário cuja direção é desconhecida, combine <bdi dir="auto"> para obter segurança adicional: a detecção automática escolhe uma direção base a partir do conteúdo, e bdi impede que essa direção se propague para o texto ao redor.

bdi e bdo são compatíveis com todos os navegadores modernos. Eles fazem parte do HTML5 e estão estáveis há anos. Versões antigas do IE não têm suporte a bdi, mas são funcionalmente obsoletas; sites modernos podem usar bdi livremente.

Leitores de tela respeitam o isolamento bidirecional: o texto dentro de <bdi> é anunciado com a voz do próprio idioma (quando lang está definido), sem que o contexto ao redor interfira. bdi também ajuda a síntese de voz a gerar pausas apropriadas ao redor de frases isoladas.

Modelos com espaços reservados ("Welcome, {name}") devem envolver o espaço reservado em <bdi>: Welcome, <bdi>{name}</bdi>. Qualquer nome de usuário — em inglês, árabe ou misto — é exibido corretamente sem interferir no restante da saudação.

Qual é a diferença prática entre e ?

bdi isola a direção do texto de uma seção para que ela não afete o texto ao redor — use-o para conteúdo incorporado do usuário, como nomes em modelos. bdo força uma direção específica, substituindo a direção bidirecional, e raramente é necessário fora de exemplos didáticos. Combine bdi com dir="auto" para lidar com segurança com texto fornecido pelo usuário em idiomas desconhecidos.