Etiqueta HTML <bdo>
La etiqueta HTML <bdo> fuerza la dirección del texto (ltr o rtl), anulando el algoritmo bidireccional del navegador. Aprende dir con ejemplos RTL/LTR.
La etiqueta HTML <bdo> ("bidirectional override" o anulación bidireccional) fuerza una dirección de texto específica, anulando el algoritmo bidireccional (bidi) integrado del navegador. Es más útil cuando necesitas mostrar caracteres en un orden fijo de izquierda a derecha o de derecha a izquierda, independientemente de la dirección natural del script al que pertenecen esos caracteres.
Esta página explica qué hace la anulación, el atributo dir obligatorio, ejemplos prácticos de RTL y LTR que puedes ejecutar, el equivalente en CSS, la compatibilidad con navegadores y notas de accesibilidad.
Por qué existe la anulación bidireccional
De forma predeterminada, los navegadores gestionan el texto con dirección mixta automáticamente mediante el algoritmo bidireccional Unicode. Ese algoritmo examina la dirección inherente de cada carácter — las letras latinas fluyen de izquierda a derecha (LTR), mientras que las letras árabes y hebreas fluyen de derecha a izquierda (RTL) — y los distribuye en consecuencia. La mayoría de las veces, esto es exactamente lo que se desea.
<bdo> es la vía de escape para los casos excepcionales en los que debes forzar el orden visual en lugar de dejar que el algoritmo decida. Anula la direccionalidad inherente de cada carácter en su interior. Es una herramienta deliberada y de bajo nivel: úsala solo cuando realmente necesites un orden de caracteres específico, y no como forma general de mostrar texto en idiomas extranjeros.
Si tu objetivo es simplemente aislar un fragmento de texto cuya dirección no controlas (por ejemplo, un nombre proporcionado por el usuario) para que no perturbe el diseño circundante, utiliza <bdi> en su lugar — aísla sin anular.
El atributo dir obligatorio
El atributo dir es obligatorio en <bdo>. Indica al navegador qué dirección forzar y acepta dos valores:
rtl— renderiza el contenido de derecha a izquierda. Úsalo con scripts RTL como el árabe y el hebreo, o para forzar el orden RTL en cualquier contenido.ltr— renderiza el contenido de izquierda a derecha. Es especialmente útil para forzar el orden LTR en un fragmento (como un fragmento de código, una URL o un número) que se encuentra dentro de un contexto RTL como un párrafo en árabe.
A diferencia del atributo global dir, que solo establece una dirección base y sigue permitiendo que el algoritmo bidi reordene las secuencias de caracteres de dirección opuesta, dir en un elemento <bdo> anula ese algoritmo por completo.
Sintaxis
La etiqueta <bdo> va en pares. El contenido se escribe entre las etiquetas de apertura (<bdo>) y cierre (</bdo>), y dir debe estar siempre presente:
<bdo dir="rtl">…content…</bdo>Ejemplo RTL (árabe)
Aquí, un párrafo LTR base contiene una frase en árabe. Como dir="rtl" coincide con la dirección natural del script árabe, el texto se lee correctamente de derecha a izquierda.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This sentence runs left to right.</p>
<p>
Arabic greeting:
<bdo dir="rtl">مرحبا بكم في موقعنا</bdo>
</p>
</body>
</html>Resultado
Anulación LTR dentro de un contexto RTL
Cuando la dirección base es RTL (un párrafo en árabe en este caso), el algoritmo bidi normalmente invertiría el orden de un fragmento LTR como una ruta de archivo o un código de producto. Al envolver ese fragmento en <bdo dir="ltr"> se fuerza a que permanezca en su orden de izquierda a derecha previsto:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p dir="rtl">
المسار هو
<bdo dir="ltr">C:\Users\docs\file.txt</bdo>
</p>
</body>
</html>Resultado
El equivalente en CSS
El efecto de <bdo> se puede reproducir en CSS combinando la propiedad direction con unicode-bidi: bidi-override. De hecho, el elemento HTML se define en términos de este CSS:
bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}La parte clave es unicode-bidi: bidi-override. Establecer direction solo cambia la dirección base (lo mismo que hace el atributo dir); es bidi-override lo que deshabilita el reordenamiento automático. Si deseas el comportamiento de anulación en un elemento distinto de <bdo>, aplica ambas declaraciones tú mismo. Por el contrario, prefiere el elemento semántico <bdo> cuando el marcado representa una anulación direccional deliberada — mantiene la intención en el HTML en lugar de ocultarla en una hoja de estilos.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| dir | ltr | rtl | Obligatorio. Define la dirección del texto: de izquierda a derecha (ltr) o de derecha a izquierda (rtl). |
La etiqueta <bdo> también admite Atributos globales y Atributos de eventos.
Compatibilidad con navegadores
<bdo> forma parte del estándar HTML y ha sido compatible con todos los navegadores principales desde hace mucho tiempo, incluyendo Chrome, Firefox, Safari, Edge y Opera. No se necesita ningún mecanismo de reserva para los navegadores actuales.
Accesibilidad
<bdo> cambia únicamente el orden visual de los caracteres; no modifica la pronunciación ni el orden de lectura lógico expuesto a la tecnología de asistencia. Los lectores de pantalla anuncian el texto en su orden lógico subyacente (del documento), no en el orden visual anulado.
Por esta razón, reserva <bdo> para los casos en que el orden visual de los caracteres realmente importe (como forzar que un fragmento de código o un identificador permanezca en LTR). Para el contenido multilingüe normal, establece una dirección base correcta con el atributo global dir en el elemento circundante y deja que el algoritmo bidi haga su trabajo, o usa <bdi> para aislar texto no confiable — ambos ofrecen una experiencia más precisa para los usuarios de lectores de pantalla que anular la dirección por completo.