-
Notifications
You must be signed in to change notification settings - Fork 9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: emoji font not displayed (just blank spaces) #12304
Comments
The issue has been labeled as confirmed by the automatic analyser. |
|
@OrKoN rather than the absolute path, here it is as a relative path:
And yes, this relative path is correct:
I can't see anything wrong with this declaration? I don't want to use a remote url, I want to use a local font file. This was working fine in the past, even without the
Not sure when it broke, but it seems to have done. |
@drmrbrewer I think it is probably a change in browser implementation, probably intentional. Let me try to look it up. |
@OrKoN OK thanks, this is driving me crazy! |
it works for opening from a file:// instead of about:blank. Not sure why but it looks like the permissions were tightened up for the default about:blank page. |
Hmm, OK well this is a shame because in my actual code (rather than my attempt at a reproducible example) I am using |
That's weird, could you debug with the launch headless: false and devtools: true? any errors in the console/network? |
BTW for me, your example also does not produce any emojis in the output. |
Interesting, it might Linux-specific then. I can try to repro on Linux tomorrow. |
This is the PDF I get noto_color_emoji_example.pdf Do you see emojis in it? |
No, still not: That is despite the test returning Incidentally, I need to retain
|
@OrKoN it's the same when screenshotting to png:
Output: |
And for the avoidance of doubt, I'm running your version of the snippet but with:
And I get the same outcome if I remove the But what is also perplexing me is that when I change to |
The font check explicitly sets |
my assumption is that the font-face fails to load, make sure you use a file:// URL with an absolute path. |
Yes, I'm using:
... where:
If I remove the And interestingly, further up I noted that this emoji font is installed on the system... in fact there are two in the font cache:
The first one is the same as the one specified in the font-face URL of the snippet. The second one must have come pre-installed with the Ubuntu installation. But if I remove the first one and refresh the system font cache, so that Any idea what's going on here? The |
Is there any difference between two ttf files? could one file be corrupted? perhaps some permissions issue? (you see now errors in DevTools?) |
I also downloaded NotoColorEmoji-Regular.ttf from Google Fonts and it worked for me with the example above. |
Well, they're clearly quite different to one another, but I'm not sure where the pre-installed one came from and how it differs (apart from obvious things like date and size and name):
I don't see how... just downloaded and put in the relevant folder.
Have you tested in a Linux (Ubuntu) environment? With font config in place? |
I have the font on the system as well. But I have not tried to put it to the /root/.fonts only to the local folder. If it does not work being in the /root/.fonts, there must be errors in the DevTools console showing that the loading has failed. |
When you refer to the DevTools console, do you mean what you get if you include
|
Maybe this is something peculiar to the fact that I'm using an
And maybe I just accept my fate and use the emoji font file provided, rather than using my own... that would be the easiest workaround. |
@drmrbrewer it requires a display to be on the system :) Could you perhaps include CDP logs instead? Running with the env var Chrome does not support Linux on arm64 so I assume you are using some emulation or third party Chromium builds? |
Yes I can't recall the details of how I got it to work on arm64 (but I've made copious notes about it and recall it being a real headache)... but refer to this previous comment about this. |
I see, it makes it more difficult to troubleshoot. Is the version of your Chromium matches the version expected by the Puppeteer version? Chrome currently does not support Linux arm64 so nothing gets tested on that platform, so if something is wrong there, we would not know. |
Here is the output (for an output without emoji char) with
|
And the output when pointing to the ttf file that works:
|
There is nothing in the logs that would indicate an obvious issue to me. Just the file sizes are different 10980856 bytes for the working one, and 24015992 bytes for the not working one. Which chromium version is it? |
|
... and it would make it a lot easier if |
@drmrbrewer it is not up to Puppeteer. Chromium project officially does not support Linux arm64. That browser configuration is not available for end users in a supported way. We do support Mac arm64 ;) |
Also, windows arm64 has only recently started to be supported (not by Puppeteer yet). In this case though I doubt that the architecture is the issue, but I am not sure what is needed to reproduce the issue on my end. |
I tried with |
OK well this is really strange. I'll try to figure out what exactly is causing this; otherwise I'll just avoid installing/using my own color emoji font and used what is provided (and which seems to work). |
@OrKoN not that it will help much, but I found the place where the "working" emoji font was coming from: |
@OrKoN I've now also got it working with my actual code... I am using Web Font Loader in my code and it turns out that I was also specifying the So it really does seem to be some issue/incompatibility between puppeteer and the Difficult to know how to solve this (rather than just work around it) without you being able to reproduce it, so happy if you want to close this issue... perhaps one day someone else will experience the same thing and stumble upon this issue and add their tuppence worth. |
@OrKoN 🙄 now I see that it's the same issue for the Noto Emoji font (i.e. non-color version)... only this time I can't use the same workaround because |
@drmrbrewer would it be possible for you to test your setup on amd64 with Chrome for Testing (or regular Chrome)? |
I'll see if I can do that. I've had to jump through so many hoops to get it working on For now I've found another workaround to get the non-color version rendering properly too (it required adding explicit |
Minimal, reproducible example
Error string
no error
Bug behavior
Background
Generate a simple web page with some text content include an emoji symbol from Noto Color Emoji font.
Expectation
I expect the emoji symbol to be included in the output.
This is the html page in a browser environment:
https://jsfiddle.net/vxg7z183/
In the puppeteer code snppet I am specifying the location of the font explicitly, and yes the font file does exist:
And I am running as root so I do have access to this file.
Reality
It isn't... just blank space where the emoji should be. This is the pdf output:
Puppeteer configuration file (if used)
No response
Puppeteer version
22.6.5
Node version
20.12.1
Package manager
npm
Package manager version
10.5.0
Operating system
Linux
The text was updated successfully, but these errors were encountered: