engineering · · 6 min read
AR/RTL is an engineering discipline, not a copy task
Most multi-language sites add Arabic as a translation pass and ship a broken layout. Real RTL takes engineering decisions in your CSS, your typography, and your icons.
Adding Arabic to a website is rarely a copy task. It's a layout, typography, and icon-mirroring discipline that touches every component in your design system.
Logical properties everywhere
Use `padding-inline-start` instead of `padding-left`. Use `margin-inline-end` instead of `margin-right`. The browser handles the flip; your CSS doesn't have to ship two stylesheets.
Display typefaces
Latin display serifs (Instrument Serif, Times) don't have Arabic glyphs. They fall back to the system serif, which is rarely sovereign-tier. Specify a Naskh-style serif explicitly for `[dir=rtl] h1, h2`.
Directional icons
Arrows, chevrons, ordering glyphs need to mirror. Use `rtl:rotate-180` Tailwind utility, or a `dir`-aware icon component.
Authors
Tewodros BekeleChief Technology Officer