Lección 8: Componentes RTL — construir para ambas direcciones
La app se ve perfecta en inglés. Cambias a hebreo, y de repente el espaciado queda del lado equivocado, el texto se alinea a la izquierda, y la flecha de 'atrás' apunta al lado incorrecto. Esta lección te enseña a construir componentes con `logical properties` — `ms-4` en vez de `ml-4` — que se invi
Una propiedad lógica es como decir 'la mano con la que escribes' en vez de 'mano derecha' — es correcta seas diestro o zurdo. `ms-4` significa 'margin en el lado de inicio', así que cae del lado derecho tanto en hebreo como en inglés.
- logical property
- Una propiedad que se refiere a 'inicio' y 'fin' según la dirección de escritura (`ms`, `me`, `ps`, `text-start`) en vez de 'izquierda' y 'derecha' — así se invierte sola en RTL.
- physical property
- Una propiedad que ata un valor a un lado fijo de la pantalla (`ml`, `mr`, `text-left`). No sabe nada de la dirección, así que se queda del mismo lado incluso cuando la UI se invierte a RTL — rompiendo el layout.
- dir attribute
- El atributo `dir="rtl"` o `dir="ltr"` (normalmente en `<html>`) que define la dirección de escritura. Las propiedades lógicas dependen de él para saber hacia dónde apunta 'inicio'.
- icon mirroring
- Invertir horizontalmente íconos direccionales (flecha de atrás, chevron) en RTL para que apunten correctamente. Los íconos no direccionales (un logo, un reproductor multimedia) no se invierten.