Text Spacing Off on Chromebook

[elisemorgan]

Test device: Chromebook, Chadwick

Operating System: Chrome 47.0.2526.80 (64-bit)

Browser: Chrome

Problem description: The spacing of the text in a little funky. Some letters are too far apart, while others are overlapping.

Steps to reproduce: Open sim on Chromebook.

Severity:

Screenshots:

Troubleshooting information (do not edit): Name: ‪Bending Light‬ URL: http://www.colorado.edu/physics/phet/dev/html/bending-light/1.0.0-rc.1/bending-light_en.html Version: 1.0.0-rc.1 2015-12-18 17:54:28 UTC Features missing: touch User Agent: Mozilla/5.0 (X11; CrOS x86_64 7520.62.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 Language: en-US Window: 1366x657 Pixel Ratio: 1/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: 32 uniform: 4096 Texture: size: 8192 imageUnits: 32 (vertex: 32, combined: 96) Max viewport: 8192x8192 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"d4909677","branch":"HEAD"},"axon":{"sha":"60075be9","branch":"HEAD"},"babel":{"sha":"dd59a2a4","branch":"master"},"bending-light":{"sha":"79a6385f","branch":"HEAD"},"brand":{"sha":"c9282935","branch":"HEAD"},"chipper":{"sha":"d18a2538","branch":"HEAD"},"dot":{"sha":"24f07fa0","branch":"HEAD"},"joist":{"sha":"f73eef15","branch":"HEAD"},"kite":{"sha":"a4907ccc","branch":"HEAD"},"phet-core":{"sha":"73a034c6","branch":"HEAD"},"phetcommon":{"sha":"d712ace0","branch":"HEAD"},"scenery":{"sha":"98ea2eeb","branch":"HEAD"},"scenery-phet":{"sha":"a62aafce","branch":"HEAD"},"sherpa":{"sha":"be8c4fc9","branch":"HEAD"},"sun":{"sha":"1b39dfc5","branch":"HEAD"},"tandem":{"sha":"87f3d2ab","branch":"HEAD"}}

[samreid]

Marking for discussion in https://github.com/phetsims/scenery/issues/193

[samreid]

I added these notes to the kerning issue in scenery above. Would be good for @jonathanolson to take a look at his convenience, but this may be something we need to rely on Google Chrome to solve.

[samreid]

Also related to https://github.com/phetsims/scenery/issues/382

@jonathanolson took a look at it and wondered if we could experiment with different sizes on the chromebook, and see how the problem changes with size.

We noted there is no such problem on Chrome on OS X.

When we had this problem on Chrome, we had to wait for Google to fix it (in the https://github.com/phetsims/scenery/issues/193 )

Toggling some of the SVG text rendering options may help.

@jonathanolson has a Chromebook on his vacation and can look into it if desired.

I suggested that we publish Bending Light before fixing this, and look into this as a supplemental issue afterwards (could do a maintenance release), and @jonathanolson agreed. If we find a workaround that improves rendering on Chromebook, it would warrant broad multi-platform re-testing (unlike the single-platform spot tests we currently require based on the other fixes).

We decided to check with @ariel-phet to see what he thinks.

[samreid]

@elisemorgan does this issue appear in other simulations? Also, what happens to the letters when the browser window is gradually resized?

[ariel-phet]

@samreid @jonathanolson - I agree that a fix could be published as a maintenance release and should not block publication. Though aesthetically displeasing, I feel like this issue only has a minor impact on usability

[elisemorgan]

@samreid Looking at other sims, there are some minor spacing issues but none of the letters overlap. I looked at Hooke's Law, Beer's Law Lab, and Ph-scale. When the browser is gradually resized, the letters seem to shift a little bit, but primarily nothing changes.

[elisemorgan]

@samreid @jbphet This issue is present in Neuron

[samreid]

Marking for discussion in developer meeting.

[samreid]

This is being tracked in https://github.com/phetsims/scenery/issues/382, I'll close this one.