Note1 min read
Designing for two directions
Arabic is not a translation layer. A few rules that make a bilingual interface feel native in both directions.
- Use logical properties everywhere.
margin-inline-start, notmargin-left. Then the layout mirrors itself. - Mirror meaning, not everything. Arrows that mean "next" flip; a play button, a logo and a chart’s time axis usually do not.
- Give Arabic room. More line height, no letter-spacing, no uppercase labels — use weight and size for hierarchy instead.
- Fall back honestly. If an article exists only in English, show it in English with
lang="en"anddir="ltr", inside the Arabic page.