Definition
An RTL (right-to-left) email layout is an email designed for languages such as Arabic, Hebrew, Persian and Urdu, where text is read from the right side of the page to the left. Unlike a straightforward translation, an RTL localisation mirrors the layout: the sender name, subject line, headings, body text and CTAs flow right to left, and the visual order of elements is reversed.
Poor RTL emails translate the words but leave the layout left-to-right, producing awkward spacing, misplaced CTAs and a confusing reading experience. Correct localisation flips the document direction as well as the language.
Setting the Direction
The direction is typically set with the dir attribute on the root element and reflected in the HTML.
<body dir="rtl" lang="ar">
Setting dir="rtl" on the <body> makes the client flow unicode text and inline elements right to left. Email templates frequently need their table alignment and cell order adjusted to look natural in RTL.
What Changes in an RTL Email
| Element | LTR Layout | RTL Layout |
|---|---|---|
| Headings and body text | Left-aligned | Right-aligned |
| Logo placement | Top left | Top right |
| Primary CTA position | Right side | Left side |
| Columns in a two-column design | Content first on left | Content first on right |
| Navigation / footer links | Read left to right | Read right to left |
The same campaign can require an entirely mirrored artboard to be comfortable for an RTL reader.
How to Localise Email for RTL
- Set
dir="rtl"andlang: Declare the document direction and language explicitly. - Mirror, do not just align: RTL changes the order of elements, not only text alignment. Re-flow columns and CTAs.
- Do not literal-translate imagery: Text baked into images must be rebuilt with correct RTL grammar and spacing.
- Test in RTL locales: Many clients handle
dir="rtl"well, but test the actual layout in clients your audience uses. - Keep
directionexplicit: Client stripping can drop direction, so re-declare it on key containers.
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
An RTL email is designed for right-to-left languages such as Arabic and Hebrew. The layout mirrors a standard email, with text, headings, CTAs and element order flowing from the right side of the page to the left.
Set `dir="rtl"` on the email root (and the matching `lang` attribute) and adjust the layout so elements and alignment follow the right-to-left reading direction rather than simply right-aligning the translated text.
Most modern clients respect `dir="rtl"` reasonably well, but support is not universal and stripping can remove direction settings. Test the rendered result in the clients your RTL audience actually uses.
Translation changes the words but not the layout. If the template stays left-to-right, headings align left, CTAs sit on the wrong side and element order feels backwards to an RTL reader. The layout must be mirrored, not just the text translated.