Las propiedades CSS writing-mode y text-orientation permiten controlar la disposición y orientación del texto, tanto del bloque en su conjunto como de los caracteres, a nivel individual. Así podemos distribuir texto de arriba a abajo en vez de hacerlo de izquierda a derecha o de derecha a izquierda.
Estas propiedades añaden un gran nivel de control para soportar de la mejor forma posible contenidos con diferente orientación, incluyendo no solo los textos que se escriben de derecha a izquierda, como el idioma árabe, sino también los que se escriben de arriba a abajo, como el idioma japonés. Estas direccionalidades son conocidas en CSS como «modos de escritura».
Para controlar la dirección del texto en contextos de escritura bidireccional, en idiomas que se escriben de derecha a izquierda, como el árabe, el persa o el hebreo, se puede usar las propiedades direction y unicode-bidi.
Uno podría pensar en rotar texto usando las transformaciones CSS, con la propiedad transform y la función rotate(). Como resultado tendríamos un texto que se lee de arriba a abajo, pero el flujo normal del documento se vería afectado y el texto se pondría encima de otros elementos. Por ello, es preferible usar las propiedades descritas en este artículo.
La propiedad ‘writing-mode’
La propiedad writing-mode permite indicar si los bloques de texto (párrafos) se disponen de forma horizontal o de forma vertical. En esencia, sirve para especificar la dirección en la que el contenido de linea fluye dentro de un contenedor. Por tanto, esta propiedad determina la ordenación del contenido.
Lista de valores de la propiedad writing-mode:
| Valor | Descripción |
|---|---|
horizontal-tb | El contenido fluye en horizontal, de izquierda a derecha y de arriba a abajo. El siguiente renglón se posiciona por debajo del anterior. Valor por defecto. |
vertical-rl | El contenido fluye en vertical, de arriba a abajo; y en horizontal, de derecha a izquierda. El siguiente renglón se posiciona a la izquierda del anterior. |
vertical-lr | El contenido fluye en vertical, de arriba a abajo; y en horizontal, de izquierda a derecha. El siguiente renglón se posiciona a la derecha del anterior. |
Con el valor horizontal-tb el texto se mantendrá por defecto: dispuesto de forma horizontal, con el texto que empieza a la izquierda, siguiendo a la derecha y continuando hacia abajo cuando el texto no cabe en una línea. Pero con los valores que le confieren verticalidad, su orientación cambia por completo: el texto pasará a leerse desde arriba hacia abajo, como si lo hubiéramos rotado.
Si tuviéramos un contenedor con un titular y un párrafo, por defecto los veremos en ese orden, desde arriba hacia abajo y siguiendo el flujo normal de los elementos. En cambio, si los rotamos usando el valor vertical-rl, veremos el titular a la derecha del todo y el párrafo situado a su izquierda.
Esta característica puede ser realmente útil en estos idiomas que se escriben de forma vertical, como el japonés o el chino. También puede ser un gran recurso para crear diseños originales con el texto en una disposición diferente.
Vamos a ver un ejemplo en el que dispondremos un texto en vertical, que se lee de arriba a abajo y de derecha a izquierda. Además, para que no ocupe tanta altura, la vamos a fijar en un máximo de 120 píxeles.
Código CSS:
.vertical-rl {
height: 120px;
writing-mode: vertical-rl;
}
Resultado:
Texto que fluye en vertical, de arriba a abajo y de derecha a izquierda.
Tal y como se puede observar, el texto queda rotado 90 grados y se empieza a leer desde la derecha hacia la izquierda.
Ahora veremos el mismo ejemplo pero modificándolo para que la lectura quede invertida, fluyendo de arriba a abajo y de izquierda a derecha.
Código CSS:
.vertical-lr {
height: 120px;
writing-mode: vertical-lr;
}
Resultado:
Texto que fluye en vertical, de arriba a abajo y de izquierda a derecha.
¿Lo ves? En esta ocasión, el texto sigue rotado 90 grados, pero ahora se lee de arriba a abajo y de izquierda a derecha.
La propiedad ‘text-orientation’
La propiedad text-orientation permite controlar la orientación del texto dentro de la línea, con la condición de que esté dispuesta verticalmente. Por tanto, solo tiene efecto cuando se está utilizando la propiedad writing-mode y no esté establecida con el valor horizontal-tb, sino con valores verticales.
Lista de valores de la propiedad text-orientation:
| Valor | Descripción |
|---|---|
mixed | Los caracteres se mantienen horizontales dentro de una línea vertical, por tanto los rotará 90 grados. Es útil para mezclar texto horizontal y vertical. Se trata del valor por defecto |
upright | Los caracteres se muestran en su orientación natural, sin rotación. Esta significa que quedan en posición vertical. |
sideways | Los caracteres se muestran tal y como se verían de forma horizontal, pero con la línea de escritura girada 90 grados. |
El valor sideways-right es sinónimo de sideways, y se ha mantenido para conservar la compatibilidad. Su uso no es recomendado.
A continuación veremos un texto dispuesto verticalmente con la propiedad writing-mode y el valor vertical-lr, pero orientando los caracteres para que se mantengan en su orientación natural.
Código CSS:
.mixed {
height: 120px;
text-orientation: upright;
writing-mode: vertical-lr;
}
Resultado:
Hola, ¿qué tal?
Puedes observar que el texto queda dispuesto en vertical, fluyendo de izquierda a derecha, gracias a la propiedad writing-mode. Además, los caracteres de cada línea permanecen legibles a través del eje vertical.
Esta característica es muy útil en ciertos idiomas, como sería el caso de un poema chino en el que se usa el modo de escritura vertical-rl y necesita que los caracteres continúen orientados hacia arriba. Por esta razón sería conveniente usar la propiedad text-orientation y el valor upright.
