Propiedad CSS unicode-bidi
La propiedad CSS unicode-bidi controla la incrustación de texto. Funciona solo con la propiedad direction. Consulta la sintaxis y práctica con ejemplos
La propiedad unicode-bidi controla cómo se presenta el texto bidireccional (bidi) — texto que mezcla escrituras de izquierda a derecha y de derecha a izquierda — permitiéndote anular el algoritmo bidireccional Unicode integrado del navegador.
La mayoría de las páginas nunca la necesitan. Los navegadores ya reordenan correctamente el texto Latino/Árabe/Hebreo mezclado usando el Algoritmo Bidireccional Unicode. Recurres a unicode-bidi solo cuando ese comportamiento predeterminado es incorrecto: por ejemplo, cuando un valor aislado (un número de teléfono, un nombre de usuario, un precio) filtra su dirección hacia la oración que lo rodea, o cuando deliberadamente deseas forzar un orden visual.
En la práctica, unicode-bidi se combina con la propiedad direction: direction establece en qué sentido corre la base del texto, y unicode-bidi decide con qué fuerza se aplica esa dirección base. Juntas son el equivalente CSS del atributo HTML dir y los elementos <bdo>/<bdi>.
unicode-bidi solo tiene efecto visible cuando el elemento también contiene texto de dirección mixta. Por sí sola no hace nada — funciona de la mano con la propiedad direction.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos, aunque algunos valores no tienen efecto en elementos que no son en línea. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.unicodeBidi = "isolate"; |
Sintaxis
Valores de CSS unicode-bidi
unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit;Ejemplo de la propiedad unicode-bidi:
En el ejemplo siguiente, el bloque .text usa direction: rtl con unicode-bidi: embed. La frase en árabe mantiene su orden natural de derecha a izquierda, mientras que la incrustación añade un nivel adicional bidi para que todo el bloque se trate como de derecha a izquierda — la puntuación y las palabras latinas se posicionan en relación con esa base de derecha a izquierda.
Ejemplo de código CSS unicode-bidi
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: embed;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "embed" value. مرحبا بالعالم</div>
</body>
</html>Ejemplo de la propiedad unicode-bidi con el valor "bidi-override":
bidi-override es el valor más agresivo: ignora la dirección inherente de los caracteres y coloca cada carácter estrictamente en el orden establecido por direction. Con direction: rtl a continuación, incluso el texto Latino se invierte carácter por carácter, por lo que este valor es útil principalmente para efectos especiales en lugar de texto real de un documento.
Ejemplo de CSS unicode-bidi bidi-override
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "bidi-override" value. مرحبا بالعالم</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| normal | No sugiere un nivel adicional de incrustación. |
| embed | Abre un nivel adicional de incrustación en caso de que el elemento sea en línea. |
| bidi-override | Crea una anulación para un elemento en línea. Para elementos de contenedor de bloque, este valor crea una anulación para los descendientes de nivel en línea. |
| isolate | El elemento está aislado de sus hermanos. Este valor especifica que la direccionalidad del contenedor del elemento debe calcularse sin tener en cuenta el contenido de este elemento. |
| isolate-override | Aplica el comportamiento de aislamiento al contenido circundante y el comportamiento de anulación al contenido interno. |
| plaintext | Este valor se comporta como el valor isolate, pero la direccionalidad se calcula usando las reglas P2 y P3 del Algoritmo Bidireccional Unicode. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
¿Qué valor debes usar?
- ¿Solo incrustar una frase en la dirección opuesta? Usa
embedjunto con la direction correspondiente. Este es el caso clásico de "citar algo en árabe dentro de un párrafo en español". - ¿Insertar texto generado por el usuario de dirección desconocida (un nombre, un comentario, un término de búsqueda)? Prefiere
isolate. Evita que ese fragmento cambie la dirección de las palabras que lo rodean — la misma protección que ofrece el elemento HTML<bdi>. plaintextes para contenido como mensajes de chat o líneas de registro donde cada párrafo debe elegir su propia dirección a partir de su primer carácter fuerte, en lugar de heredar una de la página.bidi-overridedebería ser poco frecuente. Úsalo solo cuando intencionalmente desees forzar el orden visual (por ejemplo, reflejar texto como efecto), ya que anula el orden de lectura natural de cada carácter.
Ten en cuenta que unicode-bidi no es animable, por lo que las transiciones y animaciones no tienen efecto sobre ella.
Propiedades relacionadas
- direction — establece la dirección base del texto (
ltrortl) sobre la queunicode-bidise construye. - writing-mode — controla el flujo de bloque horizontal frente al vertical.
- text-align — alinea el texto dentro de su caja de línea, lo que a menudo necesita ajuste para contenido RTL.