Propiedad unicode-bidi de CSS

Los que trabajamos con hojas de estilos normalmente estamos acostumbrados a tratar con casi todas las propiedades de CSS, sin embargo existen unas cuantas que son las grandes desconocidas y aquí nos gusta darles su minuto de fama. Así que en este artículo, vamos a intentar explicar de la manera más clara posible para qué sirve y cómo se usa la propiedad unicode-bidi, que viene implementada desde CSS2.

Para hablar sobre unicode-bidi, primero hay que refrescar la memoria sobre otra propiedad de la que ya tuvimos ocasión de hablar, la propiedad direction. Ésta se utilizaba para definir la dirección de un texto según el idioma en el que estuviera escrito. Es importante tenerla en cuenta, ya que se usarán conjuntamente cuando se apliquen.

Hay ocasiones en las que en un mismo párrafo existen diferentes direcciones de lectura y cuando esto sucede, el Algoritmo Bidireccional de Unicode que utiliza HTML entra en acción. Este algoritmo es el que permite que un navegador interprete correctamente un texto en el que hay más de un idioma con diferentes direcciones de lectura. Imaginemos que tenemos un párrafo escrito en castellano, por ejemplo y hacemos una referencia escrita en árabe. En este caso nos encontramos con que la orientación del párrafo es de izquierda a derecha, pero la cita, debe poder leerse de derecha a izquierda. Cuando se dan estos caso, es el algoritmo el que permite que se pueda cambiar tantas veces como sea necesario la orientación del texto, anidando un texto dentro de otro. En el enlace de arriba tenéis más detalles sobre cómo funciona.

Pues bien, la propiedad unicode-bidi sirve básicamente para poder manipular este algoritmo de bidireccionalidad, con la posibilidad de asignarle cuatro valores: normal (por defecto), embed, bidi-override e inherit. Vamos a verlos rápidamente uno a uno, junto con su sintaxis en CSS:

El valor normal lo usaremos para indicarle al algoritmo que no queremos crear un anidamiento determinado.

#texto {
    unicode-bidi: normal;
}

Por el contrario, usaremos embed si queremos crear un nuevo nivel de anidamiento. Para definir esa nueva dirección, usaremos la propiedad direction.

#texto {
    unicode-bidi: embed;
    direction: rtl;
}

Con bidi-override, lo que haremos es sobreescribir el valor que venga asignado desde el algoritmo.

#texto {
    unicode-bidi: bidi-override;
    direction: rtl;
}

Por último, usaremos inherit para usar el valor heredado del elemento padre.

#texto {
    unicode-bidi: inherit;
}