Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS has an entirely different check mark... #180

Closed
phet-steele opened this issue Mar 8, 2017 · 17 comments
Closed

iOS has an entirely different check mark... #180

phet-steele opened this issue Mar 8, 2017 · 17 comments
Assignees

Comments

@phet-steele
Copy link
Contributor

phet-steele commented Mar 8, 2017

...with an entirely different drop shadow to boot. @arouinfar is that okay? The same thing occurs in Balancing Chemical Equations and no one seems to care, but I'm going to mention it anyway.

Expected:
screen shot 2017-03-08 at 12 07 20 pm

iOS:
img_0073

For phetsims/tasks/issues/797.

@arouinfar
Copy link

@phet-steele good observation. I find it a little odd, but not bothersome.

Perhaps there could be a separate common code issue to look into the difference in appearance, and perhaps address it? I don't think it's a high priority issue, but I still think it would be good to look into it, as time allows.

@phet-steele can you create an issue about the checkmark appearance in the appropriate common code repo?

@arouinfar arouinfar assigned phet-steele and unassigned arouinfar Mar 8, 2017
@pixelzoom
Copy link
Contributor

pixelzoom commented Mar 8, 2017

Curious...

The checkmark is a Unicode character ('\u2713', "heavy-ballot check mark") that is rendered with scenery-scenery.ShadowText, with font family 'Arial'. Here's the code in ShoppingQuestionNode:

// check mark to right of box, to indicate that the question has been correctly answered
var checkMarkNode = new ShadowText( '\u2713', {
  fill: URColors.checkMark,
  font: new URFont( 36 ),
  ...
} );

But it appear to be rendered in a different font on iOS.

@jonathanolson Any insights?

@jonathanolson
Copy link
Contributor

The checkmark is a Unicode character ('\u2713') that is rendered with scenery-scenery.ShadowText, with font family 'Arial'.

Doesn't look like the Mac version of Arial on my MBP specifies the question mark, probably falls back to the default "sans-serif" system font per platform.

If a consistent appearance is desired, font-awesome could be used?

@pixelzoom
Copy link
Contributor

@arouinfar Is the font-awesome check marker acceptable? http://fontawesome.io/icon/check/

@pixelzoom
Copy link
Contributor

In context (I can investigate whether there's a version without the box):

screenshot_171

@pixelzoom
Copy link
Contributor

Here's the font-awesome check mark without the box. I don't think it would benefit from a drop shadow. @arouinfar is this acceptable?

screenshot_175

@pixelzoom
Copy link
Contributor

Other sims that use the Unicode check mark ('\u2713'), and should also be fixed:

balancing-chemical-equations
graphing-lines

@arouinfar
Copy link

@pixelzoom I like the checkmark in #180 (comment). As for the drop shadow, I could take it or leave it.

Since this will effect more than Unit Rates, I'd like to for @ariel-phet and/or @amanda-phet to also review.

@arouinfar arouinfar assigned amanda-phet and ariel-phet and unassigned arouinfar Mar 8, 2017
@amanda-phet
Copy link

I think the other sims also have an incorrect "x", so if we made a universal change we'd want to consider how that would look we well.

The default sans-serif in iOS doesn't bother me, but using fontawesome seems like a good idea.

This is the "x" that we'd probably use:
screen shot 2017-03-08 at 3 13 29 pm

@phet-steele
Copy link
Contributor Author

I think the other sims also have an incorrect "x", so if we made a universal change we'd want to consider how that would look we well.

Believe it or not, the "x" is the same on both platforms. The "x" in question is below and looks the same on iOS vs. macOS 10.12.3, maybe something else is going on here?
screen shot 2017-03-08 at 3 21 04 pm

Regardless, @amanda-phet is correct in saying that if we change the check mark, that means we should change the "x" as well.

@pixelzoom
Copy link
Contributor

pixelzoom commented Mar 8, 2017

Indeed, those other sims use Unicode "big X" ('\u2718') for incorrect. E.g.:

screenshot_177

@pixelzoom
Copy link
Contributor

pixelzoom commented Mar 8, 2017

Fontawesome check marks are used in this dev version, if anyone wants to test drive:
http://www.colorado.edu/physics/phet/dev/html/unit-rates/1.0.0-dev.69/unit-rates_en.html

@amanda-phet
Copy link

The check looks fine to me, and as long as people are OK with the x then we can plan to use those icons in future sims (and sim releases).

@amanda-phet amanda-phet removed their assignment Mar 8, 2017
@ariel-phet
Copy link

I would say the non-font-awesome has a bit more of a "hand drawn feel" so it is really an aesthetic choice. I am fine with either, and I think the meaning is clear with either.

Deferring that decision to @arouinfar since @amanda-phet seems fine with the look

@ariel-phet ariel-phet removed their assignment Mar 8, 2017
@pixelzoom
Copy link
Contributor

@arouinfar If you're fine with the font-awesome icons (check and X), then assign back to me. I'll create issues to use those icons in balancing-chemical-equations and graphing-lines.

@arouinfar
Copy link

@ariel-phet I would agree that the original (non-iOS) check is a bit more aesthetically pleasing than the font-awesome check. However, I think the advantage of using the font-awesome icons will be that the look is consistent across platforms, which is apparently a failing of the unicode version.

@pixelzoom please proceed with the font-awesome icons.

@pixelzoom
Copy link
Contributor

Implemented for unit-rates in 1.0.0-dev.69. Issues created for other sims. Closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants