RTL and Arabic typography

Arabic pages run right to left. A well-built theme needs no separate Arabic stylesheet: the same CSS works in both directions.

Set the direction

<html lang="{{ request.locale.iso_code }}" dir="{{ request.locale.direction }}">

request.locale.direction is rtl for Arabic (and other right-to-left languages), ltr otherwise.

Use logical CSS

Write CSS in terms of start and end, not left and right:

Instead of	Use
margin-left, margin-right	margin-inline-start, margin-inline-end
padding-left: 1rem; padding-right: 2rem	padding-inline: 1rem 2rem
left: 0	inset-inline-start: 0
text-align: left	text-align: start
border-left	border-inline-start
float: left	float: inline-start
border-top-left-radius	border-start-start-radius

Flexbox and grid already follow the direction: flex-direction: row starts on the right in Arabic.

Flip what points

Arrows, chevrons and “next” icons point the other way in Arabic. Flip them with CSS, not with different icons:

[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

Don’t flip logos, product photos, play buttons, checkmarks, or icons of real objects.

Mixed text

Arabic pages are full of English: brand names, SKUs, emails, phone numbers. Keep them readable:

• Isolate values whose direction can differ: <bdi>{{ product.vendor }}</bdi>, or unicode-bidi: isolate in CSS.
• Mark inputs that are always left-to-right: <input type="email" dir="ltr">, phone numbers, card numbers.
• Put dir="auto" on user content (reviews, names) so each piece takes its own direction.

Numbers and prices

Prices use Western digits in every language (450.00 ر.ق). Keep phone numbers and order numbers left-to-right with dir="ltr" so +974 stays at the start.

Typography

• Arabic needs a larger line height: about 1.8 for body text.
• Never use letter-spacing or text-transform: uppercase on Arabic: reset them on [dir="rtl"].
• Avoid italics for Arabic; use weight or colour for emphasis.
• Use an Arabic font with matching weights; see Fonts.

[dir="rtl"] { line-height: 1.8; }
[dir="rtl"] .heading { letter-spacing: 0; text-transform: none; }

Translations

Every visible string goes through t and both locales/en.default.json and locales/ar.json. Arabic plural forms (zero, one, two, few, many, other) are supported; see Locales.

Test

Preview each template in Arabic at phone width. Look for: text touching the wrong edge, arrows pointing backwards, numbers out of order, and English words breaking the line in odd places.