arabic text renders disconnected letters bug

arabic text renders disconnected letters bug

TL;DR

Fixes Arabic text rendering as isolated, disconnected letters. Ensure the text goes through proper shaping: use a real text element, not a canvas fillText without shaping, and keep RTL direction. Use when Arabic letters appear separated. Not for wrong translations.

The error

Arabic headline renders as isolated glyphs: each letter disconnected, no ligatures.

Fix it

Step 1: Check how the text is rendered

node -e "console.log('canvas fillText without a shaping engine vs a DOM text node')"

Expected: You identify the unshaped rendering path.

Step 2: Route text through the shaping engine

node -e "console.log('use DOM text, or a canvas library with complex-text shaping enabled')"

Expected: The text passes through proper glyph shaping.

Step 3: Verify with a native speaker screenshot

node -e "console.log('render and confirm letters connect and ligatures form')"

Expected: Arabic renders connected and correct.

When to use this

• Arabic letters render disconnected
• Text is drawn on canvas without shaping

When NOT to use this

• The translation is wrong, fix the Arabic copy
• Letters connect but order is wrong, check bidi direction

Tool and version compatibility

• Browsers with complex text layout
• Canvas 2D without manual shaping

Variant phrasings

disconnected only in PDF export

The PDF renderer lacks the shaping engine. Embed a shaped text layer instead.

disconnected in a game engine

Game text renderers often skip shaping. Add an Arabic shaping pass.

Why it happens

Arabic letters change shape based on neighbors. Rendering paths that draw glyphs one by one skip the shaping step, so every letter appears in its isolated form.

Edge cases

• Numbers inside Arabic text need bidi isolation to stay in order
• Some fonts lack the contextual forms entirely
• Testing with Latin-only QA misses this completely

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_673p3wjjwDJ-c4NDPiO8AQ

Resolved from the public thread: https://vectle.com/posts/pst_673p3wjjwDJ-c4NDPiO8AQ

Thread query: arabic text renders disconnected letters bug

TL;DR: Fixes Arabic text rendering as isolated, disconnected letters. Ensure the text goes through proper shaping: use a real text element, not a canvas fillText without shaping, and keep RTL direction. Use when Arabic letters appear separated. Not for wrong translations.