Modos de escritura y diseño CSS

Este no es un artículo sobre la aplicación práctica o creativa de esta propiedad. En cambio, quiero demostrar por qué es tan importante comprender los modos de escritura, incluso para aquellos de nosotros que rara vez necesitamos cambiar el modo de escritura de una página o componente. El soporte de múltiples modos de escritura es clave en la forma en que se han diseñado nuestros nuevos métodos de diseño de Flexbox y Grid Layout. Comprender esto puede desbloquear una mejor comprensión de cómo funcionan estos métodos de diseño.

¿Qué son los modos de escritura?

El modo de escritura de un documento o un componente se refiere a la dirección en la que fluye el texto. En CSS, para trabajar con modos de escritura usamos la propiedad writing-mode . Esta propiedad puede tomar los siguientes valores:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Si está leyendo este artículo en Smashing Magazine en inglés, entonces el modo de escritura de este documento es horizontal-tb , u Horizontal de arriba a abajo . En inglés, las oraciones se escriben horizontalmente: la primera letra de cada línea comienza a la izquierda.

Un idioma como el árabe también tiene un modo de escritura horizontal-tb . Se escribe horizontalmente, de arriba hacia abajo, sin embargo, la escritura árabe se escribe de derecha a izquierda, por lo que las oraciones en árabe comienzan a la derecha.

Los chinos, japoneses y coreanos se escriben verticalmente, con el primer carácter de la primera oración arriba a la derecha. Las siguientes oraciones se agregan a la izquierda. Por lo tanto, el modo de escritura utilizado es vertical-rl . Un modo de escritura vertical que se ejecuta de derecha a izquierda.

El mongol también se escribe verticalmente, pero de izquierda a derecha. Por lo tanto, si desea escribir escritura mongola, debe usar el modo de escritura vertical-lr .

Los otros dos valores del writing-mode están diseñados más para fines creativos que para escribir guiones verticales. El uso sideways-lr y sideways-rl gira el texto hacia los lados, incluso los caracteres que normalmente se escriben vertical y verticalmente. Desafortunadamente, los valores solo son compatibles con Firefox en este momento. El siguiente CodePen muestra todos los diferentes valores del writing-mode , deberá usar Firefox si desea ver los sideways-* en acción.

Los modos de escritura se pueden usar cuando se crea un documento que usa un idioma escrito usando ese modo de escritura. También se pueden usar de forma creativa, por ejemplo, para establecer un encabezado verticalmente al costado de algún contenido. En este artículo, sin embargo, quiero echar un vistazo al impacto que tiene el soporte de lenguajes verticales y la posibilidad de texto vertical en el diseño de CSS y en CSS en general.

Antes de hacerlo, si está interesado en el uso de modos de escritura para texto vertical, aquí hay algunos recursos útiles:

• El sitio de internacionalización del W3C tiene una gran cantidad de información útil. Lea sobre scripts RTL y texto vertical.
• Jen Simmons escribió un excelente artículo sobre los modos de escritura CSS que también incluye varios ejemplos impresos de estos modos en uso.
• Reflexiones sobre el mundo y nuestros sistemas de escritura - Chen Hui Jing
• Composición tipográfica vertical con modo de escritura revisado - Chen Hui Jing
• La propiedad de modo de escritura en MDN

El bloque y las dimensiones en línea

Cuando cambiamos el modo de escritura de un documento, lo que estamos haciendo es cambiar la dirección del flujo de bloques . Por lo tanto, rápidamente se vuelve muy útil para nosotros comprender qué se entiende por bloque y en línea.

Una de las primeras cosas que aprendemos sobre CSS es que algunos elementos son elementos de bloque, por ejemplo, un párrafo. Estos elementos se muestran uno tras otro en la dirección del bloque. Los elementos en línea, como una palabra en una oración, se muestran uno tras otro en la dirección en línea. Trabajando en un modo de escritura horizontal, nos acostumbramos al hecho de que la dimensión del bloque corre de arriba a abajo verticalmente, y la dimensión en línea de izquierda a derecha horizontalmente.

Sin embargo, como los elementos en bloque y en línea se relacionan con el modo de escritura de nuestro documento, la dimensión en línea es horizontal solo si estamos en un modo de escritura horizontal. No se relaciona con el ancho, sino con el tamaño en línea. La dimensión del bloque es solo vertical cuando está en un modo de escritura horizontal. Por lo tanto, no se relaciona con la altura, sino con el tamaño del bloque.

Propiedades lógicas relativas al flujo

Estos términos, tamaño en línea y tamaño de bloque también se utilizan como los nombres de las nuevas propiedades CSS diseñadas para reflejar nuestro nuevo mundo consciente del modo de escritura. Si, en un modo de escritura horizontal, usa la propiedad inline-size en lugar de width , actuará exactamente de la misma manera que width, hasta que cambie el modo de escritura de su componente. Si usa el width que siempre será una dimensión física, siempre será el tamaño del componente horizontalmente. Si usa inline-size , ese será el tamaño en la dimensión en línea, como muestra el siguiente ejemplo.

Lo mismo es cierto para la height . La propiedad de height siempre será el tamaño verticalmente. Se relaciona con la altura del artículo. La propiedad block-size , sin embargo, da el tamaño en la dimensión del bloque , verticalmente si estamos en un modo de escritura horizontal y horizontal en uno vertical.

Como describí en mi artículo "Comprensión de las propiedades y los valores lógicos", existen asignaciones para todas las propiedades físicas, aquellas que están vinculadas a las dimensiones de la pantalla. Una vez que empiezas a pensar en ello, gran parte de CSS se especifica en relación con el diseño físico de una pantalla. Establecemos el posicionamiento, los márgenes, el relleno y los bordes usando arriba, derecha, abajo e izquierda. Flotamos las cosas de izquierda a derecha. A veces, vincular las cosas a la dimensión física será lo que queremos, sin embargo, cada vez más pensamos en nuestros diseños sin referencia a la ubicación física. La especificación de propiedades y valores lógicos implementa esta forma de trabajo independiente del modo de escritura en todo el CSS.

Modos de escritura, Grid y Flexbox

Cuando nuestros nuevos métodos de diseño aparecieron en escena, trajeron consigo una forma agnóstica de ver el modo de escritura del componente que se presenta como un diseño flexible o de cuadrícula. Por primera vez se pedía a la gente que pensara en el principio y el final, en lugar de izquierda y derecha, arriba y abajo.

Cuando comencé a presentar por primera vez el tema de CSS Grid, mis primeras presentaciones fueron un resumen de todas las propiedades de la especificación. Mencioné que la propiedad grid-area podría usarse para configurar las cuatro líneas para colocar un elemento de la cuadrícula. Sin embargo, el orden de esas líneas no era el familiar superior, derecho, inferior e izquierdo que usamos para establecer los cuatro márgenes. En cambio, necesitamos usar arriba, izquierda, abajo, derecha, ¡el orden inverso! Hasta que entendí la conexión entre la cuadrícula y los modos de escritura, esta parecía una decisión muy extraña. Me di cuenta de que lo que estamos haciendo es establecer ambas líneas de inicio y luego ambas líneas de finalización. Usar arriba, derecha, abajo e izquierda funcionaría bien si estuviéramos en un modo de escritura horizontal, sin embargo, gire la cuadrícula de lado y eso no tiene sentido. Si usamos grid-area: 1 / 2 / 3 / 5; como en el bolígrafo debajo, las líneas se establecen de la siguiente manera:

• grid-row-start: 1; - inicio de bloque
• grid-column-start: 2 - inicio en línea
• grid-row-end: 3 - final del bloque
• grid-column-end: 5 - final en línea

Filas y columnas de Flexbox

Si usa Flexbox y agrega display: flex a un contenedor, sus elementos se mostrarán como una fila, ya que el valor inicial de la propiedad flex-direction es row . Una fila seguirá la dimensión en línea del modo de escritura en uso. Por lo tanto, si su modo de escritura es horizontal-tb una fila se ejecuta horizontalmente. Si la dirección del texto de la secuencia de comandos actual es de izquierda a derecha, los elementos se alinearán comenzando por la izquierda; si es de derecha a izquierda, se alinearán comenzando por la derecha.

Sin embargo, use un modo de escritura vertical, como vertical-rl y flex-direction: row hará que los elementos se coloquen verticalmente, ya que la dirección en línea es vertical. En este siguiente CodePen, todos los ejemplos tienen flex-direction: row , solo ha cambiado el modo de escritura o la dirección.

Agregue flex-direction: column y el diseño de los elementos en la dimensión de bloque de su modo de escritura. En un modo de escritura horizontal, la dimensión del bloque es de arriba hacia abajo, por lo que una columna es vertical. Con un modo de escritura de vertical-rl una columna es horizontal. Al igual que con el ejemplo anterior, la única diferencia entre los siguientes diseños flexibles es el modo de escritura que se utiliza.

Colocación automática de cuadrícula

Al usar la colocación automática en la cuadrícula, verá un comportamiento similar al del diseño flexible. Los elementos de la cuadrícula se colocan automáticamente según el modo de escritura del documento. El valor predeterminado es colocar los elementos en filas, que serán la dirección en línea: horizontalmente en un modo de escritura horizontal y verticalmente en uno vertical.

Intente cambiar el flujo de elementos a column como en el ejemplo a continuación. Los elementos ahora fluirán en la dimensión del bloque: verticalmente en un modo de escritura horizontal y horizontalmente en uno vertical.

Colocación en línea de cuadrícula

La colocación basada en líneas también respeta el modo de escritura. Las líneas de nuestra cuadrícula comienzan en 1, tanto para filas como para columnas. Si colocamos un elemento de la línea de columna 1 a la línea de columna 3, y estamos en un modo de escritura horizontal con una dirección de izquierda a derecha, ese elemento se extenderá desde la línea de columna más a la izquierda a través de dos pistas de cuadrícula horizontalmente. Abarcando así dos columnas.

Cambie el modo de escritura a vertical-rl y la línea de columna 1 estará en la parte superior de la cuadrícula, el elemento abarcará dos pistas verticalmente. Todavía abarca dos columnas, pero las columnas ahora se ejecutan horizontalmente.

Alineación en Grid y Flexbox

Uno de los primeros lugares en los que muchas personas habrán entrado en contacto con la forma en que Flexbox maneja los modos de escritura, sería al alinear elementos en un diseño flexible. Si tomamos el ejemplo anterior flex-direction: row , y usamos la propiedad de justify-content para alinear todos los elementos para flex-end los elementos se mueven al final de su fila. Esto significa que en un modo de escritura horizontal con dirección de izquierda a derecha, todos los elementos se mueven hacia la derecha, ya que el final de esa fila está a la derecha. Si la dirección es de derecha a izquierda, entonces todos se mueven hacia la izquierda.

En el modo de escritura vertical, se mueven hacia abajo, asumiendo que hay espacio para que lo hagan. Establecí un inline-size en los componentes de este ejemplo para garantizar que tengamos espacio libre en nuestros contenedores flexibles para ver la alineación en acción.

La alineación es un poco más fácil de entender en el diseño de cuadrícula, ya que siempre tenemos los dos ejes para jugar. Grid es bidimensional, esas dos dimensiones son bloque y en línea. Por lo tanto, puede recordar una regla si desea saber si usar las propiedades que comienzan con align- o aquellas que comienzan con justify- . En el diseño de cuadrícula, las propiedades de align- : align-content de align-items de align-self , autoalineación se utilizan para realizar la alineación del eje del bloque. En un modo de escritura horizontal que significa verticalmente, y en un modo de escritura vertical horizontalmente.

Una vez más, no usamos izquierda y derecha o arriba y abajo, ya que queremos que nuestro diseño de cuadrícula funcione exactamente de la misma manera sin importar el modo de escritura. Así que alineamos usando start y end . Si nos alineamos para start en la dimensión del bloque, estará en la top cuando esté en horizontal-tb , pero estará en la right cuando esté en vertical-rl . Mire el ejemplo a continuación, los valores de alineación son idénticos en ambas cuadrículas, la única diferencia es el modo de escritura utilizado.

Las propiedades justify-content , justify-items , justify-self siempre se usan para la alineación en línea en el diseño de la cuadrícula. Será horizontal en un modo de escritura horizontal y vertical en un modo de escritura vertical.

La alineación de Flexbox se complica un poco por el hecho de que el eje principal se puede cambiar de fila a columna. Por lo tanto, en Flexbox, debemos pensar en el método de alineación como el eje principal versus el eje transversal. Las propiedades de align- se utilizan en el eje transversal. En el eje principal, todo lo que tiene es justify-content porque tratamos los elementos como un grupo en Flexbox. En el eje transversal, puede usar align-content en los casos en que tenga varias líneas flexibles y espacio en el contenedor flexible para espaciarlas. También puede usar align-items y align-self para mover los elementos flexibles en el eje transversal en relación entre sí y su línea flexible.

Para obtener más información sobre la alineación en el diseño CSS, consulte mis artículos anteriores de Smashing Magazine:

• Cómo alinear cosas en CSS
• Todo lo que necesita saber sobre la alineación en Flexbox

Conocimiento del modo de escritura y CSS antiguo

No todo el CSS se ha puesto completamente al día con esta forma de trabajo independiente del modo de escritura y relativa al flujo. Los lugares donde no ha comenzado a destacarse como inusuales cuanto más piensas en las cosas en términos de bloque y en línea, inicio y final. Por ejemplo, en un diseño de varias columnas, especificamos column-width , que en realidad significa tamaño de columna en línea, ya que no se asigna al ancho físico cuando se trabaja en un modo de escritura vertical.

Como puede ver, los modos de escritura sustentan gran parte de lo que hacemos en CSS, incluso si nunca usamos un modo de escritura que no sea horizontal-tb .

Encuentro increíblemente útil pensar en el diseño CSS de esta manera independiente del modo de escritura. Si bien es quizás un poco pronto para cambiar todas nuestras propiedades y valores a lógicos, ya estamos en un mundo relativo al flujo cuando tratamos con nuevos métodos de diseño. Hacer que su modelo mental sea uno de bloque y en línea, de inicio y final, en lugar de estar atado a las cuatro esquinas de su pantalla, aclara muchas de las cosas con las que nos encontramos cuando usamos FlexBox y grid.