phetsims / curve-fitting

"Curve Fitting" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 3 forks source link

symbols with incorrect font #159

Closed pixelzoom closed 5 years ago

pixelzoom commented 5 years ago

There are some symbols that are not rendered in the correct font. In 1.0.0-dev.17:

screenshot_1420 screenshot_1421 screenshot_1422
pixelzoom commented 5 years ago

Fixing y was straightforward.

Fixing Dy is not going to be straightforward. The label and value are all one string.

@amanda-phet could you please confirm that Dy should be in Math font?

pixelzoom commented 5 years ago

In #147, 'D' was changed to '∆', so points now look like this:

screenshot_1423

@amanda-phet should '∆y' be in PhET's standard math font?

amanda-phet commented 5 years ago

Yes, they probably should use math font and should look like this: image

The delta should not look italicized, and I'm pretty sure our "math font" is times italic, right? So if you make it "math font" I'd like to take one last look at it.

amanda-phet commented 5 years ago

Isn't delta unicode? Anyway, I'm not exactly sure how it's going to be handled, but I imagine if it's a symbol that it won't be affected by the font.

pixelzoom commented 5 years ago

It going to be difficult to use different font for 'Δ' and 'y'. We typically do subscripts using RichText and HTML markup, in this case: "Δy". To do different fonts, we'll need to create custom code to handle the subscript. And because font height different across browsers, the 'y' subscript will not be in the same place as other subscripts (may be off a pixel or so).

So my recommendation is to pick one of these options:

(1) Leave with 'y' in non-math font, as it is in the current implementation. This is zero cost.

(2) Use math font for both the 'Δ' and 'y', i.e Δy. This is 30-60 minutes of code changes.

If it were my decision, I'd go with (2).

pixelzoom commented 5 years ago

I said:

... So my recommendation is to pick one of these options: ...

Scratch that. I figured out how to style the 'Δ' and 'y' separately, see screenshot below.

@amanda-phet please verify in master.

screenshot_1426
amanda-phet commented 5 years ago

Looks good to me.