Las propiedades CSS direction y unicode-bidi permiten establecer la dirección del texto y el desbordamiento horizontal. Su uso puede ser necesario para ciertos idiomas, como el árabe, el hebreo o el persa, que no se escriben de izquierda a derecha, sino de derecha a izquierda. Estas direccionalidades son conocidas en CSS como «modos de escritura».
Hay que tener en cuenta que lo más correcto es usar el atributo dir en el documento HTML, de forma general para todos los elementos. No obstante, con la propiedad CSS direction es posible definir la direccionalidad del texto de forma individual en algunos elementos HTML. Así, se puede usar en párrafos cuyo idioma sea diferente al idioma principal del documento.
Por tanto, usar esta propiedad puede ser fundamental para garantizar la legibilidad de un texto que deba ir en otro idioma diferente al del documento HTML. De esta forma se podrá escribir texto de forma bidireccional, mezclando texto que va de izquierda a derecha con texto que va de derecha a izquierda.
Para controlar la orientación del texto en contextos de escritura vertical, utilizada en algunos idiomas asiáticos como el chino o el japonés, se puede usar las propiedades writing-mode y text-orientation.
El lenguaje CSS utiliza un algoritmo definido por el «estándar Unicode» para determinar el sentido correcto de cada bloque de texto. Este estándar internacional es el sistema de codificación de caracteres que permite representar de forma virtual todos los caracteres de todos los sistemas de escritura del mundo.
A menos que se use la propiedad CSS direction, los navegadores web usarán por defecto los algoritmos que se definen en el «estándar Unicode».
La propiedad ‘direction’
Con la propiedad direction se controla la direccionalidad del texto en un elemento HTML. También permite establecer la dirección de las columnas de una tabla y el desbordamiento horizontal. La mayoría de idiomas usan el texto de izquierda a derecha, por tanto el valor por defecto es ltr.
Esta propiedad puede tener uno de los siguientes valores:
| Valor | Descripción |
|---|---|
ltr | De izquierda a derecha. |
rtl | De derecha a izquierda. |
Las letras ltr son un acrónimo de la expresión inglesa Left-To-Right, que significa «de izquierda a derecha». Por su parte, rtl son las iniciales de Right-To-Left y significa «de derecha a izquierda».
El siguiente texto tiene la direccionalidad por defecto (ltr):
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vamos a invertirla con el valor rtl.
Código CSS:
.rtl {
direction: rtl;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tal y como se puede observar en este ejemplo, el gran cambio en la direccionalidad se aprecia sobre todo en la última línea. Además, el punto final queda ubicado en el extremo izquierdo del párrafo.
En el caso de aplicar esta propiedad a una tabla HTML, se invertirá el orden de las columnas, de tal modo que la primera columna se verá a la derecha y la última columna se desplazará hasta la izquierda del todo.
En caso de indicar la direccionalidad a las columnas de una tabla, sus celdas no heredan el valor. En cualquier otro elemento HTML del documento, el valor de direction se hereda de forma correcta.
Si un navegador web no tiene soporte de texto bidireccional, ignorará tanto el valor de esta propiedad como el de la propiedad unicode-bidi.
La propiedad ‘unicode-bidi’
Mediante la propiedad CSS unicode-bidi se controla la bidireccionalidad del texto de un elemento HTML. Esta propiedad es útil en ciertas situaciones en las que se mezclan idiomas que se escriben de izquierda a derecha («LTR») con idiomas que se escriben de derecha a izquierda («RTL»).
Esta propiedad se usa en conjunto con la propiedad direction.
Lista de valores de la propiedad unicode-bidi:
| Valor | Descripción |
|---|---|
normal | Dirección normal, sin cambios adicionales. |
embed | Añade un nivel adicional de incrustación. |
bidi-override | Fuerza la dirección del texto. |
isolate | Aisla la dirección del texto. |
isolate-override | Aisla y anula la direccionalidad. |
plaintext | No se aplica direccionalidad. |
El valor predeterminado es normal. Con este valor se indica que el texto se comportará según la dirección que se haya indicado mediante la propiedad direction, sin realizar cambios adicionales.
Si el elemento HTML es de línea, con el valor embed se abre un nivel adicional de incrustación, lo que implica que se puede incrustar un fragmento de texto con una dirección diferente a la dirección del documento HTML.
En elementos de línea, para forzar el texto a seguir una dirección específica se usa el valor bidi-override. Por ejemplo, puede ser útil para conseguir que un texto en inglés («LTR») se muestre de derecha a izquierda («RTL»).
Con el valor isolate es posible modificar la direccionalidad de un texto, aislándolo del resto del párrafo. Por ejemplo, un texto en inglés dentro de un párrafo en árabe, este fragmento seguirá su propia dirección.
En cambio, si lo que se quiere es aislar y anular la direccionalidad del texto circundante, se debe usar el valor isolate-override.
Finalmente, con el valor plaintext es posible indicar que el texto dentro de un elemento debe ser tratado como texto plano, es decir, sin que se aplique ningún tipo de direccionalidad. Por defecto se mostrará de izquierda a derecha.
