Lesson 8: RTL Components — Building for Both Directions
The app looks perfect in English. You switch to Hebrew, and suddenly the spacing is on the wrong side, the text aligns left, and the 'back' arrow points the wrong way. This lesson teaches you to build components with `logical properties` — `ms-4` instead of `ml-4` — that flip on their own under `dir
A logical property is like saying 'the hand you write with' instead of 'right hand' — it's correct whether you're right- or left-handed. `ms-4` means 'margin on the start side', so it lands on the right side in both Hebrew and English.
- logical property
- A property that refers to 'start' and 'end' by writing direction (`ms`, `me`, `ps`, `text-start`) instead of 'left' and 'right' — so it flips on its own in RTL.
- physical property
- A property that ties a value to a fixed screen side (`ml`, `mr`, `text-left`). It's direction-unaware, so it stays on the same side even when the UI flips to RTL — breaking the layout.
- dir attribute
- The `dir="rtl"` or `dir="ltr"` attribute (usually on `<html>`) that sets the writing direction. Logical properties rely on it to know which way 'start' points.
- icon mirroring
- Horizontally flipping directional icons (back arrow, chevron) in RTL so they point correctly. Non-directional icons (a logo, media player) are not mirrored.
