Add vector symbols

[brandonLi8]

In the design doc, it was decided a while ago to use correct vector notation with the arrow on top.

There are 2 places that need to be updated (here are the mockups):

Control Panel

Ball Values

At this point, I'm not sure what approach I should use. This is giving me flash backs to Vector Addition.

I could use FormulaNode + KaTeX, but there is no apparent way to customize fonts to use MathSymbolFont, as noted in https://github.com/phetsims/vector-addition/issues/70. And I would need to mix Text + FormulaNode (i think?), which would lead to problems described in https://github.com/phetsims/vector-addition/issues/140#issuecomment-525507396. Or I could try a workaround, like with vector-addition/ArrowOverSymbolNode, but that could incur performance issues (https://github.com/phetsims/vector-addition/issues/140).

Assigning @jonathanolson and @pixelzoom (for whoever responds first) to point me in a direction.

---

Also, are we allowed to use LaTeX style strings in the {{repo}}-strings_en.json file? If I were to use FormulaNode, I would want to combine the velocity and momentum checkbox labels (see the first mockup above) into a pattern, like

  "labelSymbolPattern": {
    "value": "{{label}} (\\vec{{symbol}})"
  },

[pixelzoom]

I recommend using ArrowOverSymbolNode from vector-addition, after migrating it to scenery-phet. Feel free to rename it, if something better occurs to you. VectorSymbolNode is probably more general and descriptive, but that name was already used elsewhere in vector-addition.

See https://github.com/phetsims/vector-addition/issues/140#issuecomment-528969189 for the history of how we arrived at ArrowOverSymbolNode in vector-addition. vector-addition originally used FormulaNode, which relies on KaTex, and was overkill for this situation.

[brandonLi8]

Now that I'm thinking about it, I also wouldn't be able to use NumberDisplay, which is what I use for the ball values:

since NumberDisplay only supports RichText or Text.

And having a string pattern described above is best for i18n (instead of adding a ArrowOverSymbolNode to the right-side of the label of the checkbox) since some RTL languages might have the parenthesis before. So none of these solutions are ideal.

I'm wondering if its possible to add a vector arrow in HTML using RichText, which would be ideal.

[brandonLi8]

I did a quick google search to adding a vector arrow in HTML and found https://webmasters.stackexchange.com/questions/39777/mathml-html-symbol-for-mathematical-vector/39792. It is possible to do this in HTML using ⃗

I tested it out locally on firefox (and confirmed that it worked on safari):

However, it doesn't render correctly on google chrome :(

[pixelzoom]

Ah, I see. The vector symbols appear in contexts where they need to be translated.

Instead of the HTML entity ⃗ you might try Unicode "\u20D7". See https://www.fileformat.info/info/unicode/char/20d7/index.htm. But I vaguely recall trying this in Vector Addition, and running into problems with lack of support on some platforms.

Otherwise I'd recommend explaining the problem to your design team, and seeing if you can come up with a design that separates the vector symbols from translated strings.

By the way... The HTML entity works nicely in GitHub comments, e.g. a⃗

[pixelzoom]

I said that "The HTML entity works nicely in GitHub comments". That's true for Safari, the browser that I used to make the comment. But here's how the above comment looks on Chrome:

You saw this same behavior with the sim. The fact that it's also a problem in GitHub comments seems to confirm that it's not a sim (or scenery) problem, but a browser problem. So I would punt on that approach.

[brandonLi8]

In https://github.com/phetsims/collision-lab/issues/104, it was decided to not use vector symbols. Closing.