Building a website in Arabic and English: what right-to-left takes

What right-to-left changes

The whole page mirrors. Navigation starts on the right, text aligns to the right, sidebars swap sides, and progress steps and carousels run the other way.

Some things stay as they are: phone numbers, logos, and media controls. Icons that show a direction, such as arrows, flip. Icons that do not, such as a search glass or a camera, stay.

Mixed text

Arabic sentences often contain English words, product names and numbers. Browsers order mixed text by a set of rules that mostly work. Now and then a bracket, a full stop or a number lands in the wrong place.

These slips are invisible to someone who does not read Arabic, so the pages need checking by someone who does.

Typography

Arabic script needs a font chosen for it. It often needs a slightly larger size and more space between lines to read as comfortably as the English.

Arabic has no capital letters, and spacing the letters apart breaks the joins between them. Any style that relies on capitals or wide letter-spacing needs an Arabic alternative.

Build it in from the start

Modern CSS lets a layout be written in terms of start and end in place of left and right. A page built that way flips direction by changing one attribute. A page built with left and right throughout has to be reworked line by line.

• Design the key screens in both languages.
• Allow for text that is longer or shorter in translation.
• Test forms, tables and charts in both directions.

Content and translation

Machine translation produces text that can be read and sounds foreign. Marketing copy should be written by a native writer, with a deliberate choice between Modern Standard Arabic and a regional voice.

The content system should hold both languages for every page, and show which pages are missing a translation.

Search and addresses

• Give each language its own address, such as /ar/ and /en/.
• Mark each page with its language and direction.
• Tell search engines which pages are translations of each other.
• Translate the page titles and descriptions too.
• Make the language switch lead to the same page in the other language.
• Do not redirect by location in a way that hides one version from search engines.

Details that get missed

• Dates, and the Hijri calendar where it is relevant.
• Which digits to show, used consistently.
• Currency formats.
• Phone number and address fields.
• Error messages and form validation.
• Emails, invoices and PDFs the system sends.
• A weekend that falls on Friday and Saturday, for anything involving schedules.