[SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

claimsecond · 2024-10-26 16:40:31

Hey there,

I installed Arch with GNOME and Hyprland some time ago, but I still haven’t been able to resolve the issue of browsers not displaying emojis/symbols correctly. For example, on this link: GitHub Config, none of the entries starting with "format-icons" are rendering as expected.

In Google Chrome, nothing shows up:

In Firefox, I get .notdef characters instead:

All emoji fonts are installed, and emojis render fine system-wide—except for this issue in browsers. Any help would be greatly appreciated!

Last edited by claimsecond (2024-10-28 16:04:05)

mpan · 2024-10-26 16:58:39

Not sure where and how you are trying to use that, but those aren’t emoji. Those are PUAs. They don’t have any specific rendering.

Codepoints in those ares are meant to be used only in closed environments, where either they are not displayed or you control rendering (including supplying font with those codepoints mapped to something). Webapps running inside your browser are not under your control, if that’s what was your goal.

claimsecond · 2024-10-26 17:42:28

Thank you for the response.
I apologize for the link not being pasted in my previous message. Here it is https://github.com/knightfallxz/Hyprlan … onfig.json
I just was confused by the fact I can copy and paste this code and all the software around my system able to show these (whatever it called). And on the other hand, it could be just more convenient to see before copy/paste what do you copy/paste exactly.
But, if I understand you properly, I just don't have to care about it as there is no way for these symbols to be shown in the browser?

seth · 2024-10-26 19:36:35

PUA codepoints a font specific, every font can display there whatever it wants.
I guess the rest of your system is using some nerd font, but the browser/default monospace isn't and so whatever you're using as monospace font there cannot resolve the codepoint.
If you want them to show up in your browser, configure your default monospace font in the browser (assuming that's used to render this text) as some nerd font.

Sanity check: are those browsers flatschpaks or from the repos?

claimsecond · 2024-10-27 10:10:55

You're right. Just changed monospaced font in the browser to one applied systemwide in fonts.conf and now I have all the PUAs represented correctly.
Thank you for your help and time!

-- EDIT --
I was to quick. Sorry.
Most of the PUAs are shown correctly, but some other still not

Here is my fonts.conf piece regarding monospaced font
<alias>
<family>monospace</family>
<prefer>
<family>Noto Mono</family>
<family>Noto Color Emoji</family>
<family>Noto Emoji</family>
</prefer>
</alias>

So, if I change monospaced font in browser to Noto Mono, part of the PUAs are shown OK, but other part still not shown.
I have tried other monospaced fonts installed in the system, but result is the same: only partial fix.

Nevertheless, I still appreciate your time and effort. My situation improved dramatically.

PS - browsers installed through AUR.

Last edited by claimsecond (2024-10-27 10:40:07)

mpan · 2024-10-27 11:53:19

GitHub currently seems to fall back to “monospace” family for source code rendering. But note that other webapps may not and very likely they will first list some other typefaces you either have in system or which they supply themselves. So while it will let you see that in GitHub, it’s not an universal solution.

I’m also confused about your goal. Either I don’t understand, what you’re trying to achieve, or you are confused about what is happening. From my perspective situation is as follows. You published code (on GitHub) with codepoints having no rendering defined. And now you put a lot of effort into making you (and only you!) yourself see them in a particular way. Moreso, possibly leading to confusion, when somebody else happens to publish PUAs and your browser (but only your) will render them as something seemingly meaningful.

seth · 2024-10-27 12:58:59

The screenshots are from a waybar config, so what will ultimately matter the most is what font waybar on any given client system uses.

And it's not your default monospace font on the system, but the monospace font of the browser you'll have to configure to see that glyph.

fc-list :charset=f10c

'cause Noto Emoji doesn't provide those and resolving PUAs through a fallback mechnism doesn't make any sense itfp - as mentioned: every font can put there whatever it wants, you can never rely on the result unless your specify *exactly* the font you want to use for resolution (yes, the nerd fonts are all compatible with each other, but that's besides the point)
Finally: which are the currently "missing" codepoints?

claimsecond · 2024-10-27 14:49:19

mpan wrote:

I’m also confused about your goal. Either I don’t understand, what you’re trying to achieve.

I just tried to set up my browser to be able to see all the symbols (in this case) in a particular GitHub repository while looking around for different dotfiles to rice my waybar on hyprland. I was just wondering why my system could show these symbols while my browsers wan't.

seth wrote:

And it's not your default monospace font on the system, but the monospace font of the browser you'll have to configure to see that glyph.
fc-list :charset=f10c
'cause Noto Emoji doesn't provide those and resolving PUAs through a fallback mechnism doesn't make any sense itfp - as mentioned: every font can put there whatever it wants, you can never rely on the result unless your specify *exactly* the font you want to use for resolution (yes, the nerd fonts are all compatible with each other, but that's besides the point)
Finally: which are the currently "missing" codepoints?

I understand that I have to specify a particular font in the browser. But no matter what monospace font I choose in the browser settings, part of the symbols on the page are still not visible.

fc-list :charset=f10c

gives me output https://pastebin.com/aSeYP8JB

Here is the current view I get having NotoSansM Nerd Font Mono set as fixed-width font in my google chrome

seth · 2024-10-27 14:51:22

A screenshot of whitespace won't help.
You've to identify the missing codepoints.

f10c is only resolved by the nerdfonts and font awesome.

claimsecond · 2024-10-27 16:38:11

seth wrote:

A screenshot of whitespace won't help.
You've to identify the missing codepoints.

I unfortunately don’t know how to do that. I would appreciate any guidance from you.

seth · 2024-10-27 19:15:29

Copy the glyph and run

xsel -o -b | iconv -futf8 -tutf16 | od -x | head -1 | cut -d" " -f3

You can also try to copy and paste it into the forum, but the bbs will eat wide glyphs are replace the w/ a question mark - so this won't work for every character.

claimsecond · 2024-10-27 19:40:36

So, I copied from the browser and then had the command you provided me with every time after ctrl+c was pressed ran. I have seen next codes in terminal:
0078
e9d5
e9d6
e9d4
0022
f6a9
e932
e931
e930
e933
0020

seth · 2024-10-27 20:06:29

0078 is "x" 0020 is space and 0022 are quotes, please really only show the missing ones.

The remaining ones should all be PUA, check eg.

fc-list :charset=e9d5

I don't have that glyph in any font, you'll probably check the source about suggested fonts.

f6a9 is in font awesome, but once more: the PUA is strictly font specific. You *have* to use the specifically intended font for meaningful results (and it's not a good idea to set that a browser font)

claimsecond · 2024-10-27 20:16:16

seth wrote:

0078 is "x" 0020 is space and 0022 are quotes, please really only show the missing ones.

Pardon. Maybe I mixed up something...

The command you provided me with gives a big list of fonts and their styles in .local/share/fonts/

seth · 2024-10-27 20:18:19

If "fc-list :charset=e9d5" prints something that you've fonts covering that codepoint.
That doesn't mean they're or should be used as monospace or whatever font in your browser.

mpan · 2024-10-27 20:48:02

claimsecond wrote:

I just tried to set up my browser to be able to see all the symbols (in this case) in a particular GitHub repository while looking around for different dotfiles to rice my waybar on hyprland. I was just wondering why my system could show these symbols while my browsers wan't.

But do you realize, that:

This is not some character, that “renders wrong”? It’s your own, private, arbitrary choice of how you wish to see those codepoints. You are not fixing an error, as it would be with non-PUA character. You’re putting effort into and working towards enforcing a behavior which in this context is quite unexpected.
The subject is a piece of information published in a public service. If you succeed in your goal, it will only affect your own computer. Nobody else will see your file this way. It sounds like a newspaper that decided to print in dingbat and is concerned the editor is unable to read their own text.
Your action will affect how you see all instances of that PUA, not your own file. PUA should never appear in normal public communication. But, if they happen to do (e.g. as a part of a source file), you’ll see something else than everybody else sees. That’s a minor issue, which will usually befuddle only you: it’s the old “why there are some Chinese characters in the menu” problem. But, if you ever need to communicate with others and describe what you see, they will be confused and not understand, what you refer to by “that cat icon”.
The renderings you’ll get are with high certainity not having metrics compatible with monospace font. Which will have negative impact on how other things are rendered. Unlike with affecting only your own, private stuff on your computer, you’re breaking expecatations of others.

Ultimately it’s your computer and your choice. Forgive me insisting that much: I don’t intend to continue beyond this post. But I truly feel like you’re just causing unnecessary pain to yourself, and that comes from confusing nature of PUAs.

claimsecond · 2024-10-28 09:04:48

Guys, I really appreciate your effort and intent to help me, but I couldn't imagine my (as I saw it) simple wish to see all the symbols in the text published on someone's github will cause so much pain.
If there is no resolution for this, I accept this. Just initially thought there's something wrong with my hands, as I can't make a simple setup in the browser.

seth · 2024-10-28 13:02:06

simple wish to see all the symbols in the text published on someone's github

You need to understand that the PUA is basically a way to abuse the font system to draw random icons, they're not specified and make absolutely no sense outside the use along a very specific font.
It's not supposed to be treated as text.

Please always remember to mark resolved threads by editing your initial posts subject - so others will know that there's no task left, but maybe a solution to find.
Thanks.

Arch Linux

#1 2024-10-26 16:40:31

[SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#2 2024-10-26 16:58:39

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#3 2024-10-26 17:42:28

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#4 2024-10-26 19:36:35

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#5 2024-10-27 10:10:55

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#6 2024-10-27 11:53:19

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#7 2024-10-27 12:58:59

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#8 2024-10-27 14:49:19

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#9 2024-10-27 14:51:22

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#10 2024-10-27 16:38:11

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#11 2024-10-27 19:15:29

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#12 2024-10-27 19:40:36

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#13 2024-10-27 20:06:29

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#14 2024-10-27 20:16:16

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#15 2024-10-27 20:18:19

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#16 2024-10-27 20:48:02

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#17 2024-10-28 09:04:48

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

#18 2024-10-28 13:02:06

Re: [SOLVED] Some emoji/symbols not visible in browsers (chrome / firefox)

Board footer