Increase the size of the switch's infinity symbol

[phet-steele]

@samreid, I spoke with @arouinfar and we think it would be nice if the infinity symbol for the open switch value text was larger. There are two problems with the current implementation:

• The symbol is small and hard to see when the play area is zoomed out
• The difference in the text size between open/closed (closed displaying "0.0 Ω") causes a horizontal jump in the text (the vertical jump is understandable and fine as is).

Increasing the size of the symbol would easily fix the first point. It would be nice, for the sake of the second point, if the size is made large enough such that the entire text has the same width as "0.0 Ω". Keeping the text for closed and open the same width would keep the text horizontally aligned when switching states, no?

For phetsims/QA#33.

[samreid]

@jonathanolson said RichText can change fonts within a single string.

It may fix the second problem (widths) to use "0 Ω" instead of "0.0 Ω".

I also asked @jonathanolson for his recommendations on this issue.

[samreid]

@jonathanolson said:

Font size of the infinity symbol on different platforms sounds problematic. Use a Path for it so it is consistent?

[samreid]

The current setup has the following advantages:

1. It is internationalizable using the following string:

  "resistanceOhmsSymbol": {
    "value": "{{resistance}} Ω"
  },

2. PhET-iO clients will be able to read this as a text value.
3. The implementation is straightforward

Regarding the original reports:

The symbol is small and hard to see when the play area is zoomed out

Most (all?) of the readouts are small and hard to see when the play area is zoomed out. Why not increase the size for all of them?

The difference in the text size between open/closed (closed displaying "0.0 Ω") causes a horizontal jump in the text (the vertical jump is understandable and fine as is).

What about using "0 Ω" instead of "0.0 Ω" for this case? Or would that be too inconsistent with other types of components?

[arouinfar]

@samreid "0 Ω" instead of "0.0 Ω" sounds good to me.

[arouinfar]

Most (all?) of the readouts are small and hard to see when the play area is zoomed out. Why not increase the size for all of them?

I think the infinity symbol looks disproportionately small, and increasing the size of other readouts would look too large at the regular zoom level.

[samreid]

In the above commit, the switch should show 0 Ω.

[samreid]

I tried changing the font for the entire readout, including the ohms symbol (just for switches). Here is regular zoom:

and here is zoomed out:

@arouinfar do you think something like that might work?

[samreid]

In the preceding change (not committed or pushed), the font is increased only for switches, and remains the same size for other components.

[samreid]

I decided to commit the change for increased Switch value font size, we can roll it back if we desire.

[samreid]

On second thought, this does look kind of odd:

Maybe I should try RichText (it could still be i18nizable)...

[samreid]

This is RichText with Century Gothic and a font size bump for the infinity symbol for the switch and Arial for the other one:

[samreid]

'Century Gothic' renders as century gothic, but 'Century Gothic, Arial' renders as arial. @jonathanolson can you help?

[samreid]

Proposed fix is http://www.colorado.edu/physics/phet/dev/html/circuit-construction-kit-dc/1.0.0-dev.147/circuit-construction-kit-dc_en.html @arouinfar can you please test?

[arouinfar]

👍

[arouinfar]

While the switch looks ok, I realized while verifying #134 that this was effecting all components (thought it was just the switch).

I think the thinner numbers are actually a bit harder to read...

[arouinfar]

I think these numbers are Century Gothic @samreid. Maybe your browser was showing the fallback?

[samreid]

Yep, it looks like @arouinfar is showing Century Gothic and my machine was showing some fallback.

[samreid]

I went back to Arial, then selected bold serif for the infinity symbol: http://www.colorado.edu/physics/phet/dev/html/circuit-construction-kit-dc/1.0.0-dev.149/circuit-construction-kit-dc_en.html

@arouinfar and @phet-steele can you please test it out?

[arouinfar]

Much better @samreid! @phet-steele can you also take a look?

[phet-steele]

I like where this is at! Thanks for the suggestions and work, @arouinfar @samreid.