search

phetsims / number-pairs

"Number Pairs" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 0 forks source link

Investigate ability to highlight specific words in RichText #5

Closed marlitas closed 2 months ago

marlitas commented 3 months ago

Number Pairs has a design request to color code specific words in a sentence (see image below). Due to translation expectations this needs to be done with one StringProperty passed through to RichText. Unfortunately, it is my understanding that RichText currently does not support a feature like this. We would like it to work similar to other RichText css support like so: <span style="background-color: blue;">color</span>

The only downside here is that we will have to dispose and rebuild this RichText element every time a translation or number changes. Annoying, but possible and allowing rich text to support dynamic changes like that seems completely out of scope.

image

@jonathanolson do you have ideas around what kind of lift it would be to get something like this working?

jonathanolson commented 2 months ago

I'm putting the finishing touches on the discussed approach, should be able to commit soon. Demo:

image

Can be run locally with the sandbox url%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20shadow%3A%20node%20%3D%3E%20%7B%0A%20%20%20%20%20%20return%20new%20Node(%20%7B%0A%20%20%20%20%20%20%20%20children%3A%20%5B%20node%20%5D%2C%0A%20%20%20%20%20%20%20%20filters%3A%20%5B%20new%20DropShadow(%20new%20Vector2(%202%2C%201%20)%2C%202%2C%20%27red%27%20)%20%5D%0A%20%20%20%20%20%20%7D%20)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20translucent%3A%20node%20%3D%3E%20%7B%0A%20%20%20%20%20%20return%20new%20Node(%20%7B%0A%20%20%20%20%20%20%20%20children%3A%20%5B%20node%20%5D%2C%0A%20%20%20%20%20%20%20%20opacity%3A%200.5%0A%20%20%20%20%20%20%7D%20)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20blue%3A%20node%20%3D%3E%20%7B%0A%20%20%20%20%20%20return%20new%20Node(%20%7B%0A%20%20%20%20%20%20%20%20children%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20Rectangle.bounds(%20node.bounds.dilated(%201%20)%2C%20%7B%20fill%3A%20%27%2388f%27%20%7D%20)%2C%0A%20%20%20%20%20%20%20%20%20%20node%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%20)%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%20)%20)%3B)

jonathanolson commented 2 months ago

@marlitas can you try it out / review?

marlitas commented 2 months ago

Very cool! I can either tackle this later today, or once I get back on Thursday. Thanks!

marlitas commented 2 months ago

This is working really well.

I tried it out with NumberPairs and it is doing exactly what we want. I also played with it in sandbox to check on some edge cases, and it really seems to be handling everything well and as expected. The documentation is clear and the API is lovely. Thanks for the work here @jonathanolson! I think we're ready to close.

image