Html bdi

Html bdi

A tag html <bdi> significa isolamento bidirecional.

A tag <bdi> isola uma parte do texto que pode ser formatada em uma direção diferente de outro texto fora dela.

Esse elemento é útil ao incorporar conteúdo gerado pelo usuário com uma direção de texto desconhecida.

Sintaxe

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

Definição e uso Html bdi

A tag <bdi> envolve uma extensão de texto e funciona das seguintes maneiras:

• A direcionalidade do texto incorporado na tag <bdi> não afeta a direcionalidade do texto ao redor.
• A direcionalidade do texto ao redor não afeta a direcionalidade do texto incorporado na tag <bdi>.

A tag <bdi> é semelhante à tag <bdo> mais antiga . O elemento <bdi> isola o texto contido do texto ao seu redor, enquanto <bdo> apenas inverte a direção. Geralmente é recomendado usar <bdi> para evitar problemas de renderização inesperados que podem surgir com <bdo>.

Veja o exemplo no código abaixo

No exemplo abaixo, os nomes de usuário são mostrados junto com o número de pontos em um concurso. Se o elemento bdi não for suportado no navegador, o nome de usuário do usuário árabe confundiria o texto (o algoritmo bidirecional colocaria os dois pontos e o número “100” ao lado da palavra “Usuário” em vez de ao lado da palavra “pontos “).

<ul>
  <li>Usuário <bdi>hrefs</bdi>: 30 pontos</li>
  <li>Usuário <bdi>jdoe</bdi>: 78 pontos</li>
  <li>Usuário <bdi>إيان</bdi>: 100 pontos</li>
</ul>