Some characters not rendering correctly in translated sims on Safari

[stemilymill]

Please move/reassign as needed!

Found during phetsims/qa#838.

Seen on iPad safari and chrome, and Mac safari.

When testing Gravity and Orbits locale switching in-sim, I noticed that several locales were rendering with extraneous dotted circles throughout the text. I saw the same behavior in recent dev versions of equality explorer. In Gravity and Orbits 1.6.0-rc.1 the languages that do not render correctly are Bengali, Gujarati, Hindi, Khmer, Kannada, Marathi, Oriya, Tamil, Telugu, and Thai.

I also checked published sims with translations, and found the same problem in Gravity and Orbits as well as Number Play, Ratio and Proportion, and others. However, I did not see any incorrectly rendered characters in Build a Molecule.

Visuals

Gravity and Orbits not rendering correctly in Gutaraji

How it should look

Please let me know if there is any other information needed~

https://phet-dev.colorado.edu/html/gravity-and-orbits/1.6.0-rc.1/phet/gravity-and-orbits_all_phet.html

[Nancy-Salpepi]

I also noticed that when using those locales in Gravity and Orbits 1.6.0-rc.1, there is a significant delay when switching to and from them in the preferences menu. There is also a delay with window resizing when changing iPad orientation if one of those locales is selected.

[samreid]

In discussion with @arouinfar and @marlitas, we hypothesize that this issue was introduced by the font change in phetsims/joist#645. Perhaps helvetica neue/helvetica don't have support for all the glyphs in these languages. We agreed that the sim title being off-centered is not a blocking problem, so if restoring this font corrects the problem we can do that for RC.2.

[samreid]

I observed that "Arial" has the same missing font problems on Safari Version 16.0 (17614.1.25.9.10, 17614). I noticed that https://developer.apple.com/fonts/system-fonts/ listed "Gujarati MT" as a preinstalled font, and when I tried it, it looked OK in Safari:

Arial, Lucida Grande and sans-serif all seem to be missing these glyphs.

[samreid]

Since this problem exists in Gravity and Orbits 1.5 and other published sims, it should not block publication of Gravity and Orbits 1.6. Once we have a solution, it can be cherry picked into sims as appropriate. @jonathanolson can you please advise?

What do you think about locale-specific font families? Or maybe locale + browser specific?

[jonathanolson]

Locale-specific font families sounds potentially helpful, but is much trickier for dynamically changing the locale. If those fonts are missing the glyphs, are we able to provide Gujarati MT as a fallback?

[samreid]

I tried specifying a fallback by changing

 options.family = `${options.family}, sans-serif`;

to

 options.family = `${options.family}, "Gujarati MT"`;

And it had the same incorrect behavior.

[KatieWoe]

This still occurs in phetsims/qa#841

[Nancy-Salpepi]

this issue is also in phetsims/qa#844

[zepumph]

PhET-iO team decided today that it is not currently blocking because it is in currently published sims.

The fix would likely require an MR to older sims too.

[Nancy-Salpepi]

Noting that this issue is still present in phetsims/qa#863 along with the slight delay when switching to those locales on the iPad and mac.

[zepumph]

In phetsims/friction#330 (comment) @samreid showed that having the right font hooked up fixed the problem. Is this actually just a wontfix because we can assume people will have the fonts for their languages set up before using phetsims?

[jonathanolson]

This was handled and pushed out to maintenance, closing!