Arabic and Hebrew on the web, without compromise.

1. dir is a posture, not a flag

Setting dir="rtl" on the root is the start, not the finish. Every component — nav, breadcrumbs, form, table, footer — needs to be checked for logical properties (margin-inline-start, padding-inline-end, inset-inline-start) instead of left/right. If a flip surprises you, the source was hard-coded; rewrite it logical.

2. Pair a real Arabic and a real Hebrew face

Don't rely on the Arabic or Hebrew glyphs that ship inside a Latin family. Pair a dedicated Arabic family (Tajawal, IBM Plex Sans Arabic, RH Zak) and a dedicated Hebrew family (Heebo, Frank Ruhl Libre) with your Latin display and text. Match x-height and weight so the same paragraph in three languages reads at the same color.

Test with real copy, not lorem ipsum. The cadence of Arabic and Hebrew shapes line length differently — a measure that feels comfortable in English may feel sparse in Arabic.

3. Numerals, punctuation, alignment

Decide once and apply everywhere: Eastern Arabic numerals or Western? Use the same numeral system across nav indices, dates, captions. Punctuation flips automatically with dir="rtl" — quotes, parentheses, commas — but make sure your fonts ship the right glyphs for both modes.

Headlines align to the start of the line. In RTL, the start is the right edge. Don't force right-alignment with a class; trust text-align: start.

4. Mirror layout, not meaning

Icons that point forward (arrows, breadcrumbs, carousel chevrons) should flip in RTL. Icons that carry meaning (logos, hearts, play buttons) should not. The test: would a native reader recognize the icon if you mirrored it? If yes, mirror; if no, leave it.

The reward for getting this right is invisible — readers don't notice good RTL because it just reads. They notice bad RTL on the first line.