textAlign wrong for Arabic

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.7.0

Web browser and version

chrome://version

Operating System

MacOSX

Steps to reproduce this

Steps:

1. Import any Arabic font through preload()
2. See how it is rendered incorrectly in p5

I personally don't read or write arabic. I just noticed this stackoverflow discussion.

This is heavily related to how opentype.js didn't know how to handle arabic. The only current solution would be, instead of using preload(), use CSS @font-face to render it so that it is drawing through the native HTML Canvas.

Start with the p5.js font-loading path used by preload() and the opentype.js Arabic handling mentioned in the report. Compare its output with the CSS @font-face and native HTML Canvas workaround, then verify that imported Arabic fonts render correctly in p5.js.