RTL Web Design: 7 Rules for Arabic & Hebrew Websites

Summarize this post with: 10 min read

Good RTL (right-to-left) design starts in the markup, not the stylesheet: set dir="rtl" and the right lang on the <html> element of Arabic, Hebrew, Persian or Urdu pages, build your CSS with logical properties such as margin-inline-start so the layout mirrors itself, and then decide element by element what should flip. Navigation, back and next arrows, progress bars and text-alignment icons mirror; logos, checkmarks, clocks, media playback controls, photos and the digits inside a number do not.

Key takeaways

Put direction in HTML (<html dir="rtl" lang="ar">), never only in CSS. The W3C says not to use CSS to set base direction.
Replace left and right in your CSS with logical start and end properties. One stylesheet then serves both directions.
Mirror anything that shows reading order, navigation or progress. Keep logos, universal symbols, real-world objects and photos as they are.
Numbers keep their digit order even inside RTL text. Hebrew uses Western digits; Arabic may use Western or Eastern Arabic numerals.
Test with real translated text, including mixed Arabic and English strings, before launch.

What RTL design means

Right-to-left scripts are read from the right edge of the page. The W3C lists Adlam, Arabic, Hebrew, N’Ko, Syriac and Thaana as right-to-left scripts, used to write languages including Arabic, Dhivehi, Hebrew, Pashto, Persian, Sindhi, Urdu and Yiddish (W3C Internationalization).

RTL design is not “right-align everything”. Readers of these languages expect the whole interface to follow their reading direction: the logo and main navigation on the right, the sidebar swapped, a back arrow that points right. They also expect some things not to change, such as a phone number, a brand logo or the play button on a video. Getting that split right is what separates a translated page from a localized one.

1. Set direction and language in the HTML

The foundation is one attribute. The W3C’s quick answer: “If the overall document direction is right-to-left, add dir="rtl" to the html tag” (W3C).

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8" />
  </head>
</html>

According to the W3C, that single attribute right-aligns paragraphs, makes table columns run right to left, starts form input at the right, places punctuation correctly and, if your stylesheet is written well, lets CSS mirror the layout.

Three rules from the same guidance:

Don’t use CSS for base direction. Direction affects meaning, so it belongs in the markup, where it still works if CSS fails to load.
Declare lang separately. lang="ar" does not imply dir="rtl", and vice versa. Set both.
Use dir="auto" on user input. Form fields and inserted text of unknown direction (a username, a comment) should detect their direction at run time.

If you only mark up individual blocks as RTL while the page stays LTR, you will fight alignment, punctuation and table order everywhere. Set it once at the top.

2. Write CSS with logical properties

Most RTL bugs come from CSS that says “left” or “right”. A card with padding-left: 24px keeps its padding on the left in Arabic, which is now the far edge.

CSS logical properties describe layout relative to the text direction instead (MDN). The W3C recommends them for exactly this reason: use start and end for margins, padding and alignment “to make it easy to manage direction changes during localisation”.

Physical (avoid)	Logical (use)
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`left: 0`	`inset-inline-start: 0`
`text-align: left`	`text-align: start`
`border-left`	`border-inline-start`
`float: left`	`float: inline-start`

Flexbox and grid already follow the document direction: a row of flex items starts on the right in an RTL page. That’s why a layout built with flex or grid and logical spacing usually mirrors correctly with no extra CSS at all.

Things logical properties don’t handle for you:

Transforms and positioned decorations. transform: translateX(10px) moves right in both directions.
Background positions and gradients set with left or right.
Icons drawn as CSS shapes or single SVGs that point in a direction (see step 4).

For those, use a direction selector:

[dir='rtl'] .chevron {
  transform: scaleX(-1);
}

3. Mirror the layout, not the content

When the page flips, these move to the opposite side:

Logo and primary navigation (typically to the top right).
Sidebars and secondary columns.
Breadcrumbs, which now read right to left with separators pointing left.
Form labels, required markers and validation icons.
Table columns, which start from the right.
Carousels and pagination, which advance to the left.

These stay as they are:

Photos and illustrations. Apple’s Human Interface Guidelines advise against flipping photographs and artwork, because “flipping an image often changes the image’s meaning” and can create copyright problems. If an image’s content depends on reading direction (for example a screenshot of an interface), create a localized version instead (Apple HIG).
Video and audio players. Playback refers to the direction of the media, not the language.
Scrollbars. The W3C notes scrollbar position is part of the browser, controlled by the user, not the page.

When images appear in a meaningful order, such as a timeline or a ranked list, reverse their order rather than flipping each image.

4. Decide which icons flip

Apple’s guidelines give the clearest rules, and they work just as well for websites (Apple HIG):

Flip:

Back, next and previous arrows, and anything that navigates items in a fixed order. “A back button must point to the right” in RTL.
Progress bars and sliders, which should fill from right to left. Reverse the order of any numbers along them, but never flip the digits.
Icons that represent text or reading direction, such as text-alignment or list icons.
Icons showing forward or backward motion.

Don’t flip:

Logos, even ones that contain text. Apple warns that a flipped logo “confuses people and can have legal repercussions”.
Universal marks such as the checkmark.
Real-world objects, such as a clock, which “work the same everywhere”.
Controls that mean a real direction, such as “align right”, which must still point right.

A practical approach: tag each icon in your design system as mirror or fixed once, and apply the flip with a single CSS rule for the mirror set.

5. Handle numbers, dates and mixed text

Numbers. “The digits in a specific number, such as ‘541,’ a phone number, or a credit card number, always appear in the same order,” Apple’s guidance says. Hebrew uses Western Arabic numerals (0-9). Arabic text may use Western or Eastern Arabic numerals (٠-٩), and usage varies between countries and even regions. Decide per market, and keep the choice consistent across prices, dates and forms.

Mixed direction. Arabic sentences often contain English product names, URLs or code. The browser’s bidirectional algorithm places these runs, but punctuation next to them can land on the wrong side. Wrap user-supplied or unknown-direction fragments in <bdi> or give them dir="auto", as the W3C suggests for inserted text.

Titles. If an RTL page title begins with Latin letters (an acronym, a brand), the W3C notes browsers can display it in the wrong order in tabs and bookmarks. Adding &rlm; (the invisible right-to-left mark) at the start of the title fixes it.

6. Choose fonts and sizes for the script

Arabic letters join and change shape depending on their position in the word, and Hebrew and Arabic have no capital letters. Two consequences for design:

Pick fonts made for the script. A Latin web font falls back to a system font for Arabic, which often looks mismatched. Load a dedicated Arabic or Hebrew font with good hinting at small sizes.
Balance sizes. Apple notes that Arabic or Hebrew text can look too small next to all-caps Latin text of the same size, and that increasing the RTL font size by about 2 points often balances it.
Don’t letter-space Arabic. Extra tracking breaks the joins between letters. Also avoid text-transform: uppercase on elements that may hold RTL text; it has no effect there, so any design that relies on caps for emphasis needs another treatment.
Allow for different line heights. Arabic scripts use more vertical space for dots and marks, so test line height and clipped text in buttons.

7. Test with real content and real readers

Mock-ups filled with Latin placeholder text hide most RTL problems. Before launch:

Load real translated text in every template, including the longest strings, error messages and emails.
Test mixed strings: an Arabic sentence with an English brand name, a URL and a price.
Check forms end to end: typing direction, placeholder alignment, validation messages, phone and card fields (which stay left-to-right).
Test on mobile, where swipe gestures and off-canvas menus should open from the right.
Ask a native reader to click through the main journeys. They will spot a reversed arrow or a misplaced comma in seconds.
Keep SEO basics per language: each RTL language version on its own URL, with hreflang linking it to the other languages. See our multilingual SEO overview.

How ConveyThis helps with RTL languages

ConveyThis translates your site into Arabic, Hebrew, Persian, Urdu and the rest of its 210 supported languages, and serves each language on its own URL. For right-to-left languages, you can turn on a setting that switches translated pages to right-to-left, as shown in our help article on changing text direction. When it’s on, the translated page is set to dir="rtl" with right-aligned text, while your original-language pages are left as you built them.

What that setting can’t do is fix a stylesheet full of left and right. The cleaner your CSS (steps 2 to 4), the better the automatic switch works. For the language work itself, you can refine machine translations in the visual editor, keep brand terms consistent with a glossary, and swap images per language with image and media translation. Our step-by-step guide to translating a website into Arabic covers the process from language choice to launch, and the localization overview explains how ConveyThis handles the parts beyond translation.

Frequently asked questions

What is RTL in web design?

RTL (right-to-left) design adapts a website for scripts read from right to left, such as Arabic and Hebrew. It means setting dir=“rtl” on the page, mirroring the layout and directional icons, and keeping logos, numbers, media controls and photos unchanged.

Should I set RTL direction in CSS or HTML?

In HTML. The W3C advises adding dir=“rtl” to the html element and never using CSS to set base direction, because direction is part of the content’s meaning and must work even without the stylesheet.

Which icons should not be mirrored in RTL?

Logos, universal marks such as the checkmark, icons of real-world objects such as clocks, controls that point to an actual direction, and media playback controls. Arrows for navigation and progress should be mirrored.

Are numbers written right to left in Arabic?

No. The digits within a number keep the same order in Arabic and Hebrew text. Arabic may use Western or Eastern Arabic numerals depending on the country, but the order of digits never reverses.

Do CSS logical properties work in all modern browsers?

Yes, the core logical properties such as margin-inline-start, padding-inline-end and text-align: start are supported in all current major browsers. Check any newer or less common property on MDN before relying on it.

Start with the translation

A clean RTL layout still needs accurate Arabic or Hebrew content behind it. You can create a ConveyThis account, add a right-to-left language and review the result on your own pages.