| Definición | Indica la dirección en la que se muestra el texto y su valor también lo utilizan otras propiedades CSS |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | ltr |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/visuren.html#propdef-direction |
Ejemplos de uso
Algunos idiomas como el árabe y el hebreo, muestran los caracteres de sus textos desde la derecha hacia la izquierda, al contrario que la mayoría de idiomas. Por este motivo, las páginas que contienen algún texto escrito en esos idiomas muestran el texto en dos direcciones diferentes. Este comportamiento se denomina bidireccionalidad, aunque se suele abreviar como "bidi".
El estándar Unicode define un algoritmo muy complejo para determinar el sentido correcto de cada bloque de texto. Además de tener en cuenta el propio contenido del texto, el algoritmo permite controlar y modificar la dirección del texto de forma explícita.
CSS 2.1 utiliza ese mismo algoritmo para mostrar el texto bidireccional. Además, define las propiedades direction y unicode-bidi para establecer el comportamiento del algoritmo en cada elemento de la página. Por tanto, los navegadores aplican en primer lugar el algoritmo de Unicode a cada párrafo de la página y después tienen en cuenta el valor de la propiedad direction para cada elemento.
La propiedad direction define dos valores para establecer la dirección del texto de un elemento:
* ltr, muestra el texto escrito de izquierda a derecha y es el que utilizan los navegadores por defecto.
* rtl, muestra el texto escrito de derecha a izquierda.
A continuación se muestran dos párrafos de texto iguales pero con diferente valor en su propiedad direction:
direction: ltr Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
direction: rtl Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
Cuando el texto del elemento está justificado, las diferencias entre los dos valores de la propiedad direction son más evidentes:
direction: ltr ¡Lorem ipsum dolor sit amet, consectetuer adipiscing elit!. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
direction: rtl ¡Lorem ipsum dolor sit amet, consectetuer adipiscing elit!. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
Además de la dirección del texto y la posición de la última línea de un elemento con su texto justificado (text-align: justify), el valor de la propiedad direction también determina la dirección de las columnas de las tablas y la dirección del desbordamiento horizontal (propiedad overflow) .
El siguiente ejemplo muestra dos tablas cuyo código HTML es exactamente el mismo pero que se muestran de forma diferente porque su elemento contenedor utiliza valores diferentes en la propiedad direction:
| Cabecera columna 1 | Cabecera columna 2 | |
|---|---|---|
| Cabecera columna 1 | Cabecera columna 2 | |
| Cabecera fila 1 | Valor 1-1 | Valor 1-2 |
| Cabecera fila 2 | Valor 2-1 | Valor 2-2 |
| Cabecera columna 1 | Cabecera columna 2 | |
|---|---|---|
| Cabecera columna 1 | Cabecera columna 2 | |
| Cabecera fila 1 | Valor 1-1 | Valor 1-2 |
| Cabecera fila 2 | Valor 2-1 | Valor 2-2 |
Cuando se establece la propiedad direction en las columnas de una tabla, sus celdas no heredan el valor. En cualquier otro elemento de la página, el valor de direction se hereda correctamente.
Por último, los navegadores que no soportan el texto bidireccional, ignoran el valor de esta propiedad así como el de la propiedad unicode-bidi.