WSS
Web Specification Studio Home
On this page
InternationalisationRecommendedUpdated

Language Direction & Right-to-Left (RTL) Layouts

Architect bidirectional and Right-to-Left (RTL) email layouts with document-level dir="rtl" declarations, mirrored table alignments, and isolated BiDi spans.

What it is

Language direction architecture governs how email templates adapt typography, text alignment, column ordering, visual hierarchy, and iconography when rendering languages written in Right-to-Left (RTL) scripts - including Arabic, Hebrew, Persian (Farsi), Urdu, and Yiddish.

Implementing RTL support in HTML email requires coordinating HTML document attributes (dir="rtl"), table cell alignment mirroring (align="right"), and bidirectional text isolation tags (<bdi>) to handle mixed Arabic/Hebrew and Latin/numeric content cleanly.

<!DOCTYPE html>
<html lang="ar" dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>تأكيد طلبك</title>
</head>
<body dir="rtl" style="margin: 0; padding: 0; text-align: right; direction: rtl;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" dir="rtl">
    <tr>
      <td align="right" style="font-family: 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #18181b; text-align: right; direction: rtl;">
        <h1 style="font-size: 24px; margin: 0 0 16px 0;">مرحباً بكم في استوديو مواصفات الويب</h1>
        <p style="margin: 0 0 16px 0;">
          تم تأكيد رقم الطلب الخاص بك: <bdi style="direction: ltr; unicode-bidi: isolate;">#WSS-98234</bdi>.
        </p>
      </td>
    </tr>
  </table>
</body>
</html>

Why it matters

  • Over 500 Million Global RTL Speakers: Millions of users in the Middle East, North Africa, and global diaspora communities read in RTL scripts. Displaying Arabic or Hebrew text left-aligned or with reversed punctuation is jarring, disrespectful, and confusing.
  • Punctuation & Number Distortion (BiDi Algorithm): When LTR Latin words, order numbers (#123), or phone numbers are embedded inside an Arabic sentence without directional isolation (<bdi>), the Unicode Bidirectional Algorithm can reposition punctuation marks (periods, question marks, closing parentheses) to the wrong side of the paragraph.
  • Multi-Column Visual Hierarchy Inversion: In LTR layouts, the eye reads from top-left to bottom-right. In RTL layouts, visual hierarchy mirrors completely: the primary logo moves to the top-right, navigation menus start on the right, and two-column grids display Column 1 on the right and Column 2 on the left.

How to implement

1. Declare dir="rtl" at the document root and body: Always declare dir="rtl" on the root <html> tag, <body dir="rtl">, and on container tables:

<html lang="ar" dir="rtl">
<body dir="rtl" style="direction: rtl; text-align: right;">

2. Mirror HTML Table Alignments: Set align="right" and style="text-align: right; direction: rtl;" on all layout and content cells:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" dir="rtl">
  <tr>
    <td align="right" style="text-align: right; direction: rtl;">
      <!-- Content aligned to right margin -->
    </td>
  </tr>
</table>

3. Use <bdi> (Bidirectional Isolation) for Dynamic Tokens: Wrap dynamic user names, account numbers, URLs, and serial numbers with <bdi> (Bi-Directional Isolate) to isolate their directional flow from the surrounding RTL paragraph:

<p style="direction: rtl; text-align: right;">
  مرحباً <bdi>John Doe</bdi>، شكراً لتسجيلك.
</p>

4. Flip Navigation & Call-to-Action Icons: Mirror directional icons (such as right-pointing arrows → changing to left-pointing arrows ←):

<!-- LTR Button: Arrow on right -->
<a href="https://example.com" class="btn">Continue <span aria-hidden="true">&rarr;</span></a>

<!-- RTL Button: Arrow on left -->
<a href="https://example.com" class="btn"><span aria-hidden="true">&larr;</span> متابعة</a>

Common mistakes

  • Relying Only on CSS text-align: right without dir="rtl": Setting text-align: right aligns the text to the right border but leaves the underlying document flow in LTR mode, causing sentence punctuation (like periods) to snap incorrectly to the right edge of sentences.
  • Forgetting to Mirror Multi-Column Grids: In two-column layouts, leaving Column 1 on the left side of an RTL template causes the secondary column to be read first.
  • Broken Mixed-Script Numbers: Rendering mixed alphanumeric IDs (Order #ABC-1234) without <bdi>, which causes the hyphen and numbers to invert.
  • Unmirrored Margin/Padding: Using static padding-left: 24px instead of adjusting spacing to the right margin in RTL templates.

Verification

1. Inspect BiDi Punctuation Placement: Render an Arabic/Hebrew sentence ending with a period (.) or exclamation mark (!) in browser DevTools and verify that the punctuation mark sits correctly at the far left edge of the line.

2. Test across Apple Mail, Gmail, and Outlook: Verify that:

  • Headings, paragraphs, and list bullets anchor to the right margin.
  • Multi-column tables display in the correct mirrored order.
  • Action arrows point in the appropriate direction (←).

Related topics

Sources & further reading