Tag HTML bdi - Aprenda HTML

A tag HTML <bdi> (cujo nome significa isolamento bidirecional) é um dos elementos do HTML5. Ela marca um trecho de texto que pode ser escrito em uma direção diferente do texto ao redor e o isola, fazendo com que o algoritmo bidirecional do navegador o trate como uma unidade separada e independente.

O caso de uso clássico é renderizar um valor dinâmico de direcionalidade desconhecida — um nome de usuário, nome de produto ou qualquer string obtida de um banco de dados — dentro de uma frase escrita da esquerda para a direita (LTR). Não é possível saber com antecedência se esse valor é em inglês (John), árabe (أحمد) ou hebraico (דוד). Sem isolamento, um valor RTL pode "vazar" e reorganizar os caracteres LTR ao seu lado, corrompendo o restante da linha. Envolver o valor em <bdi> evita isso.

<p>User <bdi>أحمد</bdi> scored 90 points.</p>

Aqui, أحمد mantém sua própria ordem da direita para a esquerda, enquanto o restante da frase — incluindo a pontuação e as palavras ao redor — permanece corretamente da esquerda para a direita.

Por que o texto bidirecional precisa de isolamento

O texto bidirecional mistura sequências de caracteres da direita para a esquerda (RTL) e da esquerda para a direita (LTR). Para exibi-lo, os navegadores executam o Algoritmo Bidirecional Unicode, que atribui uma direcionalidade a cada caractere. Alguns caracteres — muitos sinais de pontuação, dígitos e espaços — são neutros: sua direção é inferida pelos vizinhos.

Essa inferência é o problema. Quando um caractere neutro (como o espaço e o número após um nome) fica próximo a uma sequência RTL, o algoritmo pode puxá-lo para o fluxo RTL, fazendo com que uma pontuação ou número ao final salte para o lado errado da linha. O <bdi> resolve isso criando um limite de isolamento ao redor do texto incorporado: os caracteres dentro dele não podem influenciar a direção dos caracteres fora, e vice-versa.

Em resumo, o <bdi> envolve um trecho de texto e garante:

A direcionalidade do texto dentro do <bdi> não afeta o texto ao redor.
A direcionalidade do texto ao redor não afeta o texto dentro do <bdi>.

Antes e depois: vendo a diferença

O exemplo abaixo renderiza a mesma string de aparência dinâmica duas vezes. A primeira linha usa um <span> simples; a segunda a envolve em <bdi>. Com um valor da direita para a esquerda, a versão com <span> simples permite que o texto seguinte fique no lado errado, enquanto a versão com <bdi> permanece legível.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Without bdi vs. with bdi</h1>

    <!-- WITHOUT isolation: the trailing ": 90" can be reordered -->
    <p>User <span>إيان</span>: 90 points.</p>

    <!-- WITH isolation: the name is self-contained, the rest stays LTR -->
    <p>User <bdi>إيان</bdi>: 90 points.</p>
  </body>
</html>

Experimente Você Mesmo »

Execute o exemplo: no primeiro parágrafo, os dois-pontos e o número podem ser puxados para o lado errado do nome árabe; no segundo, o <bdi> mantém : 90 points. corretamente à direita.

`<bdi>` vs. `dir="auto"`

Você pode se perguntar por que não basta colocar dir="auto" em um <span>. Definir dir="auto" pede ao navegador que adivinhe a direção do próprio elemento com base em seu conteúdo — mas em um elemento inline normal isso não cria um limite de isolamento, portanto o elemento ainda pode afetar o layout do texto ao redor.

O elemento <bdi> faz as duas coisas ao mesmo tempo: detecta automaticamente a direção e isola. Na prática, o <bdi> se comporta como um <span dir="auto"> com isolamento adicional, que é exatamente o que você deseja para um valor incorporado de direção desconhecida. Usar <bdi> deixa a intenção clara e elimina a necessidade de definir o atributo manualmente.

`<bdi>` vs. `<bdo>`

O <bdi> é frequentemente confundido com o elemento <bdo> (substituição bidirecional), mas eles têm funções opostas:

<bdo> força uma direção. Você deve fornecer um atributo dir (dir="rtl" ou dir="ltr"), e ele substitui o algoritmo para renderizar o texto exatamente nessa direção.
<bdi> detecta e isola. Ele não inverte o texto. Permite que o algoritmo decida a direção do texto contido por conta própria, protegendo-o — e protegendo a página — do texto ao redor.

Use <bdo> quando você conhece a direção e quer forçá-la; use <bdi> quando a direção é desconhecida (conteúdo dinâmico) e você quer um tratamento seguro e automático.

Sintaxe

A tag <bdi> é usada em pares. O conteúdo é escrito entre as tags de abertura (<bdi>) e fechamento (</bdi>):

<bdi>Some text of unknown directionality</bdi>

Renderização CSS padrão

Os navegadores aplicam este estilo padrão ao elemento:

bdi {
  display: inline;
  unicode-bidi: isolate;
}

O valor unicode-bidi: isolate é o que cria o limite de isolamento descrito acima. Em geral, não se deve alterar unicode-bidi em um <bdi>, mas é possível estilizá-lo como qualquer elemento inline:

bdi {
  color: blue;
  font-weight: bold;
}

Atributos

A tag <bdi> suporta os Atributos Globais e os Atributos de Evento.

Como estilizar uma tag HTML <bdi>

bdi {
  color: blue;
  font-weight: bold;
}

Prática

Qual é a finalidade do elemento HTML bdi?

Ele isola um trecho de texto cuja direção é desconhecida para que não afete a direção do texto ao redor.Ele cria texto em negrito em HTML.Ele representa uma quebra de linha no texto HTML.Ele força o texto contido a ser renderizado da direita para a esquerda, independentemente do seu conteúdo.