Etiqueta bdo en HTML: forzar la dirección del texto

La etiqueta <bdo> en HTML fuerza la dirección de presentación de un fragmento de texto mediante el atributo dir. Sirve cuando necesitas imponer deliberadamente un orden de izquierda a derecha o de derecha a izquierda, por ejemplo en una demostración de escritura bidireccional. Para mostrar nombres en distintos idiomas con su dirección habitual, suele convenir <bdi>.

<p>Prueba de dirección: <bdo dir="rtl">ABC 123</bdo></p>

En una página de dirección izquierda a derecha, el fragmento se ve como 321 CBA al recorrerlo visualmente de izquierda a derecha. El contenido del archivo sigue siendo ABC 123: no se reescribe la cadena. La frase «Prueba de dirección» queda fuera del efecto.

Para probar este ejemplo mínimo, pega el párrafo dentro del <body> de un documento HTML guardado en UTF-8. Si cambias rtl por ltr, verás ABC 123. Si retiras la apertura y el cierre de <bdo>, ese texto latino recupera también su presentación natural en la página.

Sintaxis y contenido permitido

La apertura <bdo> y el cierre </bdo> son obligatorios. Se usa donde se admite contenido de frase, como dentro de un <p> o un <li>. Puede contener texto y elementos de frase, por ejemplo <span> o <em>; no debe envolver un <div> ni una lista completa.

Debes escribir dir="ltr" para imponer izquierda a derecha o dir="rtl" para imponer derecha a izquierda. Omitir dir o escribir dir="auto" no cumple las reglas de este elemento. Estas restricciones están en el HTML Living Standard para <bdo>.

Qué significa sobrescribir la dirección

Normalmente, el navegador combina letras, números y signos siguiendo el algoritmo bidireccional de Unicode. Así puede presentar palabras latinas y hebreas dentro de una misma frase respetando sus direcciones.

<bdo> impone una sobrescritura direccional a su contenido. Por eso rtl afecta incluso al orden visual de las letras latinas y los dígitos del ejemplo mínimo. No basta con alinear un párrafo a la derecha para producir ese efecto: alineación y dirección son decisiones distintas. Las reglas de presentación de HTML relacionan <bdo> con unicode-bidi: isolate-override.

Ejemplo práctico: comparar nombres y direcciones

Antes de elegir cómo presentar nombres de usuarios, compara qué hace cada opción con el mismo contenido. Las dos primeras listas son una demostración de sobrescritura; la tercera conserva la dirección natural de cada nombre mediante aislamiento.

Guarda el documento completo como comparar-direcciones.html, con codificación UTF-8, y ábrelo en un navegador. No requiere CSS, JavaScript, archivos adicionales ni servidor. El nombre hebreo del ejemplo es Dana y se marca con lang="he" porque conocemos su idioma.

<!doctype html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Comparación de bdo y bdi con nombres</title>
  </head>
  <body>
    <h1>Cómo se presentan los nombres</h1>
    <p>Compara cada nombre entre «Usuario» y su cantidad de mensajes.</p>

    <h2>Dirección forzada: bdo ltr</h2>
    <ul>
      <li>Usuario <bdo dir="ltr">Luna</bdo>: 12 mensajes.</li>
      <li>Usuario <bdo dir="ltr" lang="he">דנה</bdo>: 3 mensajes.</li>
    </ul>

    <h2>Dirección forzada: bdo rtl</h2>
    <ul>
      <li>Usuario <bdo dir="rtl">Luna</bdo>: 12 mensajes.</li>
      <li>Usuario <bdo dir="rtl" lang="he">דנה</bdo>: 3 mensajes.</li>
    </ul>

    <h2>Aislamiento y dirección automática: bdi auto</h2>
    <ul>
      <li>Usuario <bdi dir="auto">Luna</bdi>: 12 mensajes.</li>
      <li>Usuario <bdi dir="auto" lang="he">דנה</bdi>: 3 mensajes.</li>
    </ul>
  </body>
</html>

El resultado se interpreta así:

• Con <bdo dir="ltr">, Luna conserva su orden habitual. El nombre hebreo se fuerza en sentido contrario al natural: su primer carácter escrito queda a la izquierda.
• Con <bdo dir="rtl">, Luna aparece visualmente como anuL al recorrer la línea de izquierda a derecha. El primer carácter del nombre hebreo queda a la derecha, acorde con la dirección natural de este nombre sencillo.
• Con <bdi dir="auto">, el navegador presenta Luna de izquierda a derecha y el nombre hebreo de derecha a izquierda. Cada nombre queda aislado de la frase y del contador exterior.

Modifica Luna por Marco en las tres listas y vuelve a abrir el archivo: solo la segunda fuerza las letras latinas de derecha a izquierda. Después cambia el dir del primer nombre de esa lista a ltr; recuperará su presentación habitual. Los contadores no cambian porque están fuera del elemento.

Si retiras <bdo> del nombre hebreo, sus letras vuelven a seguir el algoritmo normal. También desaparece el aislamiento aportado por ese elemento, por lo que debes revisar la posición de los signos y del contador junto al nombre. Reducir la ventana puede provocar saltos de línea; ninguno de estos elementos impide que el texto se envuelva.

Bdo frente a bdi y otras alternativas

Usa <bdi> cuando los nombres llegan de perfiles y desconoces su dirección. Aísla el fragmento y puede deducir su dirección con auto, sin imponer el orden de todos sus caracteres.

Un <span dir="rtl"> indica dirección sin la sobrescritura de <bdo>. Para una página de escritura derecha a izquierda, puedes establecer la dirección base en <html dir="rtl">; no necesitas envolver todos los textos en <bdo>. La guía de marcado bidireccional del W3C explica cómo elegir el marcado para estos casos.

Atributos, accesibilidad y errores frecuentes

<bdo> no tiene atributos exclusivos. Admite los globales, como id, class, lang y dir, aunque este último es obligatorio y tiene un efecto especial aquí. lang declara el idioma, de forma independiente de la dirección, y puede ayudar a las tecnologías de asistencia a elegir la pronunciación adecuada. Consulta la definición de lang.

No dependas de un texto invertido para comunicar información esencial. En la comparación anterior, los títulos identifican cada tratamiento y la explicación describe el efecto sin exigir que el lector lo deduzca de la pantalla. El anuncio o la lectura de una tecnología de asistencia no tiene por qué reproducir esa presentación visual.

Si el resultado parece incorrecto, comprueba primero que dir esté presente con ltr o rtl; después revisa exactamente qué caracteres has envuelto. Retira temporalmente las reglas CSS que cambien direction o unicode-bidi, pues pueden interferir con la presentación. Son propiedades CSS, no atributos de <bdo>. En JavaScript, textContent es una propiedad DOM que permite consultar el texto original, no un mecanismo de sobrescritura visual.

¿Bdo cambia los caracteres del texto? No. Cambia su presentación direccional. Conserva el orden lógico de la cadena para almacenarla y procesarla; no inviertas sus caracteres para imitar el resultado visible.

¿Puedo usar bdo con dir auto? No. Elige ltr o rtl si buscas sobrescritura; elige <bdi dir="auto"> si necesitas aislamiento con dirección deducida del contenido.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <bdo> como ampliamente disponible. Los ejemplos funcionan sin JavaScript. Si trabajas con un navegador antiguo o incrustado, consulta su soporte y comprueba nombres, números y signos en el entorno concreto.

La referencia normativa de WHATWG fija el contenido y los valores permitidos; MDN complementa la explicación y la compatibilidad, y W3C orienta la elección del marcado. Que un navegador muestre algo con dir="auto" no convierte ese valor en válido para <bdo>.