# Arabic & RTL Implementation Checklist A practical checklist derived from the patterns measured in the Arabic and RTL Web Adoption dataset (https://moayyadfaris.com/arabic-web-stats/rtl-adoption). Check each item against your own site. ## HTML foundation - [ ] `` (or a specific dialect tag such as `ar-SA`) is set on the root element - [ ] `` is set on the root element — `lang` alone does not establish direction - [ ] `lang` and `dir` do not contradict each other (e.g. Arabic `lang` with `dir="ltr"`) - [ ] A single `

` per page; heading levels aren't skipped - [ ] `` and meta description are written in Arabic for Arabic pages, not left in English ## CSS - [ ] Directional spacing uses logical properties (`margin-inline-start`, `padding-inline-end`) instead of physical properties (`margin-left`, `padding-right`) wherever direction should mirror - [ ] `text-align` uses `start`/`end` instead of `left`/`right` where the value should mirror with direction - [ ] Icons and directional UI elements (arrows, chevrons) are mirrored or replaced for RTL, not left pointing the LTR direction - [ ] No RTL override relies solely on a separate `rtl.css` file with duplicated rules — prefer logical properties so one stylesheet works both directions ## Mixed-direction content - [ ] Numbers, Latin-script product names, and email/URL fields embedded in Arabic text are wrapped in `<bdi>` or use `dir="auto"` to prevent punctuation from jumping to the wrong side - [ ] Numeric and email/tel form inputs explicitly set `dir="ltr"` even inside an RTL form, since numerals and email addresses read left-to-right regardless of surrounding language ## Typography - [ ] An Arabic-supporting web font is loaded deliberately (not just relying on the OS default) - [ ] Every `font-family` declaration referencing a custom Arabic font ends in a generic fallback (`sans-serif`, `serif`, `system-ui`) in case the custom font fails to load ## Forms & navigation - [ ] Forms and primary navigation render correctly with the page's base direction — verify visually, since HTML presence alone doesn't guarantee correct layout - [ ] Form validation and error messages appear on the correct (direction-appropriate) side of fields ## Accessibility & SEO - [ ] Images carry meaningful `alt` text in Arabic, not empty or omitted - [ ] Interactive elements without visible text labels use `aria-label` - [ ] A canonical `<link>` is present, especially where Arabic-preserving and transliterated URL variants both exist - [ ] Open Graph tags and JSON-LD structured data are present for social sharing and rich results ## Before shipping - [ ] Test the page with real, running Arabic copy — not Lorem Ipsum or placeholder text - [ ] Test at multiple viewport widths — RTL layout bugs often only appear at specific breakpoints - [ ] Test with a mix of Arabic and Latin content in the same view (product names, prices, dates) --- Generated from https://moayyadfaris.com/arabic-web-stats/rtl-adoption — please attribute if you republish or adapt this checklist.