Lesson 4: RTL & PWA — UI That Works in Both Languages and Installs as an App

A well-known Israeli fintech app: beautiful — but numbers aligned left, buttons overflowing on iOS, and an English font on Hebrew content. Four bugs in one screenshot. All preventable with CSS logical properties.

A CSS logical property understands text direction. Instead of 'add space on the left', it says 'add space at the start'. In RTL, 'start' is right. In LTR, 'start' is left.

CSS logical properties: CSS properties that refer to text direction ('start', 'end') instead of physical direction ('left', 'right'). Work correctly in both RTL and LTR.
PWA (Progressive Web App): A web app that can be installed to iOS/Android home screen, works offline, and appears without an address bar like a native app.
BiDi (Bidirectional text): Text that mixes directions — Hebrew with foreign numbers, English brand names inside Hebrew sentences. HTML `<bdi>` and CSS `unicode-bidi` handle this.