Para texto HTML anidado, elige el aislamiento cuando cada frase deba conservar su propia dirección sin alterar las frases vecinas. Usa la incrustación solo cuando la interacción con el texto circundante sea intencional, y una sobrescritura cuando el diseño requiera explícitamente forzar el orden de los caracteres.

Esta guía ayuda a quien edita una página HTML en una Mac a elegir el mecanismo adecuado, conservar las etiquetas anidadas y la puntuación, y comprobar el resultado en un navegador de escritorio. Los ejemplos usan etiquetas, números y caracteres geométricos inventados.

¿Qué mecanismo se ajusta a la tarea de diseño?

Empieza con dos preguntas: ¿debe el navegador aplicar el orden bidireccional habitual dentro de la frase?, y ¿debe esa frase influir en el orden del texto circundante? Esas decisiones dan lugar a la siguiente comparación práctica. La referencia de unicode-bidi de MDN describe los comportamientos CSS subyacentes.

Requisito Mecanismo Enfoque HTML preferido
Dar a una frase de dirección conocida su propio límite Aislamiento Un elemento en línea existente con dir="ltr" o dir="rtl"
Aislar una frase cuya dirección se desconoce Aislamiento con dirección automática bdi o un elemento en línea existente con dir="auto"
Crear un ámbito direccional que siga afectando al orden circundante Incrustación Un caso CSS especializado que use unicode-bidi: embed
Forzar la secuencia de caracteres y aislar el resultado Sobrescritura aislada bdo con dir="ltr" o dir="rtl" explícitos
Forzar la secuencia de caracteres y conservar la interacción con el texto circundante Sobrescritura no aislada Un caso CSS especializado que use unicode-bidi: bidi-override

Para la autoría habitual de HTML, usa el marcado direccional como punto de partida. W3C recomienda delimitar estrechamente cada frase de dirección opuesta y expresar las frases anidadas mediante marcado anidado. Así, los límites previstos quedan visibles en el documento. W3C: marcado en línea y texto bidireccional en HTML.

¿Cómo se marca el texto aislado anidado?

Asigna a cada frase completa su propio límite direccional. Si un elemento en línea existente ya contiene exactamente esa frase, añade dir allí. De lo contrario, introduce un span. Mantén dentro del contenedor la puntuación que pertenezca a la frase; deja fuera la puntuación de la oración circundante. W3C llama a esto «delimitar estrechamente» la frase. Guía de marcado en línea de W3C.

Para una etiqueta sintética de formas que deba avanzar de derecha a izquierda y contenga un identificador de izquierda a derecha, la estructura podría tener este aspecto ilustrativo:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Hay tres ámbitos deliberados: la oración externa, la secuencia de formas y el identificador anidado. El recuento pertenece a la oración, así que queda fuera de la secuencia de formas. Si solo se marca la frase externa, el identificador interno no tendrá su propio límite explícito. Este anidamiento sigue la estructura recomendada por W3C para los cambios direccionales. Guía de W3C sobre frases anidadas.

Cuando se desconoce la dirección de la etiqueta insertada, bdi proporciona aislamiento y, de forma predeterminada, detección automática de la dirección. Un span simple, sin dir, no ofrece ese mismo valor predeterminado. WHATWG especifica que bdi usa auto de forma predeterminada, en lugar de heredar la dirección de la manera habitual. Estándar HTML: el elemento bdi.

La dirección automática es una heurística basada en el primer carácter fuertemente direccional, con exclusiones especificadas para los elementos direccionales anidados. No comprende el significado previsto de una etiqueta. Por tanto, una etiqueta que empiece con A1 aporta una señal de izquierda a derecha aunque su contenido posterior sugiera otra presentación. Usa una dirección explícita cuando ya conozcas el requisito. MDN: atributo global dir.

Una etiqueta compuesta solo por formas y dígitos requiere especial cuidado: no contiene ninguna letra fuertemente direccional. En los ejemplos en línea habituales de aquí, el algoritmo HTML recurre a la dirección de izquierda a derecha cuando la detección automática no encuentra ningún carácter que cumpla los requisitos. Especifica dir="rtl" si esa secuencia sintética debe tener una base de derecha a izquierda. Estándar HTML: el atributo dir.

¿Cuándo conviene usar la incrustación y las sobrescrituras?

La incrustación crea otro nivel direccional y conserva el orden habitual de los caracteres en su interior. Su límite también influye direccionalmente en el texto circundante. El aislamiento da al contenido su propio ámbito y hace que la secuencia se comporte de forma neutra respecto de lo que la rodea. La especificación de W3C distingue explícitamente estos efectos internos y externos. CSS Writing Modes Nivel 3: incrustaciones y sobrescrituras.

Elige la incrustación solo cuando esa influencia direccional externa forme parte del resultado previsto. Para una etiqueta anidada independiente seguida de un recuento separado, el aislamiento suele ser la opción adecuada. Que haya un nivel de anidamiento adicional no es, por sí solo, motivo para elegir embed: los tramos aislados pueden contener otros tramos direccionales.

Una sobrescritura cambia la regla interna. Fuerza el texto inmediato a seguir la secuencia de la dirección especificada, en vez de permitir que el algoritmo habitual resuelva sus segmentos direccionales. isolate-override añade un límite de aislamiento alrededor de ese orden forzado. Son comportamientos distintos, no ajustes más potentes para corregir una frase habitual. Valores de unicode-bidi de MDN.

Para una demostración intencional del orden de los caracteres, usa bdo con dir="ltr" o dir="rtl". El estándar HTML exige una dirección explícita y prohíbe auto en este elemento. Sus reglas de representación usan unicode-bidi: isolate-override, así que el comportamiento actual de bdo en HTML incluye el aislamiento. Estándar HTML: el elemento bdo, Estándar HTML: representación del texto bidireccional.

Esta distinción importa para las etiquetas latinas: una base de derecha a izquierda no significa «invertir cada carácter latino». Una sobrescritura puede forzar esa secuencia. Aun así, los glifos individuales conservan su orientación; bdo no dibuja las formas de las letras al revés. MDN: elemento bdo.

Prueba una página de comparación completa en tu Mac

La siguiente página independiente solo necesita un navegador y un editor de texto sin formato. Las dos primeras filas comparan el tratamiento direccional habitual con el orden forzado. Las filas restantes muestran las opciones de anidamiento y delimitación. La fila de incrustación CSS se incluye como demostración del mecanismo; para una etiqueta independiente habitual, empieza con la fila de aislamiento HTML.

En TextEdit, elige File > New y luego Format > Make Plain Text. Pega el código completo que aparece a continuación. Elige File > Save, asigna el nombre bidi-demo.html al archivo y selecciona Use .html si aparece la opción. Estos son los pasos documentados por Apple para crear un archivo HTML. Abre el archivo guardado en tu navegador de escritorio. Apple: trabajar con documentos HTML en TextEdit en Mac.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Inspecciona las dos primeras filas antes de cambiar nada. El tramo direccional habitual debe conservar ABC en el orden de letras de izquierda a derecha. La sobrescritura debería mostrar CBA al leer desde el borde izquierdo. Esto es una expectativa basada en los mecanismos documentados, no una medición del navegador. MDN: comportamiento de bdo.

A continuación, compara las filas de aislamiento anidado e incrustación. Mantén las palabras y el recuento sin cambios mientras examinas la secuencia de formas y la puntuación en su límite. Los mecanismos son distintos aunque una muestra concreta parezca idéntica: no se garantiza que el aislamiento y la incrustación produzcan resultados visiblemente distintos para todas las cadenas. La diferencia documentada se refiere a cómo participa el ámbito en la resolución bidireccional circundante. W3C: CSS Writing Modes Nivel 3.

Para probar un límite, mueve los dos puntos dentro del tramo direccional externo, guarda y vuelve a cargar la página. Después, vuelve a colocarlos fuera. Estás cambiando a qué frase pertenece la puntuación, así que evalúa el resultado según esa pertenencia prevista. Por último, estrecha la ventana del navegador para comprobar los mismos límites cuando la oración se ajuste en varias líneas.

El fondo y el contorno punteado identifican el tramo probado. Son ayudas de inspección. No aportan dirección ni aislamiento.

¿Cómo se diagnostica un resultado que sigue pareciendo incorrecto?

Empieza por la frase afectada más pequeña y amplía el análisis hacia afuera. Cambiar varias propiedades direccionales a la vez dificulta identificar qué límite causó el resultado.

  1. Comprueba el contenedor. ¿Incluye toda la etiqueta y solo esa etiqueta? La puntuación de la oración y los recuentos separados deben quedar fuera, salvo que pertenezcan a la etiqueta.
  2. Comprueba las frases anidadas. Un identificador con dirección independiente dentro de otra frase puede necesitar su propio contenedor dir.
  3. Comprueba la dirección automática. Si se conoce la dirección base prevista, sustituye auto por esa dirección explícita. Esto resulta especialmente útil para formas y dígitos sintéticos.
  4. Comprueba si hay sobrescrituras. Si el orden de los caracteres se fuerza inesperadamente, inspecciona bdo y las declaraciones CSS de unicode-bidi.
  5. Comprueba la cascada CSS. Una regla del autor puede reemplazar el estilo direccional del navegador. Quita las reglas bidireccionales experimentales y vuelve a probar el marcado HTML.

Las dos primeras comprobaciones siguen la guía de W3C sobre delimitación y anidamiento. La comprobación de dirección automática sigue la documentación de MDN sobre dir; las últimas comprobaciones siguen las reglas de representación HTML.

Distingue también el orden de la alineación. text-align: right coloca el contenido en línea junto al borde derecho de un bloque; no establece una frase aislada. text-align: start sigue la dirección del bloque, así que un cambio en la dirección base también puede cambiar el borde que utiliza. Diagnostica por separado el problema del orden de los caracteres y la posición de la línea. MDN: text-align.

En cuanto a la compatibilidad, WHATWG documenta que bdi y bdo son compatibles con todos los motores de navegador actuales. Eso no demuestra que sean compatibles con todos los navegadores antiguos o visores integrados. Si compruebas otro entorno de representación, prueba el destino real y conserva el marcado HTML direccional: MDN lo recomienda frente al aislamiento basado solo en CSS, porque es posible que se ignore el estilo. Estándar HTML: semántica a nivel de texto, MDN: notas de uso de bdi.

Termina tomando una decisión explícita para cada frase anidada: su dirección base, su límite y si su orden interno de caracteres debe seguir siendo el habitual. Para una etiqueta independiente, empieza con el aislamiento. Conserva una incrustación o una sobrescritura solo cuando el diseño requiera ese comportamiento documentado específico.

Fuentes