Cómo agregar soporte RTL a Flexbox y CSS Grid

() translation by (you can also view the original English article)

Las propiedades lógicas definen un nuevo enfoque que cambia la forma en que trabajamos con diseños en CSS. Entre muchas otras ventajas, nos permiten agregar soporte de lenguaje RTL (de derecha a izquierda) a los diseños basados en propiedades lógicas: flexbox y CSS Grid.

En este tutorial, utilizaremos dos demostraciones de Tuts+ de tutoriales anteriores, convirtiéndolas para ver qué tan fácil es realmente agregar soporte RTL a diseños lógicos:

Pero primero veamos brevemente cómo funcionan las propiedades lógicas en CSS.

1. Diseños lógicos y dirección de contenido

El objetivo principal de las propiedades lógicas de CSS es permitir a los desarrolladores cambiar fácilmente los diseños cuando cambia la propiedad writing-mode o direction. Supongamos que tienes un sitio web LTR (de izquierda a derecha) y deseas traducirlo a un script RTL como los que se usan con árabe o hebreo. Si has utilizado las propiedades lógicas en tu CSS de manera consistente, solo necesitas agregar la regla direction: rtl; a la página y el diseño cambiará automáticamente.

Las propiedades lógicas utilizan direcciones lógicas en lugar de físicas para definir diseños. Por ejemplo, la palabra clave start equivale a left en scripts de tipo LTR como el latín, y del mismo modo equivale a right en RTL. Del mismo modo, end equivale a right en LTR y a left en RTL. Es por eso que es fácil agregar soporte RTL a diseños basados en dimensiones lógicas.

Las propiedades lógicas de CSS tienen tres casos de uso principales:

flexbox (ejemplo flex-start, flex-end)
CSS Grid (ejemplo grid-row-start, grid-row-end, grid-column-start, grid-column-end)
equivalentes lógicos de propiedades de uso frecuente como margin, padding, border, text-align, y otros.

Si deseas ver ejemplos de código de los casos de uso anteriores, consulta mi artículo reciente sobre las propiedades lógicas de CSS.

CSS

Cómo usar las propiedades lógicas de CSS para controlar el diseño

Anna Monus

Ahora, veamos cómo podemos aprovechar las propiedades lógicas para agregar soporte RTL a flexbox y CSS grid.

2. Cómo agregar soporte RTL a Flexbox

El siguiente ejemplo usa flexbox para crear un diseño de un sitio web de noticias (aquí está el tutorial completo). Tiene un encabezado centrado e incluye un par de tarjetas de diferentes tamaños. La demo utiliza dos media queries: a 800px y 1000px. La disposición de las tarjetas dependerá del tamaño de ventana que veas en la demostración:

Para crear una versión RTL del CSS, tenemos que agregar solo una regla:

1	* {
2	direction: rtl;
3	}

Y, como puedes ver a continuación, la demostración se ha volteado perfectamente, no solo el texto, sino también el diseño, en cada tamaño de ventana gráfica:

¿Por qué fue tan fácil de hacer?

Cuando se usan direcciones físicas en diseños CSS, a menudo pueden estropear tus esfuerzos de RTL. Pero si miras el CSS a continuación, verás que no se usan instrucciones físicas, por lo que fue tan fácil voltear el diseño (las reglas de decoración de texto como las fuentes y los colores se han eliminado del código para facilitar la lectura) :

.header {
  padding: 40px 0 20px;
  text-align: center;
}

.header h2 a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.main {
  margin: 0 auto;
  max-width: 1040px;
  padding: 10px;
}

.column {
  flex: 1;
  flex-direction: column;
}

.article {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-basis: auto;
  margin: 10px;
}

.article-image {
  display: block;
  padding-top: 75%;
  position: relative;
  width: 100%;
}

.article-image img {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.article-image.is-3by2 {
  padding-top: 66.6666%;
}

.article-image.is-16by9 {
  padding-top: 56.25%;
}

.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.article-title {
  flex-shrink: 0;
}

.article-content {
  flex: 1;
  margin-top: 5px;
}

.article-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    height: 300px;
    order: 2;
    padding-top: 0;
    width: 400px;
  }

  .main-column {
    flex: 3;
  }

  .nested-column {
    flex: 2;
  }
}

Flexbox se encarga de todo el diseño, y las propiedades de flexbox son propiedades lógicas. Las propiedades de tamaño y alineación, como border, margin, padding, y width, pueden causar problemas en ciertos casos, ya que dependen de direcciones físicas en lugar de lógicas. Por ejemplo, la demostración utiliza la propiedad antigua de padding-top en lugar del nuevo padding-block-start, su equivalente lógico.

Sin embargo, como queremos realizar una conversión de LTR a RTL, solo necesitamos voltear el eje horizontal (izquierda-derecha) pero no el vertical (arriba-abajo). El código anterior solo contiene propiedades que definen direcciones verticales como padding-top y border-bottom. Estos permanecen igual en ambos diseños.

Como no hay ninguna propiedad en el código que defina direcciones horizontales (por ejemplo, el relleno a la izquierda mediante padding-left sería una propiedad de este tipo), no tenemos que ajustarlas para que se ajusten a los scripts RTL.

3. Cómo agregar soporte RTL a CSS Grid

Ahora, veamos la demostración con CSS Grid. Define un diseño asimétrico construido sobre la cuadrícula CSS (aquí está el tutorial completo):

Agreguemos la misma regla direction al CSS y veamos cómo modifica el diseño original:

1	* {
2	direction: rtl;
3	}

Así es como se volcó la demostración:

Aunque la mayoría de los elementos se voltearon como se esperaba, falta algo. Si comparas las dos demostraciones cuidadosamente, puedes ver que la insignia de la corona entre las imágenes y el titular de "Gibraltar" ha desaparecido.

Entonces, ¿dónde está la corona?

El CSS nos da la respuesta de por qué falta la corona. Todavía está allí, pero oculto en el fondo. Aquí está el código CSS de la demostración (sin color, fuente y otras reglas de decoración de texto):

blockquote {
  margin: 0 0 2em 0;
}

.cta {
  padding: 100px 0 100px 20%;
}

.cta h1 {   
  margin: 0 0 20px 0;
  position: relative;
}

.button {
  display: inline-block;
  padding: .8em 1.5em;
}

.strapline {
  margin-top: 100px;
  position: relative;
}

.strapline::before {
  content: '';
  display: block;
  background: url(wavy.svg) repeat-x;
  background-size: cover;
  width: 20%;
  height: .5em;
  position: absolute;
  top: -3em;
  left: 40%;
}

.cta h1::before {
  content: '';
  display: block;
  height: 1em;
  width: 1em;
  background: url(badge.svg) no-repeat center center;
  background-size: 80%;
  position: absolute;
  left: -120px;
  top: 0;
}

/* Grid layout */
.grid1 {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
  grid-template-rows: 100px auto 15px auto auto;
}

.img1 {  
  background: url(wooden.jpg);
  background-size: cover;
  
  grid-column: 1 / span 2;
  grid-row: 2 / span 3;
}

.img2 {  
  background: url(speaker.jpg);
  background-size: cover;
  
  grid-column: 2 / span 2;
  grid-row: 3 / span 3;
}

.img3 {  
  background: url(waves.jpg);
  background-size: cover;
  
  grid-column: 5 / span 2;
  grid-row: 4 / span 2;
}

.strapline {
  grid-column: 3 / span 3;
  grid-row: 2 / span 1;

  padding: 0 16%;
  text-align: center;
  margin: 0;
}

.cta-wrapper {
  grid-column: 4 / span 2;
  grid-row: 4 / span 2;
}

El código anterior utiliza numerosas propiedades de cuadrícula CSS como grid-row, grid-column, grid-template-rows y grid-template-columns. Sin embargo, como la cuadrícula CSS se basa en dimensiones lógicas en lugar de físicas, las propiedades relacionadas con la cuadrícula no pueden ser el problema.

El problema surge de otras propiedades que posicionan físicamente los elementos en la dimensión horizontal (izquierda-derecha):

1	.cta {
2	padding: 100px 0 100px 20%;
3	}
4	.strapline::before {
5	left: 40%;
6	}
7	.cta h1::before {
8	left: -120px;
9	}

Para admitir scripts RTL, necesitamos invertir a left y right de la siguiente manera:

.cta {
  padding: 100px 20% 100px 0;
}
.strapline::before {
  right: 40%;
}
.cta h1::before {
  right: -120px;
}

Si echas un vistazo a la demostración RTL modificada, puedes ver que la corona ha reaparecido y ahora todo está perfectamente alineado:

Probablemente hayas notado que en el CSS modificado, hemos utilizado la propiedad lógica right en lugar de la correspondiente. Esto se debe a que las propiedades lógicas aún no están listas para la producción, ya que el soporte del navegador todavía es algo irregular.

Sin embargo, así es como se debería ver el CSS modificado utilizando el equivalente lógico de la propiedad right:

.cta {
  padding: 100px 20% 100px 0;
}
.strapline::before {
  inset-inline-start: 40%;
}
.cta h1::before {
  inset-inline-start: -120px;
}

El equivalente de right es inset-inline-start en los scripts RTL, ya que ese es el comienzo del eje en línea. Sin embargo, en las secuencias de comandos LTR, inset-inline-start equivale a left, como en ese caso, las filas comienzan a la izquierda de la pantalla.

Por lo tanto, si la demostración original usara la propiedad lógica inset-inline-start en lugar de la dirección física left, podríamos haber convertido el diseño de LTR a RTL sin tener que ajustar ninguna regla.

A continuación, puedes ver la misma demo RTL utilizando propiedades lógicas. También he cambiado top a inset-block-start solo por razones de coherencia.

Conclusión

Las propiedades lógicas de CSS nos permiten admitir scripts de derecha a izquierda más fácilmente que nunca. Podemos agregar rápidamente soporte RTL a páginas basadas en cuadrícula flexbox y CSS, ya que son diseños lógicos que no dependen de direcciones físicas como izquierda, derecha, arriba y abajo.

Además de los lenguajes RTL, también podemos usar propiedades lógicas para convertir los modos de escritura de arriba a abajo en scripts de lenguaje vertical como el japonés. ¡Mira mi tutorial anterior para más detalles!