An EPUB file is essentially a ZIP container holding HTML, CSS, and image files. Nothing mysterious about it. But building a proper Arabic ebook requires attention to details that most Latin-script workflows ignore. This guide covers everything you need.

The Basics: Direction and Encoding

Before anything else, every internal HTML file needs these attributes:

<html dir="rtl" lang="ar">

dir="rtl" tells the reader that text flows right-to-left. lang="ar" tells it the language is Arabic — which affects font selection, line-breaking rules, and shaping behavior.

File encoding must always be UTF-8. Any other encoding will corrupt diacritics or garble characters.

In your package.opf file, add:

<spine page-progression-direction="rtl">

This makes pages advance from right to left — meaning the first page appears on the right side when the book is opened.

Important: Don’t Use CSS to Set Direction

The EPUB3 spec is clear on this: don’t rely on direction: rtl in CSS to set text direction. Use HTML attributes (dir and lang) instead. The CSS direction property is meant for visual formatting, but the dir attribute is what the reader’s BiDi engine actually understands.

CSS: Use Logical Properties

Instead of:

margin-left: 1em;
text-align: left;

Write:

margin-inline-start: 1em;
text-align: start;

Logical properties adapt automatically to text direction. start means right in Arabic and left in English. One stylesheet works in both directions.

Two things to disable in Arabic text:

body {
    letter-spacing: 0;
    word-spacing: normal;
}

Letter spacing breaks Arabic letter joining and makes words look fragmented. Avoid it entirely.

Fonts: Embed Them, Don’t Leave It to the Device

If you don’t embed an Arabic font, each device picks its own default — and it may not support diacritics or positional letter forms. The solution:

@font-face {
    font-family: "KitabFont";
    src: url("fonts/NotoNaskhArabic-Regular.ttf");
}

body {
    font-family: "KitabFont", serif;
}

Reliable Arabic fonts: - Noto Naskh Arabic — by Google, free, full diacritics support - Amiri — inspired by the Bulaq Amiri typeface, beautiful for literary books - Scheherazade — by SIL, excellent for religious and classical texts

Make sure the font includes the necessary OpenType features — init, medi, and fina (positional forms), plus rlig and liga (required and optional ligatures). Most modern fonts include them, but verify.

Line Height: Give It Room to Breathe

Arabic diacritics sit above and below letters. If line height is too tight, diacritics get clipped or overlap with the line above. The rule:

body {
    line-height: 1.8;
}

A value of 1.8 to 2.0 works well for fully diacriticized text. Undiacriticized text can go as low as 1.6.

ZWJ and ZWNJ: Precision Tools

Two invisible characters that matter:

ZWNJ (U+200C): Prevents joining between two letters. Useful when you want to break a lam-alef ligature for typographic reasons, or in other Arabic-script languages (Persian, Urdu).

ZWJ (U+200D): Forces joining. Useful when a word is split across HTML elements (for example, to color a letter) and you want to preserve letter connections:

<p dir="rtl">عرب&#x200D;<span style="color:red">&#x200D;ي</span></p>

Without ZWJ, the browser may render “عرب” and “ي” as disconnected.

Use them sparingly — every ZWJ or ZWNJ you add is an invisible character that can interfere with in-book search.

Punctuation

Use Arabic punctuation marks:

Latin Arabic
? ؟
; ؛
, ،
% ٪

This isn’t an aesthetic preference — Latin punctuation marks are classified as “neutral” characters in the BiDi algorithm and may render in the wrong position in an RTL context.

Checklist

  1. <html dir="rtl" lang="ar"> in every HTML file
  2. page-progression-direction="rtl" in <spine>
  3. UTF-8 encoding
  4. Embedded Arabic font (@font-face)
  5. Logical CSS properties (start/end instead of left/right)
  6. letter-spacing: 0 and word-spacing: normal
  7. Sufficient line-height (1.8+)
  8. Arabic punctuation marks
  9. EPUBCheck validation to verify file integrity
  10. Testing on a real device (or more than one)

Useful Tools