Start a project
Start a project Book a call
International

Arabic on a store or website: right-to-left, fonts and search

A translated Arabic store can still look broken. This guide covers the page code, what to mirror, fonts, digits, Shopify settings and store search, with a checklist for testing on real phones.

ESTASOFT
13 min read
Cover image for a guide to Arabic on a store or website, listing right-to-left layout, fonts and spacing, digits, store search tests and a testing checklist.
On this page
    On this page

      An Arabic store can be fully translated and still look wrong. An arrow points the wrong way, a phone number jumps to the other end of a sentence, or the letters on a button look cut into pieces. Customers often notice this quickly, even if you cannot read the page yourself.

      This guide is the layout, type and search-box check for owners who sell in Arabic on Shopify or on a website. Our guides on what to plan before design starts and how people search in Arabic cover the plan and Google. This one covers the page and your own search box.

      Set direction and language in the page code

      Two settings matter on every Arabic page: direction (the dir attribute) and language (the lang attribute). The language tag does not decide direction, so you set both. W3C says to set dir="rtl" on the html element when the whole page is right to left, and to set direction in the markup, not in CSS, so it is still there when the CSS is not.

      For Kurdish Sorani, W3C advises the more specific language code in most cases, with exceptions for backward compatibility. Kurdish as a whole is ku, and ckb is Central Kurdish, which Wikipedia says is also known as Sorani. Our Arabic and Kurdish WordPress guide explains the choice, and the hreflang guide covers the search side. To test, view the source of an Arabic page and read the opening html tag. If dir or lang is missing or wrong, tell your developer.

      What should mirror and what should not

      Mirroring does not mean flipping everything. The Wikimedia design system guide gives a split; treat it as one system's rules.

      • Mirror: text alignment, icons with a horizontal direction such as next and previous arrows, icons that contain lists, and progress steps.
      • Do not mirror: clock and calendar icons, check marks, play and pause controls, numbers including phone numbers, currency symbols, web and email addresses, and images and illustrations.

      The guide also says to use the left-to-right version of certain icons in some right-to-left languages, and gives the question mark in Hebrew versus Arabic as its example. Ask your designer to list every icon with a direction and decide each one.

      Mixed text needs one more step. A phone number, an English brand name or a part number inside an Arabic sentence can land in the wrong place, especially when it begins with a number or is followed by one. W3C's article on inline bidirectional text says to wrap such a phrase tightly in an element that sets its direction, such as dir="ltr", and to use dir="auto" or the bdi element when the direction is not known in advance. With dir="auto" the browser reads the first strongly directional character, and W3C warns this is not foolproof.

      Prices need a look too. W3C's draft layout note says numbers, even Arabic ones, are written from left to right, and has a section on where currency signs go. Check a discounted price in the product card and in the cart.

      Logical CSS: what to ask your developer

      Older stylesheets use left and right. CSS logical properties use start and end, and the browser maps them to the correct side for the current direction. MDN's example: margin-inline-start is the left margin on a left-to-right page and the right margin on a right-to-left page, so spacing written this way switches sides with the direction.

      MDN cautions that the four-value shorthands such as margin and padding still use physical sides, so developers should use the logical longhands. Ask whoever does your web development, in-house or at an agency:

      • Does the theme use logical properties or a separate right-to-left stylesheet, and who maintains it?
      • Do custom sections, sliders and apps still work when mirrored?

      Numbers: pick one digit style

      W3C's draft Arabic layout note describes three digit families: European digits 0 to 9, Arabic-Indic digits and Eastern Arabic-Indic digits. It ties them loosely to places, such as Arabic-Indic digits to Egypt, Saudi Arabia and Iraq, and says there is no clear line between east and west. Ask your own customers which they expect, then use that style the same way everywhere.

      • Choose one style for prices, quantities, phone numbers and order numbers, and check it in the listing, cart, checkout, order email and invoice.
      • Type digits in both styles into the search box and the phone and postcode fields. Does each field accept, convert or reject them?

      Fonts for Arabic

      Google Fonts has several families with Arabic letters. Three we checked: Cairo, whose description says it extends a Latin family to Arabic with a design based on the Kufi calligraphic style; Noto Sans Arabic, described as an unmodulated sans serif design; and Noto Naskh Arabic, described as a modulated Naskh design. Set your own words in each before you choose.

      Google says its fonts are open source and can be used in commercial projects. The google/fonts repository on GitHub says most use the SIL Open Font License 1.1, some use Apache 2, and each family folder holds its licence file. This is general information, not legal advice: read the licence file of every font you add.

      Three type checks to run alongside the choice of font:

      • Size and line height. W3C notes that Arabic ascenders and descenders reach much further than Latin ones, and that fonts differ in how high they set short vowel marks. Do not assume the English line height will fit. Test real copy, with marks, on a small phone and look for lines that touch or clip.
      • Letter spacing. MDN says Arabic script expects connected letters to stay connected, and added spacing can make text look broken. W3C adds that when Arabic is stretched, the line between joined letters is extended, which differs from Latin letter spacing. Some themes add spacing to buttons and headings, so ask your developer to reset it for Arabic.
      • Mixed text. Check that Latin brand names and model numbers do not fall back to a mismatched font.

      Kurdish Sorani is written in a modified Perso-Arabic script, so an Arabic font may miss some Sorani letters. Wikipedia's article on Kurdish alphabets has a table of Sorani letters that includes ڕ, ڵ, ۆ, ێ and ە. It also says the Kurdistan Region standard uses the kaf ک rather than ك, which some people still use. Test a Sorani sentence with those letters in the font's sample box and on a test product page, and look for empty boxes or letters in another font. Do not assume coverage: the Cairo description names Arabic, Farsi and Urdu, not Kurdish.

      Shopify: what to check

      The theme. Shopify says your active theme must be compatible with languages, and that the latest versions of its Horizon family of themes support right-to-left languages such as Arabic, Hebrew and Urdu. Its 27 March 2024 announcement of automatic Arabic and Hebrew translation also told owners to confirm that any other theme supports right-to-left text, and said the Theme Store can be filtered by that feature.

      Checkout and emails. Shopify lists Arabic among the languages with translations for checkout and for the default content of its own themes. Checkout follows the language the customer browsed in. Order emails use the order language, but only if a translation of that email exists. Place a test order and read both.

      Addresses and handles. Each published language gets its own URLs, as subfolders or subdomains. The word products in the address cannot be translated, but the rest can. Automatic translation does not cover URL handles, so you add each translated handle by hand in Translate & Adapt, and Shopify redirects the default-language address to it. Decide early whether product handles will be Arabic or English. Shopify announced in 2017 that handles can use the full UTF-8 character set, but one community member reported some accented Latin letters being converted to plain ones, so save a test product with an Arabic handle and check the result. Product tags cannot be translated, so filters built on tags may show one language.

      Store search in Arabic

      Shopify's page on search behaviour says that in each of 33 listed languages, search matches other word forms and many misspellings. Arabic, Kurdish, Hebrew and Persian do not appear on the page, and the page has no date. That does not prove Arabic search is weak. It means that page does not tell you, so test it yourself.

      Predictive search, the suggestions shown as a visitor types, is separate. Shopify's help page says it is not available in all languages and points to developer documentation for the list. That list has 45 languages and Arabic is not among them. Ask your developer what your theme shows an Arabic visitor: do suggestions appear, and does a full search still work?

      Synonyms are a tool you control. In the Search & Discovery app, Shopify treats the terms in a synonym group as exact matches for one another. A synonym can be up to five words, a group holds up to 20 synonyms, and a store can have up to 1,000 in total. The page states no language limit. Use synonyms for the gaps your tests find. Questions to test on your own search box:

      • Do different alef forms (أ, إ, آ and ا) all find the product?
      • Are results the same with and without the small vowel marks?
      • Try endings people mix up: taa marbuta ة against haa ه, and yaa ي against alef maqsura ى.
      • Does adding or dropping the definite article ال change the results?
      • Does a brand name work in Arabic letters and in Latin letters?
      • For Sorani stores, does ک find what ك finds?

      Testing checklist

      1. A native reader goes through the whole journey and notes every problem, not only the translation.
      2. Use real phones, at least one iPhone and one Android, on mobile data.
      3. Test long product names: an Arabic title with an English model code, and your longest title, in the product card, cart and checkout.
      4. Test form fields: type Arabic into name, address and notes, then a phone number and an email address, and read the errors.
      5. Place a test order. Read the confirmation email on a phone and on a desktop, and check the last checkout step, including any payment provider page.
      6. Run the search questions above, and share one product link in a chat message and an email.

      Need a hand?

      If you are planning an Arabic or bilingual store, see our web development and Shopify solutions pages, or send a short brief on the contact page with your languages, your theme and the pages you worry about. For the plan behind this work, read Arabic and English on one store.

      Sources

      Written by
      ESTASOFT

      Need help with a project?

      Share a short brief. We reply with next steps.

      Start a project Book a call

      Book a call

      30 minutes. Free.

      Tell us about your project and we will suggest a time.

      Send a request

      Or email us at info@estasoft.com

      Cookie preferences

      Necessary

      Needed for the site to work. Always on.

      Always on

      Preferences

      Remember choices such as language and region.

      Analytics

      Help us understand which pages are useful.

      Marketing

      Used to measure and improve campaigns.