[Bug]: Wrong font is used for some emojis

ShGKme commented 1 year ago

⚠️ This issue respects the following points: ⚠️

[X] This is a bug, not a question or a configuration/webserver/proxy issue.
[X] This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
[X] Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
[X] I agree to follow Nextcloud's Code of Conduct.

Bug description

Originally created in https://github.com/nextcloud/talk-desktop/issues/416

Currently, font-family is set as

system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Here there is a combination of normal text fonts and emoji fonts. For some emojis from different part of unicode, for example, u26**, it results in using the wrong font.

For me, it uses Arial instead of Segoe Ui Emoji.

Probably, we should separate emoji fonts and set them not for all the text but for a specific unicode range, aka

@font-face {
  font-family: "EmojiFont";
  src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji");
  unicode-range: <all emoji ranges>
}

Steps to reproduce

Open comments
Choose the "smiling face" emoji in a native emoji picker (Don't use : picker, it doesn't have this smile). Alternatively, use the emoji picker in Talk. Windows native Talk <NcEmojiPicker>
See empty face

Expected behavior

Beautiful emoji from Emoji font.

Nextcloud Server version

master

st3iny commented 1 year ago

This might be caused by using DejaVu Sans as the default font. It is known to overwrite some color emojis with ugly symbols and we use system-ui as the first font in the list.

Configuring your desktop environment to use another default font will fix the issue in this case.

Ref https://github.com/13rac1/emojione-color-font/issues/17 Ref https://github.com/NixOS/nixpkgs/issues/172412

ShGKme commented 1 year ago

This might be caused by using DejaVu Sans as the default font

For me Arial overrides the emoji.

Configuring your desktop environment

I can see this error on web, the screenshots above are from files comments, not Talk Desktop, if that is what you mean.

st3iny commented 1 year ago

Ahh, I see. So it is broken on Windows too? I thought this was a problem only on linux.

For me it was only broken on the talk desktop client.

I can see this error on web, the screenshots above are from files comments, not Talk Desktop, if that is what you mean.

I meant that it fixed the issue on my machine by just setting the default font of KDE to something other than DejaVu.

I agree that having a dedicated emoji font family rule would be nice though.

nextcloud / server