Language and Text Direction

Support multilingual content and RTL languages with lang, dir, and Unicode bidirectional control.

Overview

Building websites for global audiences requires understanding two HTML attributes: lang and dir. lang specifies the language of content. The browser uses it for spell-checking, screen reader pronunciation, and hyphenation. Search engines use it for language-specific indexing. dir specifies text direction: ltr (left-to-right, default), rtl (right-to-left for Arabic, Hebrew, Persian), or auto (browser determines from content). Arabic and Hebrew are the most common RTL languages together they represent over 500 million speakers. Proper lang and dir implementation ensures your page is readable and accessible to speakers of all languages.

Key Points

•lang="ar" (Arabic), lang="he" (Hebrew), lang="fa" (Persian/Farsi) are common RTL languages
•dir="rtl" reverses text direction; dir="ltr" forces left-to-right
•dir="auto" lets the browser detect direction from the first strongly-typed character
•Set both lang and dir on <html> for RTL pages: <html lang="ar" dir="rtl">
•Use <bdi> for bidirectional isolation of text whose direction is unknown (user content)
•Use <bdo dir="rtl"> to force a specific direction on a text span

Examples

Arabic RTL page setup

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>صفحتي العربية</title>
  </head>
  <body>
    <nav>
      <a href="/">الرئيسية</a>
      <a href="/about">عن الموقع</a>
    </nav>
    <main>
      <h1>مرحباً بكم</h1>
      <p>هذا النص باللغة العربية ويُعرض من اليمين إلى اليسار.</p>
    </main>
  </body>
</html>

Setting dir="rtl" on <html> affects all elements including layout, margins, and flex direction.

Mixing RTL and LTR content

<!-- Page in Arabic (RTL) -->
<html lang="ar" dir="rtl">
<body>
  <!-- Arabic paragraph with an embedded English phrase -->
  <p>
    هذا بريدي الإلكتروني:
    <!-- bdi isolates direction of embedded unknown-direction text -->
    <bdi>user@example.com</bdi>
  </p>

  <!-- Force RTL on specific text in an LTR page -->
  <p>He said: <bdo dir="rtl">שלום עולם</bdo> in Hebrew.</p>

  <!-- Element with different language and direction -->
  <blockquote lang="he" dir="rtl">
    שלום עולם Hello World in Hebrew
  </blockquote>
</body>

CSS logical properties for RTL support

/* Physical properties break in RTL */
.card { margin-left: 16px; padding-right: 8px; }

/* Logical properties work correctly in both LTR and RTL */
.card {
  margin-inline-start: 16px;  /* = margin-left in LTR, margin-right in RTL */
  padding-inline-end: 8px;    /* = padding-right in LTR, padding-left in RTL */
  border-inline-start: 3px solid blue; /* left border in LTR, right in RTL */
}

CSS logical properties (margin-inline-start, padding-inline-end) automatically adapt to text direction.

Common Mistakes

Setting dir="rtl" without also setting the lang attribute search engines and screen readers need both
Using margin-left/margin-right for spacing instead of logical properties in RTL-aware designs
Forgetting to wrap user-generated content with <bdi> usernames and user text may be RTL in an LTR page

Note

Test your RTL layout by temporarily setting dir="rtl" on the <body> in DevTools. The layout should mirror correctly navigation, buttons, and text should all flip. If anything breaks, switch to CSS logical properties.

Language and Text Direction

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does dir="rtl" change about the page?