Skip to main content
project@netbasejsc.com
Mon–Sat: 9:00–18:15, Sun: closed
91 Nguyen Chi Thanh, Hanoi
Facebook X (Twitter) LinkedIn YouTube

What are you looking for?

Explore our services and discover how we can help you achieve your goals

Arabic RTL e-commerce: building a bilingual store that reads right to left

A bilingual Arabic and English store built right to left starts with the dir and lang attributes at the document level, then mirrors layout through logical CSS properties, chooses fonts that render Arabic script and mixed numerals correctly, and tests direction-aware search, forms and documents with Arabic-speaking readers before a staged launch.

Submit a project See the bilingual web-to-print record

Reviewed by Huy Nguyen (David), CEO · Updated 31 Oct 2026 · 12 min read

star

OutsourcingVN is operated by Netbase JSC. The Saudi Arabia, UAE and Qatar guides each settle one market's payment, identity and data rules and name Arabic acceptance as one item on a longer list; this guide stays on the right-to-left build itself, for any market whose users read Arabic.

Contents

Which layer should set direction, mirror layout or render Arabic text?

Layer What it does for a right-to-left build Why it sits there
The dir and lang attributes Sets the base direction and declares the document's language W3C's own guidance is to add dir="rtl" to the html tag for a right-to-left document, and never use CSS to apply the base direction
The Unicode bidirectional algorithm Reorders mixed right-to-left and left-to-right runs, including digits, once direction is set Runs on the declared direction automatically; not something a build configures by hand
Logical CSS properties Mirrors margins, padding, borders and alignment relative to the content's own direction, not a fixed side One stylesheet then serves both directions, instead of a duplicate rule for every physical left or right value
The commerce platform Ties its own layout to the language or locale already set, rather than a separate switch WordPress's own is_rtl() function reports the current locale's direction; Laravel's own localisation documentation defines no right-to-left layout of its own

Each row fails on its own: a correct attribute does not fix a stylesheet still written in physical left and right values, and a mirrored layout does not fix a font that cannot shape Arabic script.

How does a store move from design to a bilingual right-to-left launch?

  1. Set the dir and lang attributes at the document level

    Add dir="rtl" and lang="ar" to the html tag for the Arabic version, and keep the English version at the default left-to-right direction with lang="en"; W3C's own guidance is that this single change right-aligns paragraphs and reverses table columns throughout the page.

  2. Mirror the layout with logical CSS properties

    Replace margin-left, padding-right and similar physical rules with their logical equivalents, so one stylesheet renders correctly in both directions instead of a duplicate right-to-left sheet maintained in parallel.

  3. Choose fonts and confirm numeral handling

    Pick a typeface that ships Arabic glyphs for the platform's rendering engine, and decide early whether product codes, dates and order totals display as Western Arabic digits (written left to right even inside right-to-left text) or Arabic-Indic digits, since the Unicode bidirectional algorithm treats digits as their own kind of run inside a right-to-left paragraph.

  4. Build Arabic search, forms and generated documents

    Confirm search handles Arabic text normalisation, form fields and validation messages read right to left, and generated PDFs, order confirmations and emails carry the same direction and font as the storefront.

  5. Test with Arabic-speaking readers and decide go or no-go

    Run the catalogue, checkout, account and document paths past readers who use the language daily, since a mirrored layout that passes an automated check can still misplace an icon or a status badge that a fluent reader catches immediately.

  6. Launch the bilingual store in a staged rollout

    Release the Arabic version alongside the English one for a limited catalogue or audience first, so a direction or shaping defect surfaces before the full catalogue depends on it.

  7. Monitor the live store and keep a roll-back path ready

    Watch for layout and font-rendering regressions after launch, and keep the previous build ready to restore if a defect reaches customers.

Diagram of an Arabic right-to-left launch pipeline: set dir and lang attributes, mirror the layout, choose fonts, build search and forms, test readers for go or no-go, staged rollout, then monitor and roll back
Diagram of an Arabic right-to-left launch pipeline

Worked scenario: a home-goods retailer adding an Arabic storefront

A hypothetical home-goods retailer sells online in English only and wants to add a bilingual Arabic storefront on the same catalogue without maintaining two separate codebases.

  • Milestone one sets the dir and lang attributes for the Arabic route and replaces physical left-and-right stylesheet rules with logical properties, so the English layout keeps rendering unchanged while the Arabic route mirrors automatically.
  • Milestone two adds an Arabic-capable font, fixes the digit style for product codes and order totals, and rebuilds search, the order forms and the PDF invoice template for right-to-left text.
  • Milestone three rehearses the full catalogue and checkout path with Arabic-speaking readers, launches to a limited category first, and watches rendering before extending Arabic to the full catalogue.

A store already built with logical CSS properties throughout usually compresses this into fewer milestones; one with years of physical left and right rules rarely can.

What has Netbase built on bilingual Arabic and English platforms?

For Deyar Printing & Advertising, a printing, packaging, signage and fleet-branding company in Riyadh, Saudi Arabia, Netbase scoped and built a bilingual Arabic right-to-left and English web-to-print platform on a Laravel headless commerce foundation: an online designer studio with Arabic fonts, templates and uploads, configurable print options, print-ready PDF generation with pre-flight checks and proof approval, request-for-quote lead capture, multi-branch ordering and a production back office, across seven product families and 50+ configurations, delivered in phases from discovery and launch to production operations. The bilingual web-to-print platform record sets out that scope in full.

For a Dubai-based loyalty and rewards technology company that is not named, Netbase delivered a headless multi-store reward shop platform on Magento 2 Open Source with a Next.js front end: individually branded reward shops per client programme, a hybrid points-plus-cash checkout, merchandise, gift cards and travel bookings, a multi-vendor module with fulfilment routing and service-level breach alerts, Arabic and English, integrations with the client's points middleware, ordering service and product catalogue by webhook and scheduled sync, single sign-on, payment gateways, mobile SDK interface components for client apps, a centralised super-administrator dashboard and AWS or on-premise deployment, in four phases over 3.5 to 4.5 months. The reward shop platform record covers that build.

The Magento and Next.js mechanics behind a similar pairing are planned on the headless Magento with Next.js guide; redemption rules and multi-brand shop design for a reward-shop build are planned on the loyalty and rewards platform guide, and the print catalogue and production handoff behind a web-to-print build are planned on the print order and fulfilment guide.

Plan the next step for your project

Submit a project See the bilingual web-to-print record

Where does AI fit in planning a right-to-left build?

The clearest AI use sits on the translation and review side: a model can draft the Arabic strings for a product catalogue, a checkout flow or a notification template, and flag a string that looks likely to break bidirectional rendering, for a native Arabic-speaking reviewer to check before it ships. None of that assistance decides whether a layout actually mirrors correctly or a font actually shapes Arabic script; the testing step with Arabic-speaking readers still carries that decision. Netbase delivers remote-first from Hanoi in Agile increments with weekly reviews, using AI-assisted engineering under human review.

What should you check in the platform's own documentation?

Confirm before scoping a bilingual right-to-left build:

  • Whether dir and lang are set at the document level for each language route, per W3C's own guidance, rather than left to a stylesheet or a script to infer.
  • Whether the stylesheet uses logical properties or physical left/right values, since MDN's own documentation states that logical properties let content translated into languages with different writing modes render as intended.
  • Which digit style the brand wants, since the Unicode bidirectional algorithm treats the digits inside a right-to-left paragraph as their own directional run, separate from the surrounding Arabic text.
  • How the platform itself tracks direction. WordPress's own is_rtl() function reports the current locale's direction; Laravel's own localisation documentation handles translation strings and the application locale but defines no right-to-left layout feature of its own.

What goes wrong in an Arabic right-to-left build?

  • CSS written in physical left and right values. Every rule needs a right-to-left override by hand, and the two versions drift apart as the stylesheet grows.
  • Numerals left undecided. A product code or order total that should stay in one digit style instead renders inconsistently across the catalogue, the invoice and the confirmation email.
  • Generated documents left in the wrong direction. A storefront that mirrors correctly on screen still ships a PDF invoice or an email template built from an English layout.
  • Launch tested only by an automated check. A check that confirms the page renders does not confirm an icon or a status badge reads correctly to someone who reads the page right to left every day.

Which questions should you ask a right-to-left supplier?

  • Which pages and templates get the dir and lang attributes, and who checks every new template?
  • Is the stylesheet built on logical properties, or does it carry physical left/right rules needing a parallel version?
  • Which digit style do the catalogue, the invoice and the confirmation email use, and is it consistent?
  • Who reviews Arabic strings, generated PDFs and bilingual notifications before launch?
  • What does the staged launch cover, and what is the roll-back path if a rendering defect reaches customers?

How this guide is sourced and where it stops

The direction, language and bidirectional-text facts are read from the W3C's own internationalization guidance and the Unicode Bidirectional Algorithm; the logical-properties facts from MDN's own CSS documentation; and the platform facts from WordPress's own function reference and Laravel's own localisation documentation, on the dates cited. Netbase's delivery lifecycle: discovery and strategic alignment; team assembly and architecture planning; agile execution with outcome-based milestones; modular components; training and rollout; ongoing support. The build sequence and the worked scenario are editorial planning guidance.

Common questions

It sets the base direction, which right-aligns paragraphs and reverses table columns, but a stylesheet still written in physical left and right values needs its own rework with logical properties.

That is a brand decision, not one the platform makes for you.

WordPress exposes the current direction through its own is_rtl() function; Laravel's own localisation documentation covers translation strings and the application locale only and defines no right-to-left layout feature.

Not automatically. A PDF or email template is usually its own layout, separate from the storefront pages, with its own direction, font and testing pass.

The bilingual web-to-print platform record and the reward shop platform record, both described above in the chapter on what Netbase has built on bilingual Arabic and English platforms.

Yes. A user acceptance testing pass run by Arabic-speaking readers on a staging environment catches layout and shaping defects that an automated check does not.

Plan your bilingual right-to-left build

Bring your target launch markets, your stylesheet's use of physical or logical properties, and your digit-style decision to a brief. E-commerce development scopes the attribute, layout, font and testing work as milestones; a store also decoupling its front end starts with the headless Magento with Next.js guide, and the guides index lists every other market and platform guide.

OutsourcingVN is Netbase's own outsourcing-services platform. Submit a project with your target languages and current stylesheet, and a person will reply with the fit.

E-commerce development, built, extended or replatformed as a project E-commerce development, built, extended or replatformed as a project

A store built, extended or replatformed on Magento, WooCommerce or headless, as scoped milestones.

Learn More
line

Sources

91 Nguyen Chi Thanh, Hanoi

+84 937 869 689

Tell us what you want to build or automate.

Submit a project