search

phetsims / joist

Joist is the main framework for PhET Interactive Simulations. Joist creates and displays the simulation content, home screen, navigation bar, About dialog, enables switching between tabs, and other framework-related features.
http://scenerystack.org/
MIT License
9 stars 6 forks source link

Language choice can greatly change preference dialog size #843

Closed KatieWoe closed 2 years ago

KatieWoe commented 2 years ago

Test device Dell Operating System Win 11 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/830 One of the languages (Chinese Taiwan) changes the preference dialog box size quite a bit. It doesn't go out of bounds, so I'm not too worried, but it is different behavior. I think it's due to the translation of the first page of the dialog.

Visuals Oddly sized dialog box: longsize longfirst Standard sized dialog box: normalsize normalfirst

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Gravity and Orbits‬ URL: https://phet-dev.colorado.edu/html/gravity-and-orbits/1.6.0-dev.3/phet/gravity-and-orbits_all_phet.html Version: 1.6.0-dev.3 2022-08-23 23:55:17 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Language: en-US Window: 1536x714 Pixel Ratio: 1.25/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}
jessegreenberg commented 2 years ago

Thanks @KatieWoe. I am not sure what is expected here. The Dialog fits the size of its contents. The contents are allowed to expand to support longer strings. Without dynamic locales this wouldn't be a problem. @arouinfar @kathy-phet should this behavior change?

kathy-phet commented 2 years ago

@jessegreenberg - I'm not sure why it doesn't just wrap in chinese, since it is a paragraph?

jessegreenberg commented 2 years ago

The paragraph uses RichText lineWrap. Something about that translated string isn't triggering line breaks. The separator for line breaks is a space ' ', maybe the translated string doesn't use that space character? I am not sure if there is another character to look for in RichText or if it is customary for the entire paragraph to be on line in the chinese translation.

EDIT: I found the translated string, and this shows that it does not use the space character so RichText things it is one long word: image

jessegreenberg commented 2 years ago

Assigning to @jonathanolson in case he has any thoughts about what should happen with RichText lineWrap in this case, and @arouinfar and @kathy-phet to prioritize and comment on design.

arouinfar commented 2 years ago

In general, I am fine with the Preferences dialog changing in width in response to locale, so long as it remains within the dev bounds. Since the width is properly constrained here, we can probably leave it at that.

However, in this specific case, we could probably add spaces after the period character 。 without changing the meaning of the translation (source).

I am fine with either approach.

samreid commented 2 years ago

@arouinfar is this blocking Gravity and Orbits RC? @jonathanolson would this be easy to correct?

zepumph commented 2 years ago

@arouinfar said this doesn't block publication.

jonathanolson commented 2 years ago

I should have a fix for this relatively soon!

jonathanolson commented 2 years ago

Main commits in https://github.com/phetsims/chipper/commit/4711345360c3cefe9e0fa1cc0f882550b646b45e, https://github.com/phetsims/sherpa/commit/e2b5b26580323e71fe1561dbe8a73370b31cbb73, https://github.com/phetsims/scenery/commit/f7a32b07eab4e9ead0334a4dde395d2feaf4fae3, https://github.com/phetsims/joist/commit/ee0da58445432c8380bdd406cc1d3f7fd1d482c6

I added isLeftToRightProperty and some changes to GeneralPreferencesPanel to fix some i18n issues. I noticed that load-unbuilt-strings was NOT adding in directional marks into strings, and that was causing bugginess (I fixed that). RichText lineWrap will now wrap properly at unicode-decided points. This seems to work nicely for all locales that we have:

image image

and also does the RTL properly:

image
jonathanolson commented 2 years ago

@jessegreenberg would you be able to review?

zepumph commented 2 years ago

@pixelzoom, @jbphet and I were all hit by the API changes from this. Committed above.

jessegreenberg commented 2 years ago

I reviewed the commits referenced in https://github.com/phetsims/joist/issues/843#issuecomment-1232304619, changes make sense to me.

The Preferences dialog is working really well, no longer resizes for different translations. RichText lineWrap is working great for all locales I have seen and the formatting for rtl languages works nicely. Very cool @jonathanolson, thanks! Closing.