RTL Email Preview

Edit and preview RTL email HTML in a sandboxed browser frame at desktop, mobile, and narrow widths. Test subject and preheader length, compare HTML with its plain-text alternate, monitor Gmail clipping size, and copy a table-based Arabic email starter.

Subject (19 characters)Preheader (40 characters)

Format

Direction

Viewport

Email HTML

2.5 KB

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>مرحباً بك</title>
</head>
<body style="margin:0;padding:0;background-color:#f3f4f6;color:#111827;">
  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">
    نص تمهيدي يظهر بعد العنوان في صندوق البريد.
  </div>
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f3f4f6">
    <tr>
      <td align="center" style="padding:24px 12px;">
        <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
          style="width:100%;max-width:600px;background-color:#ffffff;">
          <tr>
            <td dir="rtl" align="right"
              style="padding:32px;font-family:Arial,Tahoma,sans-serif;font-size:16px;line-height:1.7;color:#111827;">
              <h1 style="margin:0 0 16px;font-size:28px;line-height:1.3;color:#111827;">
                أهلاً وسهلاً بك
              </h1>
              <p style="margin:0 0 24px;">
                هذا قالب بريد عربي متجاوب يستخدم جدولاً أحادي العمود وأنماطاً مضمّنة.
                Mixed English مثل API وNext.js يبقى مقروءاً داخل النص.
              </p>
              <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                <tr>
                  <td bgcolor="#1d4ed8" style="border-radius:6px;">
                    
                    
                    <a href="https://example.com"
                      style="display:inline-block;padding:12px 24px;color:#ffffff;text-decoration:none;font-weight:bold;">
                      افتح الدليل
                    </a>
                    
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Sandboxed Browser Preview

680px wide · remote resources blocked

Estimated

Client Checks Before Sending

Outlook Desktop

Estimated

Avoid flex/grid; use tables and test VML buttons.

Gmail

Estimated

Keep load-bearing styles inline; watch the 102 KB clipping limit.

Apple / iOS Mail

Estimated

Check forced dark-mode inversion and transparent logos.

Android

Estimated

Keep type readable and tap targets at least 44 px.

How to use

Enter the subject and preheader, then edit the HTML or plain-text version.
Switch between RTL and LTR direction and desktop, mobile, or narrow viewport widths.
Use the table-based starter template as a baseline for broad email-client compatibility.
Copy the HTML and plain-text versions, then run a real seed-list or inbox-preview test before sending.

Understanding the output

The preview runs in a sandboxed iframe with remote resources blocked. It accurately shows browser layout at the selected width, but it does not emulate Gmail, Outlook, Apple Mail, or their dark-mode transformations.

Common issues & tips

•Outlook desktop uses the Microsoft Word rendering engine; flexbox, grid, floats, and some border-radius styles may fail.
•Gmail may alter head styles and clip messages larger than roughly 102 KB.
•A browser preview is estimated QA only. Use real test inboxes or a rendering service before production sends.

Frequently asked questions

Does the preview reproduce Outlook or Gmail exactly?: No. It is a sandboxed browser simulation at common widths. Outlook, Gmail, Apple Mail, and mobile clients use different rendering and dark-mode behavior, so production emails still need real inbox tests.
Why does the starter use tables and inline styles?: Table-based, single-column layouts and inline load-bearing styles remain the broadest baseline across email clients, especially Outlook desktop and clients that alter head styles.
Are remote images or scripts loaded?: No. The sandboxed preview applies a restrictive content-security policy that blocks scripts, remote images, fonts, and network requests.
Is my email HTML uploaded?: No. Editing and previewing happen entirely in your browser.

RTL Email Preview

Email HTML

Sandboxed Browser Preview

Client Checks Before Sending

Outlook Desktop

Gmail

Apple / iOS Mail

Android

How to use

Understanding the output

Common issues & tips

Frequently asked questions

Related tools

RTL Preview

Arabic Developer Kit (RTL Snippets)

Arabic Form Validation