Symbola font in CSS breaks Emoji/ZWJ functionality

[IBBoard]

If I try the ZWJ example link from the README (http://unicode.org/emoji/charts/emoji-zwj-sequences.html) then I currently see grey shapes without any joining. Using the DOM Inspector in Firefox then I see that it is using Symbola, falling back to "Nimbus Roman No9 L".

If I edit the CSS to remove Symbola then I get joined colour images.

I thought that the fonts.conf file should have overridden all fonts to put Emoji One first, but apparently this is an exception (which is ironic, because they appear to be using a list of fonts specifically selected for their improved emoji support!)

I'm poking in to this now to see if I can work out more.

[IBBoard]

This could be a game of cat-and-mouse, but the following addition to fonts.config appears to fix it:

<match>
  <test name="family"><string>Times</string></test>
  <edit name="family" mode="prepend" binding="strong">
    <string>Emoji One Color</string>
  </edit>
</match>

Is that reasonable, or should there be some other arcane fonts.config changes that fix the cause rather than patching over the problem?

[edit] Aaaaand, that's not a proper solution (because "family" doesn't REALLY mean "family", it just means "arbitrary identifying string")

https://en.wikipedia.org/wiki/Regional_Indicator_Symbol#Examples has a Symbola block that uses Symbola and renders the Symbola placeholders. That "fix" works on the Unicode page because they've got "Times" just before Symbola. And there was me reading configs under /etc/fonts/ and thinking I'd found actual families to override 😕

[13rac1]

Ah, interesting. I no longer have Symbola installed on my system. Ligatures (the font feature used to make these ZJW/etc work) require all characters to be from the same font according to all the tests I've done. It's actually why I removed 1-9, #, and *: b704233 They are required to make the combo character ligatures, such as keycaps work. Problem is they override 1-9 characters everywhere, and that's not going to work.

[13rac1]

Hmm... as for adding another name match, I'd rather override the more standard Apple Color Emoji than override Times. It's an earlier match on that same page. Should cause less unintended consequences?

[13rac1]

less unintended consequences

When I add all whitespaces to the font for Linux in a few days, I am using the DejaVu family space widths. So, it will "break" Times space widths.

[IBBoard]

Yep, that seems to work.

<match>
  <test name="family"><string>Apple Color Emoji</string></test>
  <edit name="family" mode="prepend" binding="strong">
    <string>Emoji One Color</string>
  </edit>
</match>

Also, it is 1) a more apt and fitting override and b) likely to be commonly declared before Symbola because of people going "Teh Applez can have teh shineez" 😊

[13rac1]

Haha, related, this is a good example of a bug in Chrome's font rendering: http://unicode.org/emoji/charts/emoji-zwj-sequences.html It sizes the tables <td> as if all the characters were there, without the ligatures (aka in this case ZWJ.)

[13rac1]

Fixed, I gave you commit author ;) Thanks!

[13rac1]

An update to this: https://github.com/eosrei/emojione-color-font/blob/d0d2eb895cbff09415e9a875e127035ba257ea54/linux/fontconfig/user-bitstream-vera-fonts.conf#L129

I expanded the aliasing to cover the three other emoji fonts and "invented" 💡 an emoji generic family. Should provide all of the coverage needed.