<bdi>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Resumo

O HTML <bdi>elemento (ou elemento de isolamento de Bi-direcional) isola um trechode texto que pode ser formatado em uma direção diferente de outro texto fora dela.

Este elemento é útil ao incorporar o texto com uma direção desconhecida, de um banco de dados por exemplo, no interior do texto com uma direção fixa.

Apesar do mesmo efeito visual pode ser alcançado usando a regra de CSSunicode-bidi: isolar um <span> ou outro elemento de formatação de texto, o significado semântico só é transportado pelo elemento de<bdi>. Especialmente, os navegadores podem ignorar estilos CSS. Nesse caso, o texto seria ainda corretamente exibido usando o elemento HTML, mas se tornará lixo quando usando o estilo CSS para transmitir semântica.

Atributos

Como todos os outros elementos do HTML, este elemento tem os atributos globais, com uma pequena diferença de semântica: o atributo dir não é herdado. Se não definido, o valor padrão é o auto que deixa o navegador decidir a direção com base no conteúdo do elemento.

Exemplo

html
<p dir="ltr">
  Esta palavra arábica <bdi>ARABIC_PLACEHOLDER</bdi> é automaticamente voltada
  da direita
</p>

Especificações

Specification
HTML
# the-bdi-element

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
bdi

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja Também