Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Crea fácilmente texto lateral utilizando la propiedad «modo de escritura» de CSS

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este consejo rápido, te enseñaré cómo mostrar el texto de una página web de arriba hacia abajo, y no de izquierda a derecha (o de derecha a izquierda). Existen dos enfoques, uno es mejor que el otro, ¡así que vamos a empezar!

Cómo utilizar el «modo de escritura» (“writing-mode”) de CSS

Enfoque 1: transformaciones CSS

Si estás familiarizado con CSS instintivamente podrías pensar que la propiedad transform sería el mejor método para tratar este problema, pero déjame mostrarte por qué no es lo ideal. Empezaremos con algo de contenido (algunos encabezados y un párrafo), después aplicaremos transform, junto con transform-origin, de tal modo que gire desde el punto correcto, luego una compensación para mantenerlo en la pantalla:

Este enfoque funciona en términos de rotación del texto, pero el flujo del documento no se ve afectado, por lo que h2 en nuestro caso ahora está colocado encima del contenido debajo de él. Aún así, nos da un resultado abstracto bastante bien.

Enfoque 2: modo de escritura de CSS

Nuestro segundo enfoque mantendrá el flujo del documento de forma que se mantenga fiel a las dimensiones de h2, independientemente de la dirección del texto. Usaremos la propiedad modo de escritura, de esta manera:

En este caso le hemos dado un valor de vertical-rl, que aplica una dirección de visualización vertical, y una dirección de texto de derecha a izquierda. Mira:

Mucho mejor. También notará que el cursor también cambia, lo que no ocurre con la transformación CSS.

css cursorcss cursorcss cursor

Dirección del flujo del bloque

Quizá habrás notado que hemos usado un valor de rl (de derecha a izquierda) considerando que estamos acostumbrados a leer la escritura latina de izquierda a derecha. Pero eso es porque hemos cambiado la dirección del flujo del bloque. Si le damos a nuestro h2 un valor de altura determinado, verás la envoltura del texto y te darás cuenta de que en este caso realmente necesitamos que las líneas se lean desde la derecha de la página a la izquierda:

Esto nos lleva a la necesidad de definir qué fragmentos de toda esta alineación necesitan fluir y en qué direcciones. Las escrituras basadas en el latín fluyen de arriba a abajo (esta es la dirección del flujo del bloque). Su texto se lee de izquierda a derecha (esta es la dirección del flujo en línea). Y sus caracteres tienen un punto de referencia en la parte inferior mientras apuntan hacia arriba (esta es la dirección del carácter). De esta manera:

Otras escrituras, como las basadas en el árabe, las basadas en el Han (como el chino y el japonés) y las basadas en el mongol, pueden mostrar el texto usando estos tres flujos en cualquier combinación de direcciones.

Escritura y modo de escritura

La especificación del modo de escritura fue diseñada para admitir todos las distintas escrituras y sistemas de escritura del mundo. Por ejemplo, mencionamos los sistemas basados en el mongol, cualquiera de ellos se muestra de forma vertical, pero fluye de izquierda a derecha.

Otros valores del modo de escritura, que puedes utilizar hoy, son:

  • vertical-lr donde el texto fluye verticalmente, pero empieza a la izquierda del contenedor que fluye a la derecha.
  • horizontal-tb donde el texto permanece horizontal, pero fluye de arriba a abajo. Esto (habrás notado) es el comportamiento por defecto.

Orientación del texto

Aquí hay un tema más para ver: un poema chino, utilizando el modo de escritura vertical-rl. Su contenido está flotando a la derecha (propiedad float), de modo que empiezas a la derecha de la página y se lee hacia la izquierda. Pero lo que quizá notes es que los caracteres siguen orientados hacia arriba. Los caracteres latinos se orientarían de manera diferente con estas mismas reglas. Esto es deliberado:

«El estándar Unicode asigna una propiedad a cada carácter y los navegadores pueden utilizar esto para determinar la orientación predeterminada de un carácter determinado». - W3C

Puedes adecuar aún más la orientación de los caracteres utilizando la propiedad text-orientation.

Conclusión

Al momento de escribir este artículo, el modo de escritura de CSS tiene una excelente compatibilidad con los navegadores, aunque algunos aspectos del mismo aún están en desarrollo. Todo lo que he realizado en este tutorial se puede usar en producción ahora mismo.

Ya sea que lo utilices para efectos prácticos o estéticos, ¡haznos saber lo que has hecho en los comentarios!

Enlaces útiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.