Arabic Website Design: A Practical RTL Guide

Building an Arabic website is not just translating the text into Arabic; the direction of the whole page changes too. The short answer: set dir="rtl" and lang="ar" on the root element, write CSS with start/end (logical) properties instead of left/right, mirror directional icons but not logos, videos or charts, load a dedicated Arabic font, and declare the Arabic version with hreflang. Plan these five steps from the start and Arabic arrives as one more language; bolt them on later and you often end up rewriting half the design.

Who needs an Arabic website?

Exporters selling to the Gulf, Iraq, Egypt and North Africa, hotels and medical tourism providers hosting guests from Arab countries, and construction or engineering firms running projects in the region benefit most from an Arabic version. Business in these markets is often done in English, but the company that speaks to decision makers and end users in their own language earns trust, and can face very little competition on Arabic search queries. We covered selling abroad in general in our cross-border e-commerce guide and the language foundation in our multilingual website article; this one focuses only on what is specific to right-to-left (RTL) Arabic.

Step one: dir="rtl" and lang="ar"

What tells the browser the direction of the page is the dir attribute on the html element. With dir="rtl", text alignment, table column order, scrollbar position and flex/grid flow all switch to right-to-left on their own. lang="ar" is needed so screen readers pronounce correctly, the browser picks the right shaping and search engines recognise the language. In a locale-prefixed setup such as Next.js, the value is generated in the layout from the current locale:

const RTL_LOCALES = new Set(['ar', 'fa', 'he']);

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params;
  const dir = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

/* CSS: logical properties instead of left/right */
.card {
  padding-inline-start: 24px; /* left in LTR, right in RTL */
  margin-inline-end: 16px;
  border-inline-start: 4px solid var(--color-primary);
  text-align: start;
}

/* Mirror a directional icon only in RTL */
[dir='rtl'] .icon-arrow {
  transform: scaleX(-1);
}

Your UI library needs to know the direction as well. Ant Design, MUI and similar libraries support RTL, but it has to be switched on; otherwise dropdowns, date pickers and drawers open from the wrong side.

Writing CSS with logical properties

Most RTL work happens in CSS. Physical directions such as margin-left, padding-right, left: 0 or text-align: left end up backwards in RTL. Writing a separate [dir=rtl] override for each one is slow and fragile. The right approach is to use logical properties from day one:

• margin-inline-start / margin-inline-end instead of margin-left / margin-right
• padding-inline-start / padding-inline-end instead of padding-left / padding-right
• inset-inline-start / inset-inline-end instead of left / right positioning
• text-align: start instead of text-align: left
• border-inline-start instead of border-left; border-start-start-radius for corners
• Flex and grid already follow the direction, so there is no need to flip them by hand with row-reverse

What makes an Arabic version cheap is not the translation but CSS written with logical properties from the first day. On a site built with physical directions, RTL support means going through every component by hand.

What to mirror and what to leave alone

Not everything flips in RTL. The rule is simple: elements whose meaning depends on direction are mirrored; elements whose meaning does not are left as they are.

• Mirror: back/forward arrows, menu opening direction, breadcrumb separators, slider and gallery direction, progress bars, step indicators.
• Do not mirror: logos, photos and videos, brand icons, clock icons, play buttons, chart time axes in most cases, phone numbers and email addresses.
• Watch out: Latin words, product codes and URLs inside Arabic text still read left to right; wrapping them in a bdi element or dir="ltr" stops punctuation from jumping to the wrong place on mixed lines.

Arabic fonts, line height and typography

The font chosen for Latin text usually has no Arabic glyphs, so the browser falls back to a system font and the page looks different on every device. Load a dedicated Arabic web font such as Noto Naskh Arabic, Noto Kufi Arabic, Cairo or IBM Plex Sans Arabic, and only on Arabic pages. Because Arabic letters connect and their dots extend above and below the line, line height should be a little more generous than for Latin text. Letter-spacing is not used in Arabic because it breaks the joins between letters, and there is no upper or lower case, so heading styles built on text-transform: uppercase mean nothing in Arabic.

Numbers, dates and forms

Some Arab countries commonly use Eastern Arabic numerals (٠١٢٣), others Western digits (0123), and in the Gulf you will see both. Decide which to show based on the target market, and format prices, dates and currencies with Intl.NumberFormat and Intl.DateTimeFormat rather than by hand. In forms, name and address fields align to the right, but phone, email, IBAN and card number fields should stay left to right. Review validation too: a name field that only accepts Latin letters rejects an Arabic name, and every abandoned form is a lost customer.

SEO for Arabic pages

For the Arabic version to appear in search, the usual multilingual rules apply: a separate URL per language (/ar/...), reciprocal hreflang="ar" annotations and a language-specific title and description. Arabic characters can be used in URLs; Google reads them and shows them in Arabic in results, but they turn into long encoded strings when shared. Both approaches work as long as URLs stay short and readable; what matters is choosing once and not changing it. The real difference is the content: an Arabic page filled with machine translation gives itself away to an Arabic speaker in the first paragraph, and bounce rates stay high. If you target a specific country such as Saudi Arabia, region-coded hreflang like ar-SA and local contact details strengthen the signal. For the technical foundation see our SEO-friendly website guide, and for an example of a market with its own search engine, our Yandex SEO article.

RTL testing before launch

• Open every page template in Arabic and compare screenshots against the LTR version on mobile and desktop.
• Open dropdowns, modals, drawers, date pickers, sliders and toast notifications one by one.
• Check where punctuation lands on lines that mix Arabic text with Latin words, numbers and URLs.
• Fill in and submit forms with an Arabic name, Eastern Arabic numerals and long addresses.
• Listen to a few pages with a screen reader; lang and dir mistakes are audible immediately. For the general rules see our accessibility (WCAG) article.
• Check that social share (OG) images draw Arabic text with connected letters and in the right direction.

Conclusion

The quality of an Arabic website comes down to three decisions: managing direction at the root (dir and lang), writing CSS with logical properties, and having the content written and reviewed by someone who actually speaks Arabic. Set these up from the start and Arabic becomes one more language, not a separate site. If you want a site that works in several languages, Arabic included, with right-to-left layout supported from day one, take a look at our web development service or get a free quote.