Skip to content

feat: RTL (Arabic/Hebrew) text rendering and layout#745

Open
fjobeir wants to merge 3 commits intovercel:mainfrom
fjobeir:main
Open

feat: RTL (Arabic/Hebrew) text rendering and layout#745
fjobeir wants to merge 3 commits intovercel:mainfrom
fjobeir:main

Conversation

@fjobeir
Copy link
Copy Markdown

@fjobeir fjobeir commented Apr 3, 2026

Summary

  • Add RTL text detection for Arabic/Hebrew Unicode ranges
  • Default RTL text to right-aligned while respecting explicit CSS overrides (text-align: left, center, justify)
  • Enable text alignment for single-line RTL text (previously gated behind lineWidths.length > 1)
  • Force full-line accumulation for RTL so the Bidi engine handles word-level reordering
  • Compute precise RTL alignment using measured text width after Arabic shaping
  • Update test snapshot for corrected Arabic text rendering

Motivation

RTL text (Arabic/Hebrew) in Satori-based OG image generation was broken in two ways:

  1. OpenType shaping crash — Some Arabic fonts (e.g. IBM Plex Sans Arabic) use GSUB lookup type 5 substFormat 3, which the OpenType engine didn't support. Fixed upstream in Fix OpenType Context Substitution Format 3 and decomposition type handling for Arabic/emoji shaping opentypejs/opentype.js#824.
  2. Text layout — RTL text was rendered left-aligned with incorrect word ordering. This PR adds RTL detection and proper right-to-left layout with precise width measurement after shaping.

Note: This PR addresses issue 2 (layout). Issue 1 (opentype.js crash) is tracked separately in opentypejs/opentype.js#824 — once merged and published, the @shuding/opentype.js dependency version should be bumped.

Test plan

  • All 432 existing Vitest tests pass (npx vitest run)
  • Arabic snapshot test updated — text now correctly right-aligned
  • Explicit text-align: left, center, justify overrides respected for RTL text

claude and others added 3 commits March 31, 2026 23:14
- Update @shuding/opentype.js to fork with Context Substitution Format 3 fix
- Add RTL text detection for Arabic/Hebrew Unicode ranges
- Enable text alignment for single-line RTL text with right-align default
- Force full-line accumulation for RTL to let Bidi engine handle word ordering
- Compute precise RTL alignment using measured text width after shaping
- Update test snapshots for corrected Arabic text rendering

https://claude.ai/code/session_0192MAXgejpjkKBgChuyTFcd
Keep @shuding/opentype.js at 1.4.0-beta.0 (the published version).
The opentype.js Context Substitution Format 3 fix is tracked
separately in opentypejs/opentype.js#824. Restore webkit-text-stroke
snapshots to match the published dependency.

https://claude.ai/code/session_0192MAXgejpjkKBgChuyTFcd
Fix RTL (Arabic/Hebrew) text rendering and layout
@fjobeir fjobeir requested a review from shuding as a code owner April 3, 2026 11:21
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
satori-playground Ready Ready Preview, Comment, Open in v0 Apr 3, 2026 11:22am

@fjobeir fjobeir changed the title Fix RTL (Arabic/Hebrew) text rendering and layout feat: RTL (Arabic/Hebrew) text rendering and layout Apr 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants