La etiqueta BDI

La etiqueta <bdi> (Bidirectional Isolation) aísla fragmentos de texto con direccionalidad desconocida o mixta, evitando conflictos en la representación visual de idiomas como árabe, hebreo o urdu dentro de contenido bidireccional.

Sintaxis básica

<p>Texto en LTR <bdi>Texto con direccionalidad desconocida</bdi> continuación del texto.</p>

Casos de uso clave

Nombres de usuario internacionales

<ul>
  <li>Usuario: <bdi>محمد</bdi> - 120 puntos</li>
  <li>Usuario: <bdi>תומר</bdi> - 95 puntos</li>
  <li>Usuario: <bdi>JohnDoe123</bdi> - 80 puntos</li>
</ul>

Comentarios multilingües

<div class="comentario">
  <bdi>نور</bdi> escribió: "¡Excelente artículo! شكرًا"
</div>

Listas con datos mixtos

<p>Trending topics: 
  <bdi>#برمجة</bdi>, 
  <bdi>#코딩</bdi>, 
  <bdi>#プログラミング</bdi>
</p>

Comparación con elementos similares

Etiqueta	Propósito	Dirección	Ejemplo
<bdi>	Aislar dirección desconocida	Automática	<bdi>عربي</bdi>
<bdo>	Forzar dirección específica	Manual (dir="rtl")	<bdo dir="rtl">Texto</bdo>
dir="auto"	Detectar dirección	Basado en contenido	<span dir="auto">טקסט</span>

Accesibilidad

• Los lectores de pantalla interpretan correctamente la direccionalidad aislada.

• Mejor práctica: Combinar con dir="auto" cuando sea necesario:

<bdi dir="auto">مرحبا</bdi>

Ejemplos prácticos

Ejemplo 1: Sistema de comentarios

<div class="comentario">
  <h3><bdi>إيمان</bdi> dijo:</h3>
  <p>هذا الموقع رائع! شكرًا لكم</p>
  <small>Publicado el 15/10/2023</small>
</div>

Ejemplo 2: Mención de usuario en interfaz

<button class="notificación">
  <bdi>אביגיל</bdi> te ha enviado un mensaje
</button>

Errores comunes

Usar donde no hay necesidad

<!-- Incorrecto -->
<p>Hola <bdi>John</bdi></p> <!-- "John" es LTR predecible -->

<!-- Correcto -->
<p>Hola <bdi>יוחנן</bdi></p>

Confundir con <span> + CSS

<!-- Incorrecto (solo estilo, sin manejo de dirección) -->
<span style="color: red;">عربي</span>

<!-- Correcto -->
<bdi style="color: red;">عربي</bdi>

Uso avanzado con JavaScript

<script>
  // Insertar contenido dinámico con aislamiento bidireccional
  function agregarUsuario(nombre) {
    const lista = document.getElementById('usuarios');
    lista.innerHTML += `<li><bdi>${nombre}</bdi></li>`;
  }
  
  agregarUsuario('محمد');
  agregarUsuario('田中');
</script>

Estilización con CSS

bdi {
  font-weight: bold;
  color: #2c3e50;
  background-color: #f8f9fa;
  padding: 2px 5px;
  border-radius: 3px;
}

Buenas prácticas

• Usar siempre en contenido generado por usuarios donde la dirección es impredecible.

• Combinar con atributo dir cuando se conozca parcialmente la dirección:

<p dir="ltr">Message from <bdi>עדן</bdi>: "תודה רבה"</p>

•  Evitar anidaciones innecesarias:

<!-- Incorrecto -->
<bdi><bdi>نص</bdi></bdi> 

Compatibilidad

Navegador	Soporte
Chrome	Sí (v16+)
Firefox	Sí (v10+)
Safari	Sí (v5.1+)
Edge	Sí (v79+)

Conclusión:

La etiqueta <bdi> es esencial para:

• Manejar contenido multilingüe complejo

• Mantener la integridad visual en interfaces internacionales

• Garantizar accesibilidad en textos bidireccionales

Úsala siempre que trabajes con contenido generado por usuarios en múltiples idiomas con diferentes direcciones de escritura.