Tarde a lo lógico

2020 trajo otra ola de características de propiedades lógicas a los principales navegadores y disfruté mucho de mi inversión en un estilo web lógico, en lugar de físico. Siento que he aprendido una nueva forma de hablar sobre el modelo de caja que da como resultado menos código escrito con una cobertura más global.

p {  /*   */ text-align: left;  /*   */ text-align: start;  /*   */ margin-top: 1rem;  /*   */ margin-block-start: 1rem;}

Como se describe en el artículo de web.dev al que vinculé anteriormente, una propiedad lógica es aquella que hace referencia a un lado, esquina o eje del modelo de caja en el contexto de la dirección del lenguaje aplicable. Es similar a hacer referencia al brazo fuerte de alguien, en lugar de asumir que es su brazo derecho. “Derecho” es una referencia al brazo físico, “fuerte” es una referencia al brazo lógico, contextual al individuo .

Una vez que aprendí la sintaxis actualizada, me di cuenta de que otros lugares del mundo ya habían resuelto sus problemas de manera similar. La web llegó tarde a la jerga lógica. Aquí hay un par de otros lugares que ya se han vuelto lógicos.

Orientación Náutica

Babor y estribor son lados lógicos del barco que son contextuales al mismo. Me encanta cómo Wikipedia dice con confianza:

… los términos náuticos de orientación tratan sin ambigüedades de la estructura de los buques, refiriéndose respectivamente a los lados izquierdo y derecho del buque, vistos por un observador a bordo del buque mirando hacia proa”.

Propiedades lógicas centradas en vasos. Cuando trabaje con barcos, utilice un lenguaje de barco.

Esquiadores y escenarios

La izquierda del esquiador es la dirección lógica que se basa en un esquiador mirando hacia la montaña. Sin el lenguaje lógico, los esquiadores confundían izquierda y derecha, ya que dependía de dónde se encontraban cuando declaraban la dirección. Si estás en una telesilla mirando hacia la montaña, la izquierda es la derecha y la derecha es la izquierda una vez que te hayas bajado de la telesilla y hayas comenzado a esquiar montaña abajo. Entonces a esa comunidad se le ocurrió una forma lógica de hablar sobre la dirección. Su terminología, “Derecha del esquiador” e “Izquierda del esquiador”, son esencialmente propiedades lógicas contextuales. Mientras trabaja con esquiadores, utilice el lenguaje de esquiador.

De manera similar, los estudios de cine utilizan términos como “Etapa uno” y “Cámara dos”. Ayuda a orientar lógicamente a todos basándose en un entendimiento común, no en una dirección relativa.

Conclusión lógica

Como industria o comunidad, hemos tenido problemas con los estilos centrados en lo físico. Agregar relleno a la izquierda y a la derecha de un botón solo es adecuado en algunos idiomas. Es como si escribieras el relleno mientras mirabas en dirección contraria en el barco. Las propiedades lógicas, mediante inline-start e inline-end, se ajustarán a todos los idiomas. No importará en qué dirección estés mirando en el barco, ya no se trata de ti.

Pruebe las propiedades lógicas en el lápiz a continuación. Observe que el navegador está trabajando muchísimo para mantener su contenido legible en todo el mundo. Tan genial.

button {  padding-block: 1ch;  padding-inline: 2ch;  border-inline: 5px solid var(--brand-1);}

Para emular la confianza que Wikipedia tenía en las direcciones lógicas náuticas: nosotros, la web, ahora podemos tratar sin ambigüedades la estructura de nuestras cajas haciendo referencia respectivamente a sus lados, contextualmente a la dirección del lenguaje. Describe el lado una vez, de una manera que siga siendo relevante para ti, pero que ahora también sea relevante para todos los demás. Piense menos, entregue más.

p {  max-inline-size: 50ch;  margin-block: 1rem;}

Para mí es fundamental que las propiedades lógicas se centren en las personas. Está centrado en el usuario debido a la dirección del idioma respectivo. Al utilizar propiedades lógicas invitamos al individuo a traer a la mesa su diversidad, complejidad e imprevisibilidad; Podemos adoptarlo y confiar en los motores del navegador para diseñarlo correctamente.

hr {  max-inline-size: 30ch;  margin-inline: auto;  border-block-start: 1px solid hsl(2rad 20% 20% / 20%);}

Deje de pensar en los estilos “arriba” e “izquierda” y comience a pensar lógicamente con propiedades de estilo “bloque” e “inicio”. Mientras trabaja con cuadros web, utilice un lenguaje de cuadros web.

El “papel mágico” de la Web es ahora aún más mágico, ya que puede resultar lo más natural posible para el usuario. Me encanta.

---

PD: Ha estado entrenando propiedades lógicas desde flexbox.