Long Title strings off center in home screen

[KatieWoe]

Found during phetsims/qa#514. pH issue made in phetsims/ph-scale#184.
This issue seems to be independent of platform. When strings are long, the title text on the home screen seems to be further to the left than center. Unsure if this ended up in any published sims.

Assigning @samreid due to recent Joist work. Please reassign as appropriate.

[pixelzoom]

@arouinfar @kathy-phet does this block publication of pH Scale?

[samreid]

I removed a line that looked like a prior way of addressing maxWidth. The title already specifies maxWidth as a constructor option, so the line I deleted was extraneous, and since it appeared after centering, it was causing incorrect layout. @ariel-phet can you please recommend a reviewer for this minor change?

[ariel-phet]

@pixelzoom this issue does not block publication of pH scale. Could you quickly review @samreid's change.

[pixelzoom]

I verified the fix.

Even though it's not blocking, I'm going to cherry-pick 87ae3a4 for ph-scale so that we can resolve phetsims/ph-scale#184.

[pixelzoom]

Cherry-picked to ph-scale and ph-scale-basics 1.4 branches.

This also affects MAL RC. Assigning to @ariel-phet and @jessegreenberg to decide whether to cherry-pick there.

[ariel-phet]

@jessegreenberg up to you if you want to cherry-pick. This is a minor aesthetic issue in my opinion, but if it is only a couple of minutes to do it might be worth it.

Whether you cherry pick or not, please note here and then close the issue.

[jonathanolson]

Adjusted the font family in PhetFont, and I added a ?fontFamily= query parameter to test out different fonts. Helvetica Neue used to be a default for macOS and has a good appearance for Safari (stretches to the full amount). I added the typical backup fonts for it, including Arial in the chain.

@kathy-phet and @KatieWoe, can you see if this works, see if it looks good, and possibly try out alternative fonts with the query parameter?

[KatieWoe]

Things looked ok on my end.

[chrisklus]

I think this issue may be causing some layout issues in NumberPlay, and I suspect many other sims are affected as well. It seems like there's a lot riding on the specific family of PhetFont, so likely shouldn't be changed without lots of pixel testing.

Please compare screen 3 and the bottom right panel of screen 5 of these dev versions:
Pre-font family change: https://phet-dev.colorado.edu/html/number-play/1.1.0-dev.3/phet/number-play_en_phet.html
Post-font family change: https://phet-dev.colorado.edu/html/number-play/1.1.0-dev.4/phet/number-play_en_phet.html

Adding blocks-publication label.

[kathy-phet]

Can you post screenshots @chrisklus ? I don't see any changes in screen 3, or bottom right panel of screen 5

[chrisklus]

It's easiest to compare if you click on each of these to open in their own tab. Most notably, the new font doesn't vertically center symbols like <, = , and >. It looks like number characters are slightly lower too, causing misalignment with the arrow buttons in the second screenshot.

before:

after:

before:

after:

[kathy-phet]

On a PC, just reporting that I don't see the font offset you are seeing on the mac.
Old:

New:

[jonathanolson]

This is happening on my system, with the "Helvetica Neue" font on macOS. It does NOT happen with Arial. Perhaps we should choose another common font?

[KatieWoe]

I'm seeing this in phetsims/qa#838 (Win 11 Chrome). It also seems that this can throw off icons such as those in the nav bar. @samreid let me know if you want this as a separate issue for the GaO rc.
RC:

Published:

[samreid]

Yes, a sim-specific issue would be great so we can track cherry-picking & maintenance, thanks!

[samreid]

Probably not related to phetsims/gravity-and-orbits#448

[samreid]

@marlitas and I reviewed this today in the context of the Gravity and Orbits RC.1 for phetsims/qa#838. It seems the title font is corrected by the new font, and the problem @chrisklus pointed out mainly affects mathematical symbols which do not appear in Gravity and Orbits. We reproduced the problem in number play and confirmed those math symbols do have incorrect looking bounds:

[samreid]

In discussion with @marlitas and @arouinfar, we think this font change may have also caused phetsims/scenery#1458

[jonathanolson]

Should we potentially revert the font change? Are we able to use the query parameter to figure out what might work in all of these cases?

[samreid]

Should those math symbols be translatable? Maybe sims should be using MathSymbolFont for that? Or even MathSymbols?

[zepumph]

@chrisklus can you comment on the blocking status of this issue?

[zepumph]

@kathy-phet, "I would say this is high priority because it is blocking number play."

@kathy-phet: "Is it just the math symbols that are off center?"

We are not sure. We will reach out to @chrisklus.

[chrisklus]

Sorry - it is math symbols most noticeably, but numbers and regular text are sitting a little low, too. Compare the two Compare screen screenshots from #645 (comment) and you'll see the math symbols are most noticeably off, but the numbers in the total accordion boxes are a bit low and no longer vertically centered with the buttons. Also notice the comparison statement and sim title are a little bit lower.

For this screen of Number Play, I think just the math symbols and total numbers are blocking, but given that general text is low too, I have to think there are plenty of pixel-perfect text alignments in many other sims that are now a little off in a noticeable way.

Should we close this issue and open a side issue for the alignment problems?

[zepumph]

Should we close this issue and open a side issue for the alignment problems?

That would be very helpful! Can you please mark as high priority and assign to KP and JO?

[chrisklus]

Thanks! Sure thing, I opened phetsims/scenery-phet#785. Closing!