Right-to-left basics for Arabic and Hebrew pages

Declare direction in the markup

The W3C's guidance on structural markup for right-to-left text is direct on two points. If the overall direction of a document is right to left, add dir="rtl" to the html element, and do not use CSS to apply the base direction of an HTML page ¹. Direction is part of the meaning of the content, so it belongs in the markup where browsers, assistive technology and translation tools can read it, rather than in a stylesheet that might not load or might be overridden.

With dir="rtl" on the root, child elements inherit the direction unless something overrides it ¹. Pair it with the right language tag: <html lang="ar" dir="rtl"> for Arabic, <html lang="he" dir="rtl"> for Hebrew.

What mirrors and what does not

When direction flips, the reading flow flips with it. Readers start at the right, so the layout should too.

The last row is a reminder to involve fluent reviewers early. Conventions for charts and diagrams vary, and the people who read the language daily are the ones to ask.

Logical CSS properties carry the layout

Stylesheets written with physical directions, such as margin-left and padding-right, have to be duplicated or overridden for a mirrored layout. Logical properties describe the same spacing in terms of reading flow: margin-inline-start means "the side where lines begin", which is the left in German and the right in Arabic.

Using logical properties throughout, along with flexbox and grid layouts that follow the document direction, means one stylesheet can serve both directions with a small set of exceptions. On an existing site, converting physical properties can be the largest single task in adding a right-to-left version, and its size depends on how the styles were written. A site that may ever add Arabic or Hebrew saves that work by using logical properties from the start.

Mixed-direction text

A right-to-left page still contains left-to-right text. Prices, product codes, email addresses, brand names and phone numbers stay in Latin script and read left to right inside an Arabic sentence. Browsers handle much of this with the Unicode bidirectional algorithm, but some cases need help:

• User-supplied text. Names and comments typed by visitors can be in either direction. The W3C recommends dir="auto" on form fields and inserted text, so the browser works out the direction from the content ¹.
• Isolated fragments. A product code such as "CH-2040-B" inside an Arabic sentence can appear jumbled if the punctuation is taken as part of the surrounding text. Wrapping it in an element with its own dir="ltr" keeps it in order.
• Punctuation at the end of a line. A full stop after a Latin word at the end of an Arabic sentence can end up at the wrong edge. Test real sentences, not placeholder text.

Forms in a right-to-left page

Labels sit to the right of their fields, required-field markers move with them, and error messages appear in the reading start position. Fields for email addresses, website addresses and phone numbers should stay left to right even on an Arabic page, because their content is Latin script. Set dir="ltr" on those fields explicitly, and test what happens when someone types an Arabic name into a field that expects Latin characters.

Fonts and line height

Arabic script needs a font that supports it fully, including the joining forms that change a letter's shape depending on its position. A Latin web font with Arabic glyphs missing falls back to a system font, which can look mismatched. Arabic text can also need more generous line height than Latin text at the same size, so check headings and dense paragraphs once real text is in place.

Testing a right-to-left version

1. Switch the page to dir="rtl" and look for anything that stayed on the left: icons, borders, shadows, decorative shapes.
2. Tab through the page with the keyboard. Focus order should follow the mirrored layout.
3. Read real Arabic or Hebrew content in headings, buttons and error messages, not placeholder text.
4. Check numbers, prices and dates in context. Digits keep their order; the surrounding layout mirrors.
5. Ask a fluent reader to use the site for a real task and note where they hesitate.

The language demo on this site switches a small interface into Arabic, so you can see direction change on a live example. Its Arabic phrases are samples, like every phrase there, and need checking by a translator before use.

Accessibility notes

Screen readers choose voice and pronunciation from the language tag, so an Arabic page must declare lang="ar"; that is WCAG 2.2 success criterion 3.1.1 at Level A ². Latin-script passages inside it, such as an English product name, should be marked with their own language where pronunciation matters, which is criterion 3.1.2 ³.