RTL Support

Arabic, Hebrew, Farsi (Persian), and Urdu read right-to-left. The visual reading order, text alignment, and even some imagery should be mirrored. HTML email supports RTL well, but every piece needs explicit direction information — clients don’t infer it from the language alone.

Where to set direction

Set dir="rtl" and direction:rtl at every level you care about — the wrapper <div>, the outer <table>, every content <td>, every <p>. Setting it once at the top isn’t enough; Outlook and Gmail’s mobile clients don’t propagate it.

On the body wrapper

<div style="display:block !important; min-width:100% !important; width:100% !important;
            background:#ffffff; direction: rtl !important;">

On the main table

<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0"
       bgcolor="#ffffff" dir="rtl"
       style="border-spacing:0; border-collapse:collapse; direction: rtl;">

On content cells

<td bgcolor="#ffffff" valign="top" dir="rtl">

On paragraphs

<p style="color:#14110F; font-family:Arial, sans-serif; font-size:16px;
          line-height:24px; margin:0; direction:rtl; text-align:right;">
  النص العربي هنا.
</p>

Mirror your alignment values

Layout choices that anchor to “left” in LTR should flip to “right” in RTL. This is usually obvious but the bugs come from missing one:

LTR	RTL
align="left" (logo cell)	align="right"
align="right" (CTA, nav)	align="left"
Image with text wrapping right	Image with text wrapping left
Footer copyright on left	Footer copyright on right
padding-left: 20px	padding-right: 20px

The three-cell header/footer pattern from Header and Footer doesn’t need swapping — the align="left"/align="center"/align="right" cells reverse automatically because the parent has dir="rtl". But hard-coded padding or width values inside cells don’t.

Mirroring images

For images that are direction-aware (arrows pointing left/right, icons with a clear handedness), use a mirrored version for RTL builds:

<!-- LTR: forward arrow -->
<img src="https://placehold.co/16x16/E0E0E0/E0E0E0" alt="Next" ...>

<!-- RTL: same shape, mirrored -->
<img src="https://placehold.co/16x16/E0E0E0/E0E0E0" alt="Next" ...>

For purely decorative or symmetric images, no flip is needed.

Numbers, currency, and dates

Numbers in Arabic/Hebrew read left-to-right even inside RTL paragraphs. You don’t need to do anything special — the Unicode bidi algorithm handles it. But test mixed strings carefully:

السعر 1,250 ريال

The “1,250” reads LTR inside the otherwise-RTL line. If your email has a price block, currency symbol, or date inside a paragraph, render it in your sending tool and inspect — sometimes a comma or colon gets misplaced.

RTL font stacks

Default OS fonts work fine for most Arabic and Hebrew email. A safe stack:

font-family: 'Tajawal', 'Cairo', 'Geeza Pro', 'Arial Unicode MS', Arial, sans-serif;

• Tajawal, Cairo — modern web fonts; load via the head if you want them, fall back gracefully.
• Geeza Pro — Apple’s default Arabic font.
• Arial Unicode MS — Microsoft’s Arabic-supporting Arial. Used on Outlook for Windows.
• Arial, sans-serif — final fallback. Outlook ships Arabic glyphs in regular Arial.

For Hebrew:

font-family: 'Heebo', 'Assistant', 'Arial Hebrew', Arial, sans-serif;

RTL inside structures

The header three-column layout adapts automatically when the parent direction is RTL — what was align="left" (logo on left) becomes visually “logo on right.” Same for the footer.

The body content cells (align="center") stay centered in either direction.

The button pattern from Buttons works in RTL with no changes if the button text is RTL. The VML <v:roundrect> renders the same way regardless of direction.

Test the preheader in RTL

The preheader — the hidden text shown in the inbox preview — uses zero-width unicode characters and CSS. If you set the preheader in Arabic, also set dir="rtl" on its wrapper so the preview reads correctly.

Bilingual emails

For an email with both Arabic and English content (common in MENA region campaigns):

• Wrap each language block in its own dir="" cell.
• Use the appropriate alignment for each block (text-align:right for Arabic, text-align:left for English).
• The overall page direction can be either; pick the one matching the primary audience.

<!-- Arabic block -->
<td align="right" dir="rtl">
  <p style="direction:rtl; text-align:right; ...">النص العربي</p>
</td>

<!-- English block -->
<td align="left" dir="ltr">
  <p style="direction:ltr; text-align:left; ...">English text</p>
</td>

What’s next

Responsive covers the mobile collapse pattern, which also affects RTL layouts (the columns stack the same way regardless of direction).