🌍 Add RTL Text Support for Canvas and SDF Font Renderers (Arabic, Hebrew, etc.)

[wouterlucas]

🌟 Feature Request: RTL Text Support in Font Engines

🚀 Goal

Support for Right-to-Left (RTL) text rendering is essential to accommodate languages like Arabic, Hebrew, and others 🌍. Currently, RTL rendering is not natively supported in the following font engines:

• 🖌️ Canvas Text Renderer
• ✍️ SDF Font Renderer

This feature will enable proper text alignment, glyph shaping, and directionality for RTL languages.

🔧 Suggested Implementation

• Add RTL text layout logic to both renderers.
• Integrate glyph shaping for languages with complex scripts (e.g., Arabic ligatures).
• Provide an API for switching between LTR and RTL modes on CoreTextNode.

🛠️ Resources

• Lightning 2 original PR for RTL support feature: TextTexture handle right to left text direction rdkcentral/Lightning#526

[elsassph]

It is important to note that the Lightning 2 PR is NOT a good reference:

• It has poor Chrome compatibility (77+)
• It doesn't support bidirectional text wrapping (mixed English and Arabic)

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction#browser_compatibility

[wouterlucas]

That's good to know, we'll have to come up with a SDF one anyway, might see if we can port some of that processing over to the way canvas text is constructed (if possible).

Thanks for sharing!

[amalmohann-dgnl]

@wouterlucas Anything we can do to improve the legacy support? some of our devices has chrome version lower than 77.
@elsassph How did you guys managed or are you still blocked?

[philippe-wm]

@amalmohann-dgnl we are currently working on L2 RTL. This is a challenge but we're making good progress. I don't have an ETA as to when we'd be able to share it.

[amalmohann-dgnl]

@philippe-wm that's great! Expecting it won't be too long.

[amalmohann-dgnl]

@philippe-wm Hi, Do you have any solution for the RTL Text at least? We where able to complete the RTL feature using the canvas flipping and managing some of the components. The only issue we face now is that, the text not rendering in the older devices. Is there anything that we can implement to get the RTL text render? 🥲

[philippe-wm]

@amalmohann-dgnl contact me on LightningJS Discord server.