Arabic Text

Put dir="rtl" and lang on the element that holds right-to-left text.

Words or letters wrapped in display: inline-block (needed for translate, scale, rotate) are neutral to the bidi algorithm. Without a base direction the line defaults to LTR, so the words are placed left to right and the sentence reads backwards, even though every word looks correct. This is the usual failure of word-by-word captions and karaoke highlights.

When the language comes from props, decide the direction from the words. Count words rather than reading the first letter, because Arabic captions often start with a Latin brand name:

Animate words, not letters

Arabic letters change shape depending on their neighbours. text.split(''), [...text] or Array.from(text) put each letter in its own box, and a letter in an inline-block is shaped alone, so the word falls apart into isolated letters.

Prefer word-level or line-level animation for Arabic. Split on spaces, give the container dir="rtl", animate each word.

Per-letter animation, if it is needed

Split into units that the browser can still join:

• keep harakat (vowel marks) in the same unit as their letter
• keep lam + alef (لا, لأ, لإ, لآ) as one unit, it is a ligature
• keep runs of digits and Latin as one unit, or an RTL line reverses them
• add a zero-width joiner (\u200D) on each side of a unit that connects to its neighbour, so each unit is drawn in its connected form

Render the units in a container with dir="rtl", one inline-block span per unit, and animate the spans as usual. In Remotion’s Chrome renders the letters join exactly as in the unsplit word.

Fonts

Load an Arabic font explicitly, for example @remotion/google-fonts/NotoSansArabic, IBMPlexSansArabic, Cairo or Tajawal. See google-fonts.md. A Latin-only font falls back to whatever Arabic font the render machine has.

Avoid letterSpacing and textTransform on Arabic text.

The ZWJ technique needs care outside Chrome: Safari draws a ZWJ-padded letter in a fallback font when the font has no U+200D glyph, so the same composition shown in the <Player> on an iPhone can mix two typefaces inside a word. Alexandria (as served by Google Fonts), IBM Plex Sans Arabic, Cairo and Tajawal have no U+200D glyph; Noto Sans Arabic and Noto Naskh Arabic do. Video renders are not affected.