Moayyad Faris
← Back to All Guides
Arabic & Web Platform10 min read· Published 2026-07-22

Building Production-Ready Arabic & RTL Web Interfaces in Next.js

A comprehensive architectural guide to Right-to-Left (RTL) typography, bidirectional Unicode handling, text normalization, and Arabic URL slugification.

Moayyad Faris
VP of Engineering & Software Architect

Drawn from shipping bilingual Arabic/English production interfaces, not from generic RTL checklist advice.

Designing high-performance web platforms for Arabic-speaking users requires more than applying `dir="rtl"` to `<html>`. This guide provides practical patterns for bidirectional text (BiDi), font optimization, text normalization, and slug generation for Arabic SEO.

1. RTL Layout & Directional Mirroring in Modern CSS

Supporting right-to-left layout in modern web applications involves configuring HTML attributes, CSS logical properties, and font stacks.

Defining HTML Directionality in Next.js

In Next.js App Router, set the lang and dir attributes dynamically on the root <html> element based on active locale:

tsx
// src/app/[locale]/layout.tsx
export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const isRtl = locale === "ar";

  return (
    <html lang={locale} dir={isRtl ? "rtl" : "ltr"}>
      <body className={isRtl ? "font-arabic" : "font-sans"}>
        {children}
      </body>
    </html>
  );
}

Prefer Logical CSS Properties over Directional Classes

Instead of writing separate left and right CSS rules, use CSS Logical Properties which automatically adapt when text direction switches:

  • Use margin-inline-start instead of margin-left
  • Use padding-inline-end instead of padding-right
  • Use inset-inline-start instead of left

In Tailwind CSS v4, utility classes like ms-4 (margin-inline-start) and pe-6 (padding-inline-end) handle multi-directional support out of the box.

2. The Unicode Bidirectional (BiDi) Algorithm & Text Isolation

When mixing Arabic text with numbers, punctuation, or English product names (e.g. *"Buy 3 iPhone 15 Pro Max online"*), browsers invoke the Unicode Bidirectional Algorithm. Without explicit isolation, punctuation marks like periods, parentheses, and trailing question marks often jump to the wrong side of the sentence.

Fixing Punctuation Flipping with `<bdi>` and `dir="auto"`

Use the HTML5 <bdi> (Bidirectional Isolate) element when rendering user-submitted text whose directionality is variable:

tsx
// Keeps inline mixed English/Arabic text rendered cleanly without breaking surrounding layout
<p>
  User status: <bdi className="font-semibold">{username}</bdi> (registered recently)
</p>

If container width is constrained, use our [RTL Preview](/tools/arabic/rtl-preview) tool to test how mixed strings render across desktop, mobile, and email widths before publishing.

3. Arabic Text Normalization & Diacritics Removal

Arabic text in database search indexes, user search queries, and content pipelines suffers from spelling variations:

  1. Diacritics (Tashkeel / تشكيل): Short vowels (فتحة, ضمة, كسرة, سكون) are included in classical text but omitted in modern search queries.
  2. Alef Variants: أ, إ, and آ are frequently typed simply as ا.
  3. Ya and Alef Maqsura: ى (Alef Maqsura) and ي (Ya) are often interchanged at sentence ends.
  4. Tatweel (kashida / ـ): Used for visual lengthening but breaks substring matching.

Automated Text Standardisation Code Snippet

ts
export function normalizeArabicText(input: string): string {
  return input
    // Remove diacritics (tashkeel)
    .replace(/[\u064B-\u0652]/g, "")
    // Strip Tatweel
    .replace(/\u0640/g, "")
    // Normalize Alef variants to plain Alef
    .replace(/[أإآ]/g, "ا")
    // Normalize Alef Maqsura to Ya
    .replace(/ى/g, "ي")
    // Convert Arabic-Indic digits (٠١٢٣٤٥٦٧٨٩) to Western (0123456789)
    .replace(/[٠-٩]/g, (d) => (d.charCodeAt(0) - 0x0660).toString());
}

For quick browser-side testing of these transformations, use the [Arabic Text Normalizer](/tools/arabic/arabic-text-normalizer).

4. Generating URL-Safe Arabic Slugs for Technical SEO

Search engines like Google fully index and support native Arabic characters in URL paths (e.g. /blog/تصميم-الموقع). However, when copied into social media apps or plain-text messages, raw non-ASCII URLs turn into long percent-encoded strings (%D8%AA%D8%B5%D9%85%D9%8A%D9%85...).

Choosing Between Arabic-Preserving vs Transliterated Slugs

ApproachBest ForTradeoff
Arabic-preserving (e.g. /blog/تصميم-الموقع)Localized Arabic-first platformsSuperior keyword relevance on native search engines; percent-encodes into a long string when pasted into some apps
Transliterated Latin (e.g. /blog/tasmim-al-mawqi)International, cross-border platformsClean, shareable links everywhere; loses native-script keyword matching

Try our [Arabic Slug Generator](/tools/arabic/arabic-slug-generator) to test both options interactively.

Frequently Asked Questions

Is setting dir="rtl" on the <html> element enough for Arabic support?

No. dir="rtl" mirrors the overall page layout, but mixed Arabic/Latin content (numbers, product names, punctuation) still needs explicit BiDi isolation via the <bdi> element or dir="auto", and directional CSS (left/right, margin-left) needs to be rewritten with CSS logical properties (inline-start/inline-end) to mirror correctly.

What is the Unicode Bidirectional (BiDi) Algorithm?

The Unicode Bidirectional Algorithm is the specification (Unicode Standard Annex #9) that browsers use to determine the visual ordering of mixed left-to-right and right-to-left text on the same line — it's why punctuation and numbers can appear to jump to the wrong side of a sentence without explicit isolation.

Should Arabic URL slugs preserve Arabic script or use transliteration?

It depends on the audience: Arabic-preserving slugs give better keyword relevance on native-language search engines and are fully indexable by Google, while transliterated Latin slugs share more cleanly on messaging apps and social platforms that percent-encode non-ASCII URLs.

How do you strip Arabic diacritics (tashkeel) for search normalization?

Strip the Unicode combining-mark range U+064B–U+0652 (the short-vowel diacritics) and the U+0640 tatweel character with a regex replace, then normalize Alef variants (أ/إ/آ → ا) and Alef Maqsura (ى → ي) so visually different spellings match the same search index entry.

References