B/W (aka ugly) emoticons in FF/Win 7 - use "Segoe UI Emoji" instead of "emoji" font

[fichtennadel]

Wire for Web Version

2017-08-31-14-21-prod

Browser Version

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

Operating System

Win7 64bit

What steps will reproduce the problem?

1. type ":grin"
2. look
3. see ugly emoticon

What is the expected result?

see nice emoticon

Proposed solution:

in main.css, line 4359, change emoji to Segoe UI Emoji font:

font-family:emoji,BlinkMacSystemFont,-apple-system,Helvetica Neue,Arial,sans-serif; to font-family:Segoe UI Emoji,BlinkMacSystemFont,-apple-system,Helvetica Neue,Arial,sans-serif;

[maximbaz]

The emoji font is a font-face defined to include different emoji fonts available on the system:

https://github.com/wireapp/wire-webapp/blob/6b3e6f5d3ba8fa8d58614304dad5685cafe67acf/app/style/common/variables.less#L20-L46

As you can see, Segoe UI Emoji is already part of it. Do you happen to have maybe Apple Color Emoji on your system, which takes priority? Can you try to put Segoe UI Emoji as a first font in the list, and see if it solves the issue? Or temporarily removing the unicode-range definition?

The proposed solution is not very good, as it will break emojis on all other systems 🙂

[fichtennadel]

I've tried on two different Win7 systems, the ugly font takes precedence on both, in FF and in Chrome.

Apple Color Emoji is not on these systems.

I've changed the list for font-family directly in FF Inspector, how to change it during runtime in the list you show from variable.less file? I've no local installation, I'm using app.wire.com

[maximbaz]

I don't think you will able to test these changes in runtime, you or someone else with Win7 would need to test this in development environment, as described here.

[fichtennadel]

Well, I'm not that deep into web development, so that would have to be done by someone else with Win7 and more knowledge in css and font pecularities.

For the records, I currently work around this with a GreaseMonkey script (GM_addStyle(...))

[fichtennadel]

You could use https://github.com/emojione/emojione to "emojify" the fonts on systems lacking these fonts, see "Conversion HTML Class" example in https://github.com/emojione/emojione/blob/master/USAGE.md

[maximbaz]

The thing is, "Conversion HTML Class" emojifies not only the system lacking these fonts, but actually takes precedence, ignores the system emoji font entirely and uses EmojiOne instead. While I'm personally a big fan of EmojiOne v3, enforcing one particular emoji fonts has all kinds of troubles, nobody will be able to agree which emoji font to choose, and the app would feel alien to the system (just search how many users complain that Telegram enforces Apple emojis on desktop and android, instead of using the system emojis). There is also a licensing concern with regards to EmojiOne v3 (and possibly other fonts).

All in all, I like that Wire uses system emojis. All modern systems have an acceptable set of colorful emojis. If I want to switch to another emoji set, I just install it and I'm glad that Wire immediately starts using it.

What should be done here is an investigation on why the system font is not being picked up on Win7. Judging by the first screenshot, it's not that it is completely ignored by Wire (the :grinning is colorful after all), but that the black&white emoji font takes precedence. A first step would be to find out the name of this black&white emoji font.

[fichtennadel]

A first step would be to find out the name of this black&white emoji font.

Edit: I think it's "Apple Color Emoji". I've tried with http://classic.getemoji.com/ , and as soon as I remove "Apple Color Emoji" from the font-family, the emojis are in color.

Nope, that wasn't the one. At least in Firefox any of these is B/W. Interesting enough: as soon as I remove or invalidate the font-family in the css, the colors are back

[maximbaz]

@fichtennadel try to experiment here: https://jsfiddle.net/5yLhrpyz/

For example, try to swap the order of local font definitions and put Segoe UI Emoji first.

[fichtennadel]

https://jsfiddle.net/5yLhrpyz/

No changes, just opened page:

Firefox:

Chrome:

[maximbaz]

That is how it is supposed to be (well, in Firefox) 🙂 I took the code from Wire sources for the jsfiddle experiment. That is very confusing that you see colorful emojis on jsfiddle, but not on Wire.

By the way, the desktop app is based on Chrome, so to get colorful emojis in the desktop app you need to figure out why none of the emojis are in color in your Chrome.

[fichtennadel]

That is very confusing that you see colorful emojis on jsfiddle, but not on Wire.

I think jsfiddle is doing something "in between" with their css, here Arial is used:

-- Then I checked the Fonts panel in FF console for app.wire.com and it's "Segoe UI Symbol" which pulls the B/W icon

-- I've tried on http://classic.getemoji.com/ and edited the font-family in FF to get the emoji in color: "EmojiSymbols" and "Segoe UI Symbol" are the culprit there.

Conclusion for me: "Segoe UI Symbol" is messing things up,

By the way, the desktop app is based on Chrome, so to get colorful emojis in the desktop app you need to figure out why none of the emojis are in color in your Chrome.

Nope, Chrome is even worse, see (closed) issue https://github.com/wireapp/wire-desktop/issues/980

[maximbaz]

What do you see in Chrome with Segoe UI Symbol removed? https://jsfiddle.net/5yLhrpyz/1/

It is probably all right to delete this Segoe UI Symbol from fonts, as long as Segoe UI Emoji works in Chrome. Otherwise, having black&white emojis is better than having 0 emojis.

[maximbaz]

Also, did you configure your Windows 7 to get colorful emojis, or they were out of the box? I thought that emojis were introduced only since Win10.

[fichtennadel]

What do you see in Chrome with Segoe UI Symbol removed?

B/W emoticons:

Also, did you configure your Windows 7 to get colorful emojis, or they were out of the box? I thought that emojis were introduced only since Win10.

Out of the box in Firefox, seems to be one of the few places Chrome lags behind

[maximbaz]

So judging by your experiments it doesn't look like we can fix Chrome (or Wire desktop for that matter), but #1780 will fix the Firefox.

[mythsunwind]

1780 fixed Firefox 👍

It will be fixed with the next release

[GuTongWang]

Using Segoe UI Emoji in win7, emoji color is black and white, is this problem solved? What is the solution?