<bdi>: O Elemento BDI
Última atualização: 2026-10-13
<bdi>O Elemento BDI
Isolamento bidirecional: trata seu texto como um segmento de direção isolado, evitando contaminação de direção mista.
| Categoria | Conteúdo de Texto |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </bdi> tag |
| Status | Padrão |
📝 Sintaxe
<bdi>nome de usuário</bdi>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <bdi> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： bdi é como dir="auto" mas cria uma forte fronteira de isolamento; ótimo para conteúdo de usuário não confiável.
❓ Perguntas Frequentes
QPara que serve a tag bdi?
A
<bdi> (Bi-Directional Isolation) isola a direção de um trecho de texto do texto ao redor, evitando embaralhamento em texto misto. Cenário típico: nomes de usuário e listas de comentários que misturam árabe/hebraico, impedindo que pontuação e números tenham a ordem de exibição bagunçada.QQual é a diferença entre bdi e o unicode-bidi do CSS?
A
<bdi> é a solução pronta e semântica: o navegador detecta a direção interna e isola automaticamente; unicode-bidi: isolate no CSS é o mecanismo de base, de efeito parecido, mas exige direction manual. Prefira <bdi> — mais simples e semanticamente explícita.QQuando o bdi é obrigatório?
AAo exibir «texto de terceiros que você não controla»: nomes de autores de comentários, apelidos de chat, listas de nomes de arquivos etc. Por exemplo,
<li><bdi>أحمد</bdi>: conteúdo do comentário</li> — qualquer que seja o idioma do nome, o layout da linha não é afetado. Texto misto estático, escrito por você, geralmente dispensa.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
