Most teams treat Arabic support as a direction switch: flip the stylesheet, mirror the layout, ship. The switch is the easy part. What follows are the failures that show up weeks later, usually reported by a user rather than caught in testing.
Mixed-direction text
An Arabic sentence containing a phone number, a URL, a product code or an English brand name is bidirectional text, and the browser resolves it using the Unicode bidi algorithm rather than your intent. The classic symptom is a phone number whose country code jumps to the wrong end: +20 111 051 1128 rendering as though it began elsewhere. The fix is to mark direction on the element that holds the number, not on the page. Setting dir="ltr" on that span pins it; dir="auto" on a label lets the first strong character decide, which is what you want for text whose language varies.
Layout mirroring that goes too far
Mirroring is right for reading order and wrong for things that are not text. Media controls, progress bars that represent time, and any element anchored to a physical screen position should usually stay put. A floating contact button anchored bottom-right is a fixed affordance, not part of the reading flow — mirroring it moves a control users have already learned. The rule that survives contact with reality: mirror what is read, pin what is operated.
Forms
- Validation messages must appear on the side the eye returns to, which is the right in Arabic.
- Fields holding inherently left-to-right data — email, IBAN, card number — need their own direction, or users watch their input reorder as they type.
- Placeholder alignment often survives the mirror while the input value does not, producing a field where hint and content sit on opposite sides.
Printing and reports
This is where bolted-on Arabic fails most visibly, because print stylesheets are rarely part of the RTL work. Tables reverse their column order, page numbers land on the wrong edge, and headers that looked correct on screen break in the PDF. If your site produces invoices, certificates or reports, print is not an edge case — it is the artefact people keep.
Typography
Arabic needs more line height than Latin text at the same size, because its ascenders and descenders are taller. Fonts chosen for a Latin design frequently lack proper Arabic coverage, and the browser substitutes a fallback that changes weight and rhythm mid-page. Letter-spacing, which improves uppercase Latin labels, damages Arabic — it breaks the joins between letters.
How to test
Set the interface to Arabic and complete a real task end to end: fill a form with a mixed-direction value, trigger a validation error, submit it, and print the result. Every failure above surfaces in that one pass, and none of them surface from looking at a homepage.
Mahmoud Ghonemi
Product & Engineering