El futuro de CSS: Modos de escritura + Propiedades y valores lógicos.
Maquetar un sitio que soporta diferentes modos de escritura puede ser un dolor de cabeza si usas las propiedades relativas al flujo físico (las que usan *-top, *-left, *-bottom y *-right). ¿Solución?: Propiedades y valores relativos al flujo lógico (*-block/inline -start/end). Aquí te explico todo :)

Introducción
¿Qué pensarías si te dijera que en un futuro no muy lejano podrás escribir margin-block-start: 5px en vez de escribir margin-top: 5px? ¿o colocar un borde escribiendo border-inline-end: 5px solid pink en vez de border-right: 5px solid pink? Mi primer pensamiento fue “wtf? ¿como pa’ que? ¿cuál es la diferencia? ¿hacen lo mismo?”
Pues sí. Hacen casi lo mismo, pero estas nuevas propiedades tienen una utilidad y un propósito mucho más profundo del que te imaginas. Se llaman propiedades y valores lógicos.
En la W3C están trabajando en ellas desde hace algún tiempo. La especificación aún se encuentra en estado de “Draft” (Borrador), pero ya existe el soporte en algunos navegadores para que puedas jugar con ellas.

A pesar de que aún no se pueden usar en producción estas propiedades, la comunidad recomienda que se investigue sobre ellas y se entienda el comportamiento desde ahora, porque introducen nuevos conceptos que son clave para comprender mejor el nuevo layout de CSS Grid y te ahorra muchísimo trabajo para usar diferentes modos de escritura en tu sitio web.
Antes de hablarte de las propiedades y valores lógicos, voy a salirme un poquito del tema para explicar 3 conceptos que son clave para que comprendamos mejor el valor de las mismas. Te advierto que será un artículo largo, así que puedes traerte tu cafecito para que lo leas a gusto :)
1. “Writing modes” o modos de escritura
Para entender mejor las propiedades y valores lógicos, es necesario saber que en CSS existe una propiedad (también en estado de Draft) llamada writing-mode que te permite cambiar el modo de escritura de tu página. Esta propiedad, aparte de usarla con propósitos creativos (Fig. 2), está pensada para que la uses cuando estás construyendo un sitio web que tiene que soportar varios lenguajes, especialmente para los que se leen en dirección diferente a la que estamos acostumbrados, como el Chino, Japonés, Coreano, ó Árabe, por mencionar algunos (Fig. 3).


¡Wow! Sitios que se leen en una dirección diferente… no lo había pensado. Pero, ¿qué tan diferentes pueden ser? ¿Cuántas combinaciones podrían existir? En la especificación de writing-mode mencionan cuatro ejemplos de diferentes sistemas de escritura:
- Los sistemas basados en Latín: Cada línea se lee de izquierda a derecha y el bloque (párrafo) se va leyendo de arriba hacia abajo.
- Los sistemas basados en Árabe: Cada línea se lee de derecha a izquierda y el bloque (párrafo) se va leyendo de arriba hacia abajo.
- Los sistemas basados en Mongol: Cada línea se lee de arriba hacia abajo y el bloque (párrafo) se va leyendo de izquierda a derecha.
- Los sistemas basados en Han: Cada línea se lee de arriba hacia abajo y el bloque (párrafo) se va leyendo de derecha a izquierda. Este último también suele utilizar el mismo que los sistemas basados en Latín.
Yo lo sé, suena un poco confuso, pero se explica mejor con una imagen:

Ahora, ¿cómo podemos usar la propiedad writing-mode en CSS? Los 5 valores que tiene disponibles hasta el momento son:
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;Básicamente, los valores siguen el siguiente patrón:
<dirección de lineas>-<dirección de bloques>
- Los valores
horizontal/verticalse refieren a la dirección de las líneas. - Los valores
-tb,-rl,-lr(“top to bottom”, “right to left” y “left to right” respectivamente) se refieren al a dirección de los bloques (o párrafos). - La palabra
sidewaysmuestra los caracteres de lado, incluyendo los sistemas de escritura verticales.
Aquí te pongo un demo para que veas cómo funciona:
Si no funciona el demo en tu navegador (a mi sólo me funcionó correctamente en Firefox), te dejo el screenshot de cómo debería visualizarse correctamente:

Bien, ahora que ya conocemos la propiedad de writing-mode y los diferentes modos de escritura, vamos por el siguiente concepto:
2. Dimensiones de líneas y de bloques
Los conceptos de las dimensiones de líneas y las dimensiones de bloques (inline dimension, block dimension) son la clave de todo lo que va a definir el flujo lógico. Seguramente ya te hizo un poco de sentido leyendo los ejemplos de los sistemas de escritura, pero por si no te diste cuenta, podemos recapitular de nuevo los conceptos:
- La dimensión de línea (inline dimension) se refiere a la dirección que sigue cada caracter en una frase. Piensa en que es la dirección en la que lees línea por línea (Por ejemplo: en Español, es de izquierda a derecha. En Japonés, de arriba hacia abajo).
- La dimensión de bloque (block dimension) se refiere a la dirección que sigue cada conjunto de líneas, es decir un bloque. Piensa en que es la dirección que siguen los párrafos. (Por ejemplo: en Español, los párrafos van de arriba hacia abajo. En Japonés, de derecha a izquierda).
Para aprendértelos más rápido, puedes pensar también en la propiedad display de CSS.
display: block;
display: inline;¿Recuerdas qué elementos son los que tienen display: blockpor default? ¡Los párrafos! <p>Soy un bello párrafo</p> ¿Y los elementos que tienen por default display: inline? Puede ser un <span> , o un <a> , y justo son elementos que viven dentro de una línea.
3. Flujo físico vs. Flujo Lógico
Ya que tenemos claros los conceptos de los modos de escritura y de las dimensiones de bloque y línea, puedo empezar a contarte sobre el flujo físico y el flujo lógico.
El flujo físico es el que siempre hemos utilizado como referencia para tomar las coordenadas “top, left, right y bottom” de varias propiedades, como el margin, el padding, las posiciones, etc. Desde que se inventó el CSS, si tu pones un “margin-top: 10px” siempre se va a referir al “top” del dispositivo desde donde estás viendo tu sitio web. Si pones un “border-right”, siempre se referirá a la derecha del dispositivo.
El flujo lógico no depende del dispositivo, dependerá de hacia dónde se dirijan las dimensiones de línea y de bloque. De hecho, las propiedades que dependen del flujo lógico ya no utilizarían las palabras “top, left, right o bottom”, utilizarían la combinación de palabras “block/inline - start/end”.
Propiedades y valores lógicos
¡Por fin! Ya tenemos claros los 3 conceptos clave. Ahora, voy a tratar de explicar su utilidad con un ejemplo que viene también en la especificación. Tomemos el caso de cómo maquetar un párrafo citado:
Para maquetar un párrafo citado como el de la Fig. 6, necesitas añadir un margin, un border y un padding del lado izquierdo en el caso del idioma Español, además de alinear el texto del lado izquierdo. En el caso del idioma Árabe, el margin, el border y el padding deben quedar del lado derecho, al igual que la alineación de su texto. (Recuerda que en árabe, las líneas se leen de derecha a izquierda).

Si no existieran las propiedades y valores lógicos, la solución que podríamos implementar sería colocar una clase diferente para cada idioma. Digamos que podrías reducir la cantidad de código si usas Sass (creando un mixin) o si usas operadores ternarios si estás usando CSSinJS. Podrías incluso usar las propiedades customizables (o variables de CSS), o algún plugin de PostCSS, pero de cualquier manera tendrías que hacer ajustes para cada uno de tus elementos, y escribir las propiedades dos veces:
.es blockquote {
text-align: left;
margin-left: 10px;
padding-left: 10px;
border-left: 5px solid #BD10E0;
}.ar blockquote {
text-align: right;
margin-right: 10px;
padding-right: 10px;
border-right: 5px solid #BD10E0;
}
Imagina la cantidad de cosas que tendrías que escribir dos veces. Ahorita sólo estamos hablando de un pequeño párrafo citado, pero en un sitio completo tienes una gran cantidad de componentes. Tendrías que escribir tu código de una manera super organizada, y eso considerando que sólo estamos manejando dos modos de escritura diferentes.
La solución que nos ofrecen las propiedades y valores lógicos es una más elegante. Sólo tienes que escribir tus propiedades una sola vez. Tendrías que cambiar las palabras “left”, “right” por “block/inline — start/end”. Y esos estilos te servirían para cualquier modo de escritura, ya no tendrías que ajustar nada.
Retomando el ejemplo, en vez de escribir “border-left”, usarías “border-inline-start”, ya que lo que queremos es colocar el borde del lado donde empiezas a leer línea por línea, no del lado “izquierdo” o “derecho” como tal, porque ya vimos que nuestros 2 idiomas de ejemplo se empiezan a leer de un lado o de otro. Lo mismo pasa con el “margin” y el “padding”.
El código entonces quedaría así:
blockquote {
text-align: start; /* left para ES, right para AR */
margin-inline-start: 10px; /* margin-left para ES, margin-right para AR */
padding-inline-start: 10px; /* padding-left para ES, padding-right para AR */
border-inline-start: 5px solid #BD10E0; /* border-left para ES, border-right para AR */
}Y ya está. Así es como se vería en un demo real:
Recomiendo que lo abras en Firefox. Pero por si no se ve bien en tu navegador, te pongo el screenshot de cómo debería verse correctamente:

Si observaste bien el ejemplo, también le coloqué un “margin-bottom” al elemento h2. Pero no lo escribí como “margin-bottom”, lo escribí como “margin-block-end”, ya que quiero que el margen se coloque justo donde termina mi bloque. Si mi dirección de bloque va de arriba a abajo, pues el “margin” se comporta como “margin-bottom”, pero si mi dirección de bloque va de derecha a izquierda, se comporta como un “margin-left”, porque mi bloque termina del lado izquierdo.
Está bien loco :) pero súper útil una vez que comprendes cómo usarlas.
En el ejemplo, solo te hablé de algunas propiedades, pero la lista completa es esta:
/* ---------------------------------------------------*/
PROPIEDAD PROPIEDAD LÓGICA
/* ---------------------------------------------------*/ width block-size
max-width max-block-size
min-width min-block-size height inline-size
max-height max-inline-size
min-height min-inline-size margin-top margin-block-start
margin-left margin-inline-start
margin-right margin-inline-end
margin-bottom margin-block-end padding-top padding-block-start
padding-left padding-inline-start
padding-right padding-inline-end
padding-bottom padding-block-end border-top border-block-start
border-left border-inline-start
border-right border-inline-end
border-bottom border-block-end top inset-block-start
left inset-inline-start
right inset-inline-end
bottom inset-block-end
Si te das cuenta, las puedes aprovechar también para cuando tienes que hacer una página que compara datos en modo espejo, no necesariamente las tienes que usar si tienes varios idiomas. A principios del año pasado (2017), en el lugar donde estoy trabajando, tuve que hacer un layout como este:

Justo ahí estoy ocupando operadores ternarios de JS para saber si debo alinear los elementos a la derecha o a la izquierda dependiendo de la columna en la que estén implementados. Como es una aplicación que está hecha con React, pude usar Glamor.js y con eso pude escribir los estilos relativos. De haber conocido las propiedades lógicas en ese momento, me hubieran ayudado muchísimo.
¿Qué tienen que ver con el nuevo Layout de CSS Grid?
Al principio de este artículo mencioné que era importante conocer estas propiedades porque tenían que ver con el nuevo layout de CSS Grid. Voy a retomar las propiedades que usamos para definir el área de una rejilla:
.item {
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;
}¿Ahora te suenan un poco familiares? Se parecen un poquito a las propiedades lógicas, la diferencia es que utilizan las palabras “row” y “column” en vez de “block o inline”. Pero ¿qué crees? estas propiedades se dirigen por el flujo lógico también. La propiedad “grid-row” fluye en la dimensión de bloques, mientras que “grid-column” en la dimensión de líneas.
Eso quiere decir que si construimos un layout con CSS Grid y le cambiamos el modo de escritura, el layout se va a adaptar igual que las propiedades lógicas.
¿No me crees? Veamos el demo:
Como siempre, me funcionó perfecto en Firefox. Por si no lo ves bien en tu navegador, te dejo el screenshot:

Conclusión
Básicamente, lo que quieren hacer las personas que están escribiendo la especificación es promover el uso de un flujo lógico en vez del flujo físico que hemos utilizado desde el inicio de los tiempos. Ya lo vimos con las propiedades de Flexbox y de Grid, en las que no están utilizando las palabras “top/left/bottom/right”, sino “start/end”. La ventaja de todo esto es que podemos utilizar estas especificaciones a nuestro favor implementando layouts y elementos con estilos más flexibles, todo con menos líneas de código.
Aún falta tiempo para que podamos utilizar estas propiedades en nuestros proyectos día a día, pero imagina el poder que nos estarán brindando y todos los usos creativos que les podremos dar.
Para saber más
- Understanding Logical Properties And Values — Rachel Andrew
- CSS Writing modes — Jen Simmons
- Especificación de Valores y Propiedades Lógicos de CSS
- Especificación de los Modos de Escritura de CSS
- CSS Logical Properties and Values in Chromium and WebKit — Manuel Rego Casasnovas
