Skip to main content
CSS Properties

direction

CSS property · 15 supported, 0 partial, 0 unsupported across 15 clients

direction sets the base writing direction of text and is essential for right-to-left languages like Arabic and Hebrew. Email clients honor direction at the document and element level, but bidirectional text mixing can cause client-specific rendering quirks, especially around punctuation.

Client Support

ClientCategoryEngineSupport
GmailwebmailGmail WebSupported
Gmail AndroidmobileGmail MobileSupported
Gmail iOSmobileGmail MobileSupported
Outlook 365webmailOutlook WebSupported
Outlook (New)desktopOutlook WebSupported
Outlook ClassicdesktopMicrosoft WordSupported
Outlook iOSmobileOutlook MobileSupported
Outlook AndroidmobileOutlook MobileSupported
Apple MaildesktopWebKitSupported
Apple Mail iOSmobileWebKitSupported
Yahoo MailwebmailYahooSupported
Samsung MailmobileSamsungSupported
ThunderbirddesktopGeckoSupported
HEY MailwebmailWebKitSupported
SuperhumandesktopBlinkSupported

Client-by-client behaviour for direction

Fully supports direction (15): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook (New), Outlook Classic, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

When to use direction in email

  • Setting direction: rtl on <html> for Hebrew or Arabic newsletters.
  • Mirroring layout columns in localized templates where the entire visual order should reverse.
  • Embedding mixed-direction content (English brand + Arabic body) using <bdi> or direction overrides.

Rendering behaviour and edge cases

  • Outlook on Windows handles direction at the <body> level reliably, but partial overrides on individual <td> cells can produce alignment glitches.
  • Gmail respects direction but does not flip table-column order automatically — you must restructure HTML to match the reading order.
  • Mixing direction with text-align: start / end is more reliable than literal left/right keywords.

Recommended fallback strategy

Set direction on <html> or <body> rather than fighting it cell-by-cell. Use logical alignment values (start/end) and pair direction with explicit lang attributes to give clients the strongest signal for right-to-left rendering.

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free

Support data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.