Etiqueta bdi en HTML: aislar texto bidireccional
La etiqueta <bdi> en HTML aísla un fragmento de texto para que su dirección de escritura no altere el orden del texto que lo rodea. Sirve, por ejemplo, para mostrar nombres de usuario junto a contadores cuando no sabes si cada nombre se escribirá de izquierda a derecha o de derecha a izquierda.
<p>Usuario <bdi>ليلى</bdi>: 3 mensajes.</p>El nombre árabe mantiene su escritura de derecha a izquierda. Los dos puntos y 3 mensajes quedan después del nombre dentro de la frase en español. <bdi> no traduce ni invierte los caracteres guardados: aísla su presentación bidireccional.
Para comprobar el efecto, copia el párrafo en el documento del ejemplo práctico y añade debajo esta versión deliberadamente sin aislamiento:
<p>Usuario ليلى: 3 mensajes.</p>En una página de dirección izquierda a derecha, el navegador puede colocar el 3 antes del nombre árabe y arrastrar los dos puntos hacia él. Cambian las posiciones visuales, aunque el código siga colocando el contador después del nombre.
Sintaxis y contenido permitido
La apertura <bdi> y el cierre </bdi> son obligatorios. El elemento pertenece al contenido de frase y puede aparecer dentro de un párrafo, una entrada de lista u otro contexto que lo admita. Puede contener texto y otros elementos de frase, como <span>; no debe envolver una lista completa ni un <div>.
No tiene atributos exclusivos. Admite los globales, como id, class, lang y dir. En este elemento, omitir dir equivale a usar dir="auto": la dirección se deduce del contenido en vez de heredarse del padre. Estas reglas proceden del HTML Living Standard para <bdi>.
Ejemplo práctico: nombres, signos y cantidades
Un listado de mensajes necesita mantener unidos cada usuario y su cantidad. Si los nombres llegan de perfiles distintos, aísla cada nombre, incluidos los latinos: así el mismo marcado sirve para todos.
Guarda este documento completo como usuarios.html, con codificación UTF-8, y ábrelo en un navegador. No necesita CSS, JavaScript ni servidor. La segunda lista muestra la comparación sin aislamiento; no es la versión recomendada.
<!doctype html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mensajes por usuario: comparación con bdi</title>
</head>
<body>
<h1>Mensajes por usuario</h1>
<h2>Con aislamiento</h2>
<ul>
<li>Usuario <bdi>Laura</bdi>: 12 mensajes.</li>
<li>Usuario <bdi>Bruno-27</bdi>: 5 mensajes.</li>
<li>Usuario <bdi lang="ar">ليلى</bdi>: 3 mensajes.</li>
</ul>
<h2>Sin aislamiento: comparación</h2>
<ul>
<li>Usuario Laura: 12 mensajes.</li>
<li>Usuario Bruno-27: 5 mensajes.</li>
<li>Usuario ليلى: 3 mensajes.</li>
</ul>
</body>
</html>Compara la tercera fila de ambas listas. Con <bdi>, verás el nombre árabe entre Usuario y : 3 mensajes. Sin él, en esta frase el número aparece visualmente antes del nombre; las filas latinas conservan el mismo orden. El guion y los números de Bruno-27 pertenecen al nombre y quedan dentro del aislamiento; los dos puntos y el contador quedan fuera.
Después cambia ليلى por Laila en ambas listas: la diferencia desaparece porque ya no hay un nombre de dirección opuesta. Cambia también el contador y comprueba que sigue asociado al usuario. Al reducir la ventana puede haber saltos de línea; eso no significa que <bdi> impida envolver el texto.
Cómo elegir dir y distinguirlo de lang
El atributo global dir admite estos valores:
| Valor | Cuándo usarlo en <bdi> |
|---|---|
auto | La dirección es desconocida; también es el comportamiento al omitir el atributo. |
ltr | Sabes que la dirección base del fragmento es izquierda a derecha. |
rtl | Sabes que la dirección base del fragmento es derecha a izquierda. |
Para texto sencillo, auto toma la dirección del primer carácter con dirección fuerte: una letra latina apunta a ltr, una árabe a rtl. Un número inicial no decide la dirección. Si no encuentra ese carácter, se utiliza ltr. Si conoces la dirección prevista de un nombre mixto, puedes indicarla explícitamente. Consulta la definición normativa de dir.
lang declara el idioma. En el ejemplo, lang="ar" identifica el nombre como árabe; no determina su dirección ni traduce su contenido. Declara el idioma cuando lo conoces, sin deducirlo solo por la escritura. La definición de lang explica su herencia y valores.
Diferencias entre bdi, bdo, span y el contenedor
<bdi> sirve para aislar un fragmento. <bdo> anula el algoritmo bidireccional y fuerza una dirección; exige dir="ltr" o dir="rtl" y no admite auto. No lo uses para corregir nombres árabes normales. Puedes contrastar esta diferencia en la definición de <bdo>.
Un <span> sin dir solo agrupa texto y no aporta este aislamiento. En HTML actual, <span dir="auto"> también aísla y deduce la dirección. Si ya hay un elemento adecuado que envuelve exactamente el fragmento, puedes añadirle dir en vez de introducir otro. La guía de internacionalización del W3C desarrolla esta elección.
<html dir="ltr"> establece la dirección base del documento; no sustituye el aislamiento de cada nombre desconocido. Cambiar todo el listado a rtl tampoco resuelve el problema de combinar nombres con las frases en español.
Accesibilidad y errores frecuentes
Conserva los nombres como texto y en su orden lógico original: no reordenes la cadena para imitar la pantalla. Revisa tanto la presentación como el texto copiado. El idioma conocido puede ayudar a la pronunciación mediante tecnologías de asistencia; <bdi> por sí solo no garantiza una voz ni un anuncio particular.
Si los nombres llegan de usuarios, <bdi> no evita que se interprete HTML insertado de forma insegura. En JavaScript, asigna el nombre con la propiedad DOM textContent, o utiliza el escape de texto de tu plantilla, en lugar de concatenarlo con innerHTML.
Si el aislamiento parece no funcionar, comprueba qué caracteres envolviste y retira temporalmente tus estilos. direction y unicode-bidi son propiedades CSS; dir es un atributo HTML. Una regla que cambie unicode-bidi puede interferir con el resultado. La etiqueta tampoco aplica cursiva, negrita ni alineación especial.
¿Bdi cambia el idioma? No. El idioma se declara con lang; el aislamiento direccional y el idioma son decisiones distintas.
¿Bdi siempre es rtl? No. Un nombre latino se resuelve como ltr con auto, y puedes fijar la dirección base cuando la conoces.
Compatibilidad y fuentes
Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <bdi> como ampliamente disponible. Los ejemplos funcionan sin JavaScript. Para entornos antiguos o incrustados, comprueba la tabla de soporte y la presentación real de nombres, signos y cantidades antes de dar el comportamiento por hecho.
Las fuentes enlazadas distinguen el modelo de HTML, el algoritmo de dirección y las recomendaciones de marcado. Ninguna convierte <bdi> en un traductor o en un control de interacción.