Arabic and RTL support within Play Canvas


#1

Hello everyone,

I’m new to PlayCanvas and would like some assistance getting Arabic text showing properly in my project.

I did the following:

  • created a text object
  • imported an Arabic font into the project
  • added the required unicode ranges to the font to support Arabic characters
  • clicked on “process font”
  • typed in an Arabic word “عربي”
  • adjusted the camera to view the Arabic text
  • previewed my project

While Arabic letters do show up, they appear (1) disjointed and (2) from left-to-right. I have added a screenshot and some links below.

Font: https://bit.ly/2AH1AlX
Camera: https://bit.ly/2AEa3q2

Does PlayCanvas support Arabic text? Does it support rendering of right-to-left (RTL) languages like Arabic? Please advise. Thanks!

Best regards,
Belal


#2

Link to scene is https://playcanvas.com/editor/scene/630854


#3

We’re looking at supporting Arabic RTL at the moment actually. We’re in an exploratory phase at the moment, but hopefully we can get this implemented in the near future.


#4

Hi Will,

That’s great to hear! Thanks for your quick reply. :slight_smile:

Here are some links that may help your team in implementing this needed feature:

Bidirectional Algorithm:
http://unicode.org/reports/tr9/
https://www.w3.org/International/articles/inline-bidi-markup/uba-basics

Unicode ranges for Arabic/Persian characters:


http://www.fileformat.info/info/unicode/char/search.htm?q=arabic&preview=entity

As a native Arabic speaker, I can try my best to answer any questions you may have on how to choose the correct Arabic letter form depending on the letter’s state within the text (i.e. by looking at the letter/diacritic/character before and after it) and I can also assist with testing/troubleshooting. Please let me know if I can be of any guidance!

Best regards,
Belal


#5

Thanks for the help and advice @bsweileh! We’ll be in touch if we need further assistance. :slight_smile:


#6

Maybe I’m a bit too late, but it worked for me after some trials and errors!
First you need to convert the Arabic Text to RTL, there are many tools that can help with that like:

Then you have to make sure your font supports all the generated Unicode letters. I used a Unicode converter to know the codes for my letters and filled them using FontForge


After exporting the font and using the converted text instead of the original, it worked perfectly :grinning::grinning:
https://playcanvas.com/editor/scene/745078