Layout breaks on some fonts since last system update

[lsbkf]

Hi,

Today I upgraded my system (GNU/Linux, Archlinux x86_64) and since then, I noticed weird layouts on websites that use "Apple Color Emoji" and "Segoe UI Emoji". I can't find a page which uses only one of them, but from what I can guess by fiddling with the CSS, I have to remove both to restore the page to a decent state. Upgrading Palemoon to 27.4.2 x86_64 did not change anything.
This is what I have currently without touching CSS :
http://webassembly.org/getting-started/ ... ers-guide/

https://github.com/vuejs/vue/issues/1915

And then I looked for a page which would have a high probability of using those fonts, for the heck of it.
https://emojipedia.org/man-in-business-suit-levitating/

(I tried Twitter since I had problems with them regarding oversized emojis last year or something, but they replaced them with images or something ?)

This is what I get when I uncheck the fautive fonts in the CSS from the HTML inspector, and it pretty much looks the same in Firefox, Chromium, and my memory from before the system upgrade.

Actually, even after fixing the page layout, I still have problems in the title, browsing history dropdown, and bookmark tooltip :

Also, when I try to select an emoji, the highlight is not consistent depending on where I try to do it. In the web page, HTML inspector, modal windows (trying to edit a bookmark for example) it's about the same height as in the screenshots there. The URL and search bars however are fine. The search bar dropdown is fine even though the URL dropdown is not. The layout and the highlight bugs seems unrelated at first, because they don't have the same triggers, but I can't tell whether the underlying problem is the same or not.

I looked up what has been upgraded exactly, I can find harfbuzz, fontconfig, harfbuzz-icu, pango (actually I'm not really sure which ones are relevant), but nothing related to specific fonts. Not the fautive ones I discovered, nor any kind of fallback font I might have installed otherwise. If anything, the fontconfig cache has been rebuilt. The previous upgrade was 8 days ago. Since Firefox and Chromium are working fine, I guess it's a Palemoon problem. I don't know. I'm also quite reticent to rollback pacman and try one package at a time, so good luck. :3c

[Moonchild]

The problem seems to be with a fontconfig update, replacing the emoji font in use with a bitmapped font. I've tried to get some info about this from one of the distro devs on IRC who first reported it, but never got anything conclusive. Andytr is an Arch dev.

(relevant lines quoted)

[11:25] andyrtr: morning, Arch is updating fontconfig to current git master. this breaks github font rendering while it keeps working in icecate/FF and other browsers.
[11:25] andyrtr: even palemoon-bin breaks
[11:27] @MoonchildPM: andyrtr: breaks, how?
[11:27] andyrtr: font rendering is terribly broken.
[11:27] andyrtr: only few glitches
[11:29] andyrtr: I can reproduce update/downgrade with fontconfig. it adds two new font conf files: /etc/fonts/conf.d/45-generic.conf and /etc/fonts/conf.d/60-generic.conf
[11:29] @MoonchildPM: That's still rather vague. Probably best to open an issue on our Pale Moon repo on github with screenshots and as much detail as possible.
[11:30] andyrtr: removing that /etc/fonts/conf.d/60-generic.conf fixes bad rendering
[11:33] andyrtr: new cairo+fontconfig for colored emoticons
[11:59] andyrtr: palemoon github rendering works with emojione-fonts but is broken with noto-fonts-emoji
[12:10] @MoonchildPM: andyrtr: is the problem incorrect line heights?
[12:12] @MoonchildPM: I'm asking because it looks like noto-fonts-emoji is a bitmapped font that uses some strange metrics internally. Not sure why you'd want to switch from vector to bitmapped, to begin with...
[12:21] @MoonchildPM: (there's a reason we started supporting SVG-in-OpenType for color glyphs)

Unfortunately there was no further reply from andytr. It's not clear if this is simply a broken font that was a bad choice by the dev, or if there's a problem with Pale Moon, or maybe even both; or who is supposed to fix it. IMO at first glance the choice of font in fontconfig is simply poor, going from vector to bitmapped with a weird font file to boot. Even with this known issue, Arch has apparently pushed the fontconfig as-is to live which is another mistake. Unless Arch doesn't care about Pale Moon or its users, of course.

[Walter Dnes]

(relevant lines quoted)

[11:30] andyrtr: removing that /etc/fonts/conf.d/60-generic.conf fixes bad rendering

Unfortunately there was no further reply from andytr. It's not clear if this is simply a broken font that was a bad choice by the dev, or if there's a problem with Pale Moon, or maybe even both; or who is supposed to fix it. IMO at first glance the choice of font in fontconfig is simply poor, going from vector to bitmapped with a weird font file to boot. Even with this known issue, Arch has apparently pushed the fontconfig as-is to live which is another mistake. Unless Arch doesn't care about Pale Moon or its users, of course.

Have any Arcch users with the problem tried renaming /etc/fonts/conf.d/60-generic.conf or simply commenting out the entire file?

[lsbkf]

I have indeed noto-fonts-emoji installed. I tried renaming 60-generic.conf, the layout is fixed when I visit webassembly.org and github.com, but elsewhere the line height is still incorrect when an emoji is explicitly present.
I guess I'll do with it for now.

[theZiz]

I had the same problem, especially with github, but also with heise.de depending on the amount of emoji characters. For me it helped to remove fonts-noto-color-emoji and to install fonts-symbola (on Debian).
Tbh I don't really know, whether fonts-symbola works as suplement for the emojis of fonts-noto-color-emoji, so maybe just removing the package is enough. However, github works fine now.

Edit: I just noticed that in some programs, where colorful emoji were shown, the emojis are now in the color of the surrounding font. For me this is a winwin situation, I don't want colorful emojis in my mail program anyway.