Skip to content
RTL & Arabic Web

What an Arabic store on a phone needs that an English one does not

Direction is the easy half. The rest is line length, numerals, addresses, phone fields, delivery expectations and a checkout written for the way people here actually buy.

What changes in a WooCommerce store interface when the buyer is Arabic and the device is a phone?

Mostafa Nouh — portraitMostafa NouhPublished 8 min read

The type, before anything else

Arabic set at the line height that suits Latin text looks cramped, because the script's ascenders, descenders and dots occupy vertical space that Latin does not. It also reads comfortably at a shorter measure. On a phone this compounds: a product description at 1.5 line height and full viewport width is the most common reason an Arabic store feels harder to read than its English twin.

  • Ship a real Arabic webfont with the weights the design uses. The OS fallback has different metrics and different weights, and it is why the Arabic looks like an afterthought.
  • Raise line height for Arabic body text relative to the Latin value.
  • Neutralise letter-spacing under [dir="rtl"] — Arabic is a joined script and tracking breaks the joins.
  • Expect Arabic headings to read heavier at the same numeric weight; step them down rather than matching the number.

Numerals, and choosing one set

Arabic-Indic numerals are correct Arabic, and Latin numerals are what most Gulf and Egyptian storefronts actually use for prices. Either is defensible. What is not defensible is both on the same screen — a price in one set and a quantity in the other reads as a rendering fault and makes a buyer doubt the number.

Whichever you choose, isolate the run. A price, a phone number or an order reference inside an Arabic sentence will be reordered by the bidirectional algorithm unless it is wrapped, and a reordered order number is a support ticket.

The checkout is a different form here

WooCommerce's default address form is built around a postal system that does not describe how people are found in much of this region. A required postcode, a two-line street address and a state dropdown produce either abandoned carts or fields filled with placeholder text, which is worse — the order is accepted and cannot be delivered.

The Arabic mobile checkout

  • Phone field with type="tel", inputmode="tel", the country code visible, and the run isolated LTR.
  • Autocomplete tokens on every field — the browser filling the form is the fastest checkout you can build.
  • Address fields that match how people describe where they live, with optional rather than required precision.
  • Cash on delivery presented as a first-class option where the market expects it, not buried under card fields.
  • Apple Pay and local wallets surfaced before the card form, because on a phone they are one tap.
  • Error messages in Arabic, written as instructions, next to the field that failed.
  • A visible delivery expectation in days, on the checkout, in text.

The thumb is on the other side

Reading direction does not change which hand holds the phone, but it does change where a reader's attention starts. Primary actions belong within a comfortable reach and on the side the eye arrives from; a back gesture and a drawer must open from the inline-start edge; and a sticky cart bar has to clear the home indicator. These are all logical-property decisions, and none of them survive a hand-mirrored stylesheet.

Sources

Contact

Have a site or store that needs to work better?

Tell me what is happening and on which page. A diagnosis is a useful first deliverable on its own.

I read every message myself and reply within one working day — usually with a question or two before anything else, because a scope worth quoting needs them answered.

Available for remote work aligned to EST hours
Mostafa Nouh — portrait

Mostafa Nouh

Full-Stack Developer & Product Builder

Location
Egypt · Remote