Los elementos bdi y bdo

El Algoritmo Bidireccional de Unicode normalmente gestiona bien el texto con direcciones mixtas, pero a veces es necesario anularlo: para aislar un nombre proporcionado por el usuario y evitar que cambie la dirección del texto circundante, o para forzar una dirección específica en un bloque de código.

<bdi> (aislamiento bidireccional) trata su contenido como un contexto bidi independiente. La dirección del texto dentro de <bdi> no puede afectar a la dirección del texto exterior, y viceversa.

Una lista de usuarios que mezcla nombres en inglés y árabe corre el riesgo de que los nombres árabes «se filtren» en el flujo RTL del texto circundante. Envolver cada nombre en <bdi> lo aísla: el diseño permanece coherente independientemente de la dirección que tenga cada nombre.

<bdo dir="rtl"> (anulación bidireccional) impone una dirección específica al contenido, anulando la resolución bidi natural. Úselo cuando quiera mostrar texto en una dirección no natural; por ejemplo, para representar fragmentos de código en LTR dentro de una página RTL.

El atributo dir de un elemento normal establece una dirección base y el algoritmo bidi sigue aplicándose en su interior. <bdo> desactiva el algoritmo bidi para su contenido: cada carácter fluye estrictamente en la dirección especificada, independientemente de su sistema de escritura.

Siempre que inserte texto generado por usuarios en elementos de interfaz circundantes: nombres en encabezados de chats, nombres de usuario en comentarios o títulos en elementos de un feed. El aislamiento garantiza que el diseño de la interfaz no se vea afectado por lo que haya escrito el usuario.

Rara vez. El principal uso legítimo es enseñar el funcionamiento del texto bidireccional (mostrar cómo se ve una cadena invertida) o corregir datos con etiquetas incorrectas, cuando la resolución bidi natural produce un orden visual erróneo.

Para contenido de usuario cuya dirección se desconoce, combine <bdi dir="auto"> como medida de seguridad adicional: la detección automática elige una dirección base a partir del contenido, y bdi evita que esa dirección se filtre al texto circundante.

bdi y bdo son compatibles con todos los navegadores modernos. Forman parte de HTML5 y se han mantenido estables durante años. Las versiones antiguas de IE no incluyen bdi, pero ya son obsoletas funcionalmente; los sitios modernos pueden utilizar bdi sin problemas.

Los lectores de pantalla respetan el aislamiento bidi: el texto dentro de <bdi> se anuncia con la voz de su propio idioma (cuando se establece lang), sin que el contexto circundante interfiera. bdi también ayuda a los sistemas de texto a voz a generar pausas adecuadas alrededor de frases aisladas.

Las plantillas con marcadores de posición ("Welcome, {name}") deben envolver el marcador en <bdi>: Welcome, <bdi>{name}</bdi>. Cualquier nombre de usuario —en inglés, árabe o combinado— se muestra correctamente sin alterar el resto del saludo.

¿Cuál es la diferencia práctica entre y ?

bdi aísla la dirección del texto de una sección para que no afecte a su entorno; utilícelo para contenido de usuario integrado, como nombres en plantillas. bdo fuerza una dirección específica, anulando bidi, y rara vez se necesita fuera de ejemplos didácticos. Combine bdi con dir="auto" para gestionar de forma segura texto proporcionado por usuarios en idiomas desconocidos.