Right-to-left layout for Arabic and Hebrew

Why translation alone is not enough

A page translated into Arabic but laid out left to right is hard to read: the text starts at the wrong edge, the navigation runs backwards, arrows point the wrong way and punctuation lands in odd places. Making it readable means changing the markup, the styles and some of the images, not only the words.

What the work covers

Direction in the markup

The W3C advises adding dir="rtl" to the html element when a document's overall direction is right to left, and not using CSS to set the base direction of an HTML page ¹. We set direction and language together on every right-to-left page, such as lang="ar" dir="rtl", so browsers and screen readers handle it correctly. Declaring the page language is a WCAG 2.2 Level A requirement ².

Mirrored layout

Navigation, columns, sidebars, alignment, progress indicators and directional icons swap sides. Logos, media controls and the digits within numbers do not. The table in our right-to-left guide lists the main cases; your fluent reviewers settle the rest.

Stylesheets

Physical properties such as margin-left are converted to logical ones such as margin-inline-start, so one stylesheet can serve both directions. On an existing site this conversion is the part whose size varies most, and it is why we quote after looking at the code.

Mixed-direction text

Prices, product codes, email addresses and brand names inside Arabic or Hebrew sentences are wrapped or marked where needed so they display in order. Form fields for user input get dir="auto", as the W3C recommends for inserted text ¹, while fields for email addresses and phone numbers stay left to right.

Fonts

The right-to-left version needs a font with full support for the script, including Arabic joining forms. We choose or check a font that matches the rest of the design and test line height with real text.

Images and media

Images with text, arrows or direction-dependent compositions are listed, and replacements are planned per language.

Testing

Testing happens with real Arabic or Hebrew text, never with placeholder characters. We check every template on phones and desktops, tab through each page with the keyboard to confirm focus order follows the mirrored layout, and check that numbers, dates and prices read correctly in context. Final approval of the language and of conventions such as chart direction comes from fluent readers you appoint, because we do not certify translations or language use.

What you receive

1. An assessment of the current site's readiness for right-to-left, with an estimate of the stylesheet work.
2. Converted stylesheets and mirrored templates.
3. Direction and language attributes across the right-to-left pages.
4. Handling of mixed-direction text and forms.
5. A list of images and media needing per-language versions.
6. A test report across templates and devices, ready for your reviewers to confirm.

On a new site

If a right-to-left language is planned from the beginning, a large part of this work moves into the design and build: logical properties are used from the start, and templates are tested in both directions as they are made. That is part of our multilingual design service, with the extra right-to-left testing quoted in.

Price

From CHF 4,200 to adapt an existing site with a standard theme, plus VAT where applicable. Sites with large custom stylesheets are quoted after we have looked at the code. See pricing for the other starting points.