search

serebrov / emoji-mart-vue

One component to pick them all (performance improvements) 👊🏼
https://serebrov.github.io/emoji-mart-vue/
BSD 3-Clause "New" or "Revised" License
265 stars 45 forks source link

Emoji zwj sequences with native fonts #71

Open agnauck opened 4 years ago

agnauck commented 4 years ago

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 commented 4 years ago

The problem is solved after I switched to:

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

serebrov commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

@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.