advanced

RTL basics

Support right-to-left layouts with logical CSS properties, mirrored icons where appropriate, bidi-safe text, and direction-aware testing.

Right-to-left (RTL) locales such as Arabic and Hebrew need `dir="rtl"` on `html` or containers, **logical CSS properties** (`margin-inline-start` vs `margin-left`), and careful handling of icons, numbers, and embedded LTR text (URLs, emails).

					.card {
  margin-inline-start: 1rem;
  padding-inline: 1rem;
  border-inline-start: 3px solid var(--accent);
}

| Element | RTL note | |---------|----------| | Icons with direction | Mirror arrows/chevrons; do not mirror universal symbols | | Numbers | Often stay LTR inside RTL paragraphs | | Mixed text | Use `unicode-bidi` and isolates for embeddings | | Layout tests | Flip snapshots; do not only eyeball in English |

Set `lang` attribute per locale for screen readers and hyphenation. Test with native speakers for truncation and alignment bugs logical properties miss.

On interviews: logical properties vs `.rtl` override files; Tailwind RTL plugins; bidirectional form labels; PDF/print in RTL.

Common pitfalls: physical `left/right` everywhere; mirroring play buttons; hard-coded text alignment; concatenating RTL and LTR strings without isolates.

The trade-off is maintaining one stylesheet with logical properties versus duplicate RTL theme files.

Checklist:

`dir` and `lang` on root or locale wrapper.
Prefer logical properties in new CSS.
Audit directional icons and animations.
Test forms, tables, and modals in ar/he locales.