Etiqueta HTML <bdi>
La etiqueta HTML <bdi> aísla texto de dirección desconocida para que su dirección se detecte de forma independiente y el texto circundante quede correcto.
La etiqueta HTML <bdi> (cuyo nombre proviene de bi-directional isolation, es decir, aislamiento bidireccional) es uno de los elementos HTML5. Marca un fragmento de texto que puede estar escrito en una dirección distinta a la del texto que lo rodea, y lo aísla para que el algoritmo bidireccional del navegador lo trate como una unidad separada y autónoma.
El caso de uso clásico es mostrar un valor dinámico de dirección desconocida — un nombre de usuario, el nombre de un producto o cualquier cadena extraída de una base de datos — dentro de una oración de izquierda a derecha (LTR). No es posible saber de antemano si ese valor está en inglés (John), árabe (أحمد) o hebreo (דוד). Sin aislamiento, un valor RTL puede "escaparse" y reordenar los caracteres LTR adyacentes, desordenando el resto de la línea. Envolver el valor en <bdi> evita ese problema.
<p>User <bdi>أحمد</bdi> scored 90 points.</p>Aquí أحمد conserva su propio orden de derecha a izquierda, mientras que el resto de la oración — incluida la puntuación y las palabras circundantes — se mantiene correctamente de izquierda a derecha.
Por qué el texto bidireccional necesita aislamiento
El texto bidireccional mezcla secuencias de caracteres de derecha a izquierda (RTL) y de izquierda a derecha (LTR). Para mostrarlo, los navegadores ejecutan el Algoritmo Bidireccional Unicode, que asigna una direccionalidad a cada carácter. Algunos caracteres — muchos signos de puntuación, dígitos y espacios — son neutros: su dirección se infiere a partir de los caracteres vecinos.
Esa inferencia es el problema. Cuando un carácter neutro (como el espacio y el número que siguen a un nombre) queda junto a una secuencia RTL, el algoritmo puede arrastrarlo al flujo RTL, haciendo que una cifra o signo de puntuación al final salte al lado incorrecto de la línea. <bdi> soluciona esto creando un límite de aislamiento alrededor del texto incrustado: los caracteres que hay dentro no pueden influir en la dirección de los caracteres que están fuera, y viceversa.
En resumen, <bdi> envuelve un fragmento de texto y garantiza:
- La direccionalidad del texto dentro del
<bdi>no afecta al texto circundante. - La direccionalidad del texto circundante no afecta al texto que está dentro del
<bdi>.
Antes y después: ver la diferencia
El siguiente ejemplo muestra la misma cadena de aspecto dinámico dos veces. La primera línea usa un <span> simple; la segunda lo envuelve en <bdi>. Con un valor de derecha a izquierda, la versión con <span> simple deja que el texto final se desplace al lado incorrecto, mientras que la versión con <bdi> permanece legible.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Without bdi vs. with bdi</h1>
<!-- WITHOUT isolation: the trailing ": 90" can be reordered -->
<p>User <span>إيان</span>: 90 points.</p>
<!-- WITH isolation: the name is self-contained, the rest stays LTR -->
<p>User <bdi>إيان</bdi>: 90 points.</p>
</body>
</html>Ejecuta el ejemplo: en el primer párrafo, los dos puntos y el número pueden desplazarse al lado incorrecto del nombre en árabe; en el segundo, <bdi> mantiene : 90 points. correctamente a la derecha.
<bdi> vs. dir="auto"
Quizás te preguntes por qué no basta con poner dir="auto" en un <span>. Establecer dir="auto" le pide al navegador que deduzca la dirección del elemento a partir de su contenido — pero en un elemento en línea normal no crea un límite de aislamiento, por lo que el elemento puede seguir afectando la disposición del texto que lo rodea.
El elemento <bdi> hace las dos cosas a la vez: detecta automáticamente la dirección y la aísla. De hecho, <bdi> se comporta como un <span dir="auto"> que además está aislado, lo cual es exactamente lo que se necesita para un valor incrustado de dirección desconocida. Usar <bdi> deja clara la intención y elimina la necesidad de establecer el atributo manualmente.
<bdi> vs. <bdo>
<bdi> suele confundirse con el elemento <bdo> (bi-directional override, o sustitución bidireccional), pero realizan funciones opuestas:
<bdo>fuerza una dirección. Requiere un atributodir(dir="rtl"odir="ltr"), y anula el algoritmo para renderizar el texto exactamente en esa dirección.<bdi>detecta y aísla. No invierte el texto. Deja que el algoritmo decida la dirección del texto contenido por su cuenta, a la vez que lo protege del — y protege la página del — texto circundante.
Usa <bdo> cuando conoces la dirección y quieres forzarla; usa <bdi> cuando la dirección es desconocida (contenido dinámico) y quieres un manejo seguro y automático.
Sintaxis
La etiqueta <bdi> se usa en pares. El contenido se escribe entre la etiqueta de apertura (<bdi>) y la de cierre (</bdi>):
<bdi>Some text of unknown directionality</bdi>Representación CSS por defecto
Los navegadores aplican este estilo predeterminado al elemento:
bdi {
display: inline;
unicode-bidi: isolate;
}El valor unicode-bidi: isolate es el que crea el límite de aislamiento descrito anteriormente. Por lo general, no deberías cambiar unicode-bidi en un <bdi>, pero puedes darle estilo como a cualquier elemento en línea:
bdi {
color: blue;
font-weight: bold;
}Atributos
La etiqueta <bdi> admite los Atributos Globales y los Atributos de Evento.
Cómo dar estilo a una etiqueta HTML <bdi>
bdi {
color: blue;
font-weight: bold;
}