Lección 4: RTL y PWA — UI que funciona en ambos idiomas y se instala como una app

Una conocida app fintech israelí: hermosa — pero con números alineados a la izquierda, botones desbordándose en iOS, y una fuente de inglés sobre contenido en hebreo. Cuatro bugs en una sola captura de pantalla. Todos evitables con propiedades lógicas de CSS.

Una propiedad lógica de CSS entiende la dirección del texto. En lugar de 'agrega espacio a la izquierda', dice 'agrega espacio al inicio'. En RTL, 'inicio' es la derecha. En LTR, 'inicio' es la izquierda.

CSS logical properties: Propiedades de CSS que se refieren a la dirección del texto ('start', 'end') en lugar de la dirección física ('left', 'right'). Funcionan correctamente tanto en RTL como en LTR.
PWA (Progressive Web App): Una app web que se puede instalar en la pantalla de inicio de iOS/Android, funciona offline, y aparece sin barra de direcciones como una app nativa.
BiDi (texto bidireccional): Texto que mezcla direcciones — hebreo con números extranjeros, nombres de marcas en inglés dentro de oraciones en hebreo. El `<bdi>` de HTML y el `unicode-bidi` de CSS manejan esto.