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

Emoji zwj sequences with native fonts #71

Open
agnauck opened this issue May 9, 2020 · 4 comments
Open

Emoji zwj sequences with native fonts #71

agnauck opened this issue May 9, 2020 · 4 comments
Labels
question Further information is requested

Comments

@agnauck
Copy link

agnauck commented May 9, 2020

When using the native font option emoji zwj sequences are not displayed correctly.

Its producing html like this:

<span class="emoji-set-apple emoji-type-native" style="font-size: 19.2px;">👨&zwj;⚕️</span>

&zwj; should be '\u200D'

image

@agnauck
Copy link
Author

agnauck commented May 11, 2020

The problem is solved after I switched to:

  • include the NotoColorEmoji font
  • use the googe.json data file for native font emoji.

There seems to be no data file dedicated to emojis supported by the Microsoffts Segoe UI Emoji font

@serebrov
Copy link
Owner

serebrov commented May 11, 2020

@agnauck this does look like a font problem, as well as #72. In general, native emoji are quite hard to get working properly because they are rendered by operating system.

Browsers still lack a unified support for color fonts (see https://www.colorfonts.wtf/), so we can not include a font for emojis along with the web application, we can only hint the fonts to use via font-family and the reset depends on the browser and operating system combination.

There is more information about this in the readme, check the part starting with "The select event can be handled to insert the emoji into the text area or use it in any other way...".

Update: I added a header for the usage section in readme and extended the text a bit.

@agnauck
Copy link
Author

agnauck commented May 11, 2020

@serebrov thanks for the update.
In my case size does not matter and I can ship the font with the app, either as PWA or with a framework like Electron.

@serebrov
Copy link
Owner

@agnauck what I mean is that, regardless of the size, there is no font to ship because browsers don't support color fonts uniformly yet, see the "Web browsers" section on https://www.colorfonts.wtf/.

Probably native emojis can work in Electron, but not in PWA, unless the usage is limited to the specific browser and operating system.

At least I didn't find any way to do that when I've checked this topic last time. I started using the native emoji hoping to have a simple solution, but after testing in different operating systems and browsers and trying different font settings, I found that it "almost" works.

Usually native emoji are good, but it may depend, for example, on the specific fonts installed on the user machine. So I've switched to emoji images as a solution that works everywhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants