nolanlawson / emoji-picker-element

A lightweight emoji picker for the modern web
https://nolanlawson.github.io/emoji-picker-element/
Apache License 2.0
1.49k stars 85 forks source link

Support Twemoji-unsupported ZWJ emoji in Firefox #456

Open nolanlawson opened 2 months ago

nolanlawson commented 2 months ago

(Follow-up to #453.)

Firefox is no longer showing "double" emoji, but now it is permanently hiding them, even on OSes where the built-in font (Noto, Apple, Segoe) supports them. E.g. "head shaking horizontally" (πŸ™‚β€β†”οΈ), "head shaking vertically" (πŸ™‚β€β†•οΈ), and "phoenix" (πŸ¦β€πŸ”₯) are removed from the picker:

Screenshot from 2024-09-09 07-48-51

This is better than rendering double emoji, but it's sub-optimal because we could just use the OS font if it has better support:

Screenshot from 2024-09-09 07-49-21

There is a bug on Firefox from 2023 about how their in-browser Twemoji font is out of date (14.1 only, no 15.0 or 15.1).

A few options:

Current fonts:

https://github.com/nolanlawson/emoji-picker-element/blob/e25c69b95e206ff9d207e727d32ff4efb21ba32b/src/picker/constants.js#L31-L32

nolanlawson commented 2 months ago

Another issue with the current approach is that Firefox shows mixed fonts; e.g. in the first screenshot above, "shaking face" (🫨) is rendering with Noto Color since it comes from Unicode 15.0 whereas "face in clouds" (πŸ˜Άβ€πŸŒ«οΈ) renders in Twemoji since it comes from 13.1.