- When building for the KSA market, many developers think adding dir="rtl" to the tag is the finish line. In reality, that is just the starting blocks. Truly high-performance, localised apps require a "mirror-first" mindset to ensure a "pixel-perfect" experience for Arabic-speaking users.
In my experience launching production sites like DarElite, I've found that deep RTL support is what separates a translated site from a truly localised one. Here is a guide on going beyond the basics.
- Use CSS Logical Properties
- Stop thinking in "left" and "right." Use logical properties to let the browser handle the heavy lifting based on the document direction.
- Margin/Padding: Use margin-inline-start instead of margin-left.
- Borders: Use border-end-start-radius for specific corners.
Tailwind Strategy: If you use Tailwind CSS, leverage the start and end utilities (e.g., ps-4 instead of pl-4).
Icons: To Mirror or Not to Mirror?
This is where most UI/UX bugs hide. Not every icon should be flipped.
Mirror these: Progress bars, directional arrows (back/forward), and icons representing movement (like a bicycle).
Don't mirror these: Checkmarks, clock faces, and media playback buttons (Play/Pause/Seek) generally stay the same.
Handling Bidirectional (BiDi) Text
In technical or business apps, you will often have "Mixed Direction" content—like an English email address or a phone number inside an Arabic sentence.
The Fix: Use the (Bi-Directional Isolation) tag for user-generated content to prevent the layout from breaking when different scripts collide.
Performance in RTL Layouts
Localised apps often struggle with layout shifts during the "direction swap."
Tip: Ensure your CSS architecture is "direction-agnostic" from the start. By refining component architecture, I’ve managed to maintain 100% Lighthouse scores while supporting complex RTL layouts.
Top comments (0)