jeffeb3 / sandify

web based user interface to create patterns that could be useful for robots that draw in sand with ball bearings.
MIT License
187 stars 34 forks source link

Add Noto Emoji font #292

Closed bhamiltoncx closed 2 months ago

bhamiltoncx commented 2 months ago

My 10-year-old kiddo has been begging me to add some emoji-based designs to our new Sisyphus Xyla.

This PR imports the Noto Emoji font and adds it to the Fancy Text font drop-down.

Example result:

Screenshot 2024-06-08 at 1 09 06 PM
bobnik commented 2 months ago

Ha! This looks great and will be a welcome addition.

bobnik commented 2 months ago

This will be more friendly to use via phone. Probably just me, but I had to look up how to add an emoji via keyboard on a Mac (Control + Command + space). I guess it can be done via browser menu, too.

bhamiltoncx commented 2 months ago

Thanks for the speedy review and merge!

This will be more friendly to use via phone. Probably just me, but I had to look up how to add an emoji via keyboard on a Mac (Control + Command + space). I guess it can be done via browser menu, too.

Yeah, I usually enable the Input menu in the menu bar in Settings:

Screenshot 2024-06-08 at 1 45 20 PM

That lets me show the emoji picker directly using the mouse:

Screenshot 2024-06-08 at 1 44 50 PM
bhamiltoncx commented 2 months ago

By the way, I fruitlessly spent probably 4-5 hours trying to get the Noto Color Emoji font to work. Learned a ton about OpenType but it was a waste of time in the end. :)

In case you or anyone else goes down the same wrong path as me, note that opentype.js only recently started supporting the OpenType COLR table used by color emoji fonts.. but it still currently only supports the older COLR version 0 standard and not the COLR version 1 standard used by Noto Color Emoji. :/

Thankfully, Noto Emoji is a regular old font and doesn't need any special logic in opentype.js.