Your Arabic site is not a mirrored English site

Flip the CSS direction from ltr to rtl and you have not built an Arabic site. You have built an English site wearing a mirror costume, and anyone who reads Arabic daily can feel it in seconds: the back arrow points the wrong way, the phone number reads backward, the form field fights the placeholder text.

None of this is exotic. It is a fixed list of details that break the same way on every rebuild, and each one has a straightforward fix. Here is what actually needs attention when Arabic is the language you design for, not the language you translate into.

Arabic RTL website design starts with direction, not decoration

Not everything mirrors. Icons that show a real object, a phone, a play button, a checkmark, stay put. Icons that show direction (back and forward arrows, carousel controls, "next" on a multi-step form, progress steppers) flip, because in RTL flow the next step in a process moves right to left, not left to right. Get this backward and a checkout flow with a "next" arrow pointing left after a right-aligned form reads as a dead end, not an invitation to continue.

Button icon placement in Arabic RTL website design

Icon-plus-label buttons are the most common miss. In English, an icon usually sits left of its label. Mirror the layout and the icon should sit to the right of the Arabic text, matching reading direction, not the English source file's margin values. If the component was built with margin-left instead of a logical property like margin-inline-start, it will not move when direction flips, and you will see the mistake on every button on the page.

Breadcrumbs need the same discipline: home sits on the right, each step reads right to left, and the separator chevron points left, not right. Progress bars in checkout or onboarding follow the same rule, filling right to left. Test these with an actual Arabic reader clicking through, not by eyeballing a screenshot.

• Back, forward, and carousel arrows: mirror direction
• Breadcrumb trail and separators: reverse order, chevrons point left
• Multi-step progress bars: fill right to left, not left to right
• Media icons (play, pause, volume): never mirror these
• Icon-plus-label buttons: icon sits at the text's leading edge, set with logical CSS properties, not margin-left

Numbers, dates, and mixed text inside an RTL page

Arabic script reads right to left, but numerals inside it read left to right, always. That single fact breaks more layouts than anything else here. A price of 4,500 SAR sitting inside an Arabic sentence should still display as 4,500, not reversed, with the currency label sitting correctly against the digits. Wrap numbers, prices, and dates in directional isolation (unicode-bidi: isolate, or a bdi tag) so the browser's bidi algorithm stops reordering them when the surrounding text changes.

Most Saudi audiences expect Western Arabic numerals (0 to 9), the same digits used in English, not the Eastern Arabic numeral set. Some government and religious contexts do use Eastern Arabic numerals, so check the audience before assuming. Pick one set and apply it everywhere: dates, prices, phone numbers. Switching mid-page reads as a bug, not a style choice.

Brand names, email addresses, and phone numbers are Latin script sitting inside an RTL sentence, and without isolation they can break mid-string or jump to the wrong side of a line. Isolate them the same way you isolate numbers. Dates carry their own trap: decide once whether you're showing Gregorian or Hijri, label which one, and keep the day-month-year order consistent instead of letting a translated template quietly reverse it.

Typography and forms need Arabic-native rules, not mirrored English ones

Arabic script carries more vertical detail than Latin text: connected letterforms, ligatures, marks that need room to breathe. A line-height tuned for English, around 1.4, reads cramped in Arabic. Give it 1.6 to 1.8 and the same paragraph stops looking congested. Font choice matters just as much. Plenty of Latin webfonts ship with thin or missing Arabic glyph sets, so the browser silently falls back to a mismatched system font that clashes with the rest of your type system.

Pair your Latin display font with an Arabic family built for screens (Tajawal, Cairo, and IBM Plex Sans Arabic are safe, well-supported choices), and match weights so headings don't look heavier in one script than the other. Test at the weights you actually ship, not just regular.

Form fields need explicit direction, not inherited direction. Set dir="rtl" and right-align the input, the label, and the placeholder together, because some component libraries align the box but leave the placeholder text stuck on the left. Data tables follow the same rule: right-align text columns, but keep numeric columns aligned the way numbers are read everywhere, by their digits, not forced into the RTL default.

None of this is really about respect for a language, though it is that too. It's about whether someone can read your price, click your button, and finish your form without stopping to mentally translate the interface back into the direction it was actually built for.