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 CSS{{cssxref("unicode-bidi")}}: isolar um {{HTMLElement("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.
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.
<p dir="ltr">Esta palavra arábica <bdi>ARABIC_PLACEHOLDER</bdi> é automaticamente voltada da direita</p>
Esta palavra arábica ARABIC_PLACEHOLDER é automaticamente voltada da direita
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}} | {{Spec2('HTML5 W3C')}} |
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 16 | {{CompatGeckoDesktop("10.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | {{CompatNo}} | {{CompatGeckoMobile("10.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
{{HTMLRef}}