Las propiedades físicas codifican la dirección de lectura en su hoja de estilo: margen izquierdo, relleno derecho, alineación de texto izquierda. En el momento en que existe una configuración regional de derecha a izquierda, cada una de esas reglas necesita su espejo. Las propiedades lógicas modifican el diseño en direcciones en lugar de bordes, y el navegador realiza la duplicación.

.card {
  margin-block-start: 1rem;   /* was margin-top */
  padding-inline: 1rem;       /* was padding-left/right */
  border-inline-start: 4px solid var(--brand); /* was border-left */
  text-align: start;          /* was text-align: left */
}

El diccionario que realmente usas

  • La parte superior e inferior se convierten en inicio y fin de bloque: el eje del flujo de lectura.
  • izquierda y derecha se convierten en inicio en línea y fin en línea: el eje de la línea, que gira con la dirección.
  • Pares de colapso taquigráfico: margen en línea, bloque de relleno, bloque de inserción y inicio en línea de borde.
  • El tamaño mantiene sus nombres hasta que cambia: el ancho y el alto permanecen, por lo que las migraciones llegan a ser graduales.

Receta de adopción para proyectos reales.

  1. Comience únicamente con reglas nuevas; escriba cada componente nuevo en términos lógicos desde el primer día.
  2. Convierta diseños compartidos en oleadas: encabezados, tarjetas, listas; Pruebe una cadena RTL árabe o hebrea extraña en la página como prueba de realidad, incluso si no incluye dicha configuración regional.
  3. Deje los equivalentes físicos en las secciones heredadas hasta que salgan a la superficie; El código que está a punto de ser reescrito no merece una ola de conversión.
  4. Mantenga un comentario de mapeo en la parte superior de la hoja de estilo; el mapeo es breve y guarda a cada nuevo contribuyente.

Este sitio incluye cuatro configuraciones regionales y sus hojas de estilo ya piensan en direcciones en línea y en bloque, lo que hace que una configuración regional RTL sea una tarde de trabajo en lugar de reescribir toda la hoja de estilo. La recompensa más interesante es una hoja de estilo que describe el orden de lectura en lugar de los bordes de la pantalla.