Is this your problem?
- Arabic text is aligned to the left
- Menus, sliders and columns run in the wrong order
- Arrows and icons point the wrong way
- Phone numbers, prices or English words appear jumbled
- Arabic letters look disconnected or use a poor fallback font
What usually causes it
How to tell: The html tag has no dir="rtl".
How to tell: Setting the language changed the text but not the layout.
How to tell: Spacing and alignment stay on the wrong side.
How to tell: Numbers and English words inside Arabic sentences move around.
How to tell: Letters look separated. Letter spacing breaks the joins in Arabic script.
Before you touch anything
- Test on a page with Arabic and English mixed together, the hardest case.
How to fix it, step by step
-
1
Declare the direction
In WordPress, setting an Arabic site language, or the Arabic version in WPML or Polylang, sets the direction automatically. Check the page source for this.
<html lang="ar" dir="rtl"> -
2
Give the theme right-to-left styles
WordPress loads rtl.css from the theme automatically when the page is right to left. If the theme has none, the layout needs its own direction rules.
-
3
Use start and end in CSS
Replace left and right with logical properties. The same rule then works in both directions.
.card { margin-inline-start: 1rem; padding-inline-end: 2rem; text-align: start; } [dir="rtl"] .icon-arrow { transform: scaleX(-1); } -
4
Mark mixed-direction text
Wrap phone numbers, codes and English words inside Arabic sentences so they keep their own direction.
<bdi>+965 2222 3333</bdi> -
5
Use a real Arabic font
Choose a font designed for Arabic, such as IBM Plex Sans Arabic, Noto Naskh Arabic, Cairo or Tajawal. Host it yourself for speed and privacy. Remove letter spacing on Arabic text and give it a little more line height.
-
6
Check forms and emails
Form fields, error messages and order emails need the same direction as the page.
Stop and get help if
- The theme positions everything with fixed left and right values across hundreds of rules. A rebuild with logical CSS is faster.
Stop it happening again
- Choose themes that list right-to-left support.
- Write new CSS with logical properties from the start.
- Test every page in both directions before launch.
Questions people ask
Do I need a separate Arabic website?
No. One site with an Arabic version, managed by a multilingual plugin, is easier to run and better for search.
Should numbers be Arabic-Indic or Western?
Both are used. Follow what your customers expect, and keep it the same across the site.