Right-to-left countdown timers for Arabic, Hebrew, Persian and Urdu email

A countdown timer for an Arabic, Hebrew, Persian or Urdu email has to read right to left: days on the right, seconds on the left, labels joined the way the script joins them, and a headline whose words run from the right edge. None of that can be fixed by the email’s HTML, because the timer is a picture. The order is decided when the image is drawn.

This guide covers what goes wrong, what the EmailTimer.App renderer does about each part, and the markup to put around the image.

Why the email’s dir attribute cannot fix a timer

The W3C’s advice for a right-to-left document is to “add dir="rtl" to the html tag any time the overall document direction is right-to-left”, and to declare the language with lang as well, because a language declaration does not set direction on its own.

That attribute reorders text. It does not reach inside an image. A countdown timer is an animated GIF drawn on a server, so every digit and word in it sits where the renderer put it. dir="rtl" moves the image to the right of its line and sets the direction of its alt text. The pixels stay as they are.

If the tool that drew a timer only knew left to right, no email markup can turn it round.

What goes wrong in a timer that was not built for it

1. Days on the wrong side. An Arabic or Hebrew reader starts at the right, so the largest unit belongs there. A timer laid out left to right puts seconds where the reader begins.
2. Words in the wrong order. A sentence laid out word by word from the left reads backwards. The layout library this renderer draws with, satori, “has no bidi support” of its own, as the engine’s source records.
3. Letters that do not join. The W3C’s Arabic layout requirements say “Arabic script is a cursive writing system”, and that “moving two joined characters closer to or further from each other creates undesirable results.” Letter spacing, common on capitalised Latin labels, breaks Arabic, Persian and Urdu words into isolated letters.
4. Numbers turned round. Unicode’s bidirectional algorithm notes that right-to-left scripts “use digits that are written from left to right”. A tool that reverses a whole line also reverses the digits of “23:59” or a price.
5. Empty labels. A font with no Arabic or Hebrew glyphs draws nothing at all, and the timer ships with blank space where the words should be.

How the renderer handles right to left

Unit order. A timer layer marked right to left reverses which unit comes first, so days sit on the right. The digits inside each unit stay left to right, because Arabic and Hebrew write numbers that way too. Arabic, Hebrew, Persian and Urdu are the four right-to-left languages.

Built-in labels. Picking one of them fills in the labels: أيام ساعات دقائق ثواني in Arabic, ימים שעות דקות שניות in Hebrew, روز ساعت دقیقه ثانیه in Persian, and دن گھنٹے منٹ سیکنڈ in Urdu. In an account, the editor’s Match wording picks the plural form that agrees with the number, and Arabic uses all six plural categories, so two days reads يومان rather than أيام.

Joined letters. Labels take letter spacing only in Latin, Greek and Cyrillic. Arabic, Persian and Urdu labels are drawn with none, so the letters join. Hebrew gets none either, since it has no capitals for spacing to open up.

Fonts. The renderer ships Noto Sans Arabic and Noto Sans Hebrew, and picks a face by checking which one contains the characters, so a Latin-only digit font still gets Arabic labels rather than blank ones. There is no Nastaliq face among the bundled fonts, so Urdu labels draw in Noto Sans Arabic’s upright style.

Labels of more than one word, and text layers. A custom label such as ساعات متبقية, a headline, or any other text layer goes through the Unicode Bidirectional Algorithm (UAX #9). A right-to-left paragraph starts at the right edge of the first line and wraps from there. A Latin brand name or a number inside an Arabic sentence stays left to right inside it. Brackets are mirrored, and Arabic-Indic and Persian digits stay in reading order. A Persian zero-width non-joiner stays inside its word. With no alignment set, the text lines up with the right edge.

Personalized values. An Arabic or Hebrew recipient name is wrapped in a Unicode isolate before it is placed in the sentence. UAX #9 isolates keep embedded text from disturbing the order around it, so an Arabic name in an English greeting cannot pull punctuation to the wrong side. Stray direction control characters in a value are removed rather than drawn as empty boxes.

One known limit. A run in the opposite direction never breaks across lines. A long Latin product name inside an Arabic headline moves to the next line whole, and one wider than the whole text box overflows it.

Which digits the timer shows

The W3C’s Arabic and Persian layout requirements describe “three families of numerals” in Arabic-script writing: European digits, used in countries such as Algeria and Morocco; Arabic-Indic digits, used in countries such as Egypt, Saudi Arabia and Iraq; and Eastern Arabic-Indic digits, used in Iran and Afghanistan. In all three, “numbers are written with the lowest significant digits to the right and the highest digits to the left.”

The timer’s own numbers are drawn from a fixed set, 0 to 9 and the colon, so a countdown always shows European digits, whatever the label language. Hebrew uses those digits anyway. If your Arabic or Persian readers expect Arabic-Indic digits, the countdown cannot show them today. A headline or other text layer can: Arabic-Indic and Persian digits typed into text keep their reading order.

Making one in the free generator

The free countdown timer generator handles all four languages.

1. Pick Arabic, Hebrew, Persian or Urdu under Label language. The labels change and the units run right to left.
2. Type a headline in the same language if you want one, up to 60 characters.
3. Set the deadline, colours and style, and copy the code.

Each generator timer gets 500 opens without signing in, and 1,000 opens once you sign in and claim it. Like every timer, it loops.

Two limits. The line shown after the deadline reads “Offer ended” in English whatever language you picked; in an account template it is an ordinary text layer in any script. And a generator timer in one of these languages made before late September 2026 keeps the left-to-right unit order it was published with, because a published version never changes. Make a new one.

The HTML around the timer

Set dir and lang on the document, and again on the element that wraps the content. A webmail client shows your email inside its own page, so the inner attribute is the one that travels with your content. Can I email lists dir as supported in most clients it tracks, with documented exceptions: Gmail’s mobile webmail applies right to left to a whole email when it contains right-to-left text, Outlook for Windows has bugs with dir on links, and Orange’s webmail removes the attribute from table and td.

<html lang="ar" dir="rtl">
<body style="margin:0;">
<div lang="ar" dir="rtl" style="text-align:right;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" style="padding:0;">
        <img src="https://img.emailtimer.app/i/k7mQ2pXd.gif?w=w_8ha3fq&v=3&sig=YOUR_SIGNATURE"
             alt="ينتهي العرض يوم الجمعة الساعة 11:59 مساءً"
             width="600"
             height="200"
             border="0"
             style="display:block; width:100%; max-width:600px; height:auto; border:0;" />
      </td>
    </tr>
  </table>
  <p style="margin:16px 0 0;">ينتهي العرض يوم الجمعة الساعة 11:59 مساءً</p>
</div>
</body>
</html>

The ids and signature above are examples; yours come from the publish screen or the generator. The alt text reads “The offer ends Friday at 11:59 pm”. For a Hebrew email, use lang="he" and an alt such as המבצע מסתיים ביום שישי בשעה 23:59.

WCAG’s success criterion 3.1.1 asks that “the default human language of each web page can be programmatically determined”, because then “screen readers can load the correct pronunciation rules.” With lang="ar" in place, a screen reader reads Arabic alt text as Arabic. The W3C also notes that alt “will use the element’s direction”, so alt text shown when images are off reads right to left inside a dir="rtl" block. Write the deadline in the alt, not a count that is wrong a minute later, as accessible countdown timers explains. The rest of the markup is in countdown timers in HTML email.

Repeat the deadline as text under the image, as in the snippet: Outlook on Windows shows only a GIF’s first frame, as the email client pages explain, and text survives blocked images.

Questions and answers

Can I make a countdown timer in Arabic for an email?

Yes. Pick Arabic as the label language in the free generator or in the editor. The labels are joined Arabic words, and a generator timer runs right to left with days on the right.

Does dir=“rtl” on my email reverse the timer?

No. The timer is an image, and dir orders text, not pixels. The order has to be drawn into the image.

Does the timer show Arabic-Indic digits?

No. The countdown digits are always 0 to 9. Text layers, such as a headline, can use Arabic-Indic or Persian digits and keep them in the right order.

Is Hebrew handled the same way as Arabic?

For order, yes: days on the right, headline words from the right. Hebrew letters do not join, but its labels are still drawn without letter spacing.

What font does an Urdu timer use?

The bundled Noto Sans Arabic, which covers Urdu letters. The renderer has no Nastaliq face, and the fonts page lists what it does ship.