search

slidevjs / slidev

Presentation Slides for Developers
https://sli.dev
MIT License
33.38k stars 1.36k forks source link

PDF Export breaks Unicode Emoji (with reproducer) #1872

Closed vorburger closed 1 month ago

vorburger commented 1 month ago

Describe the bug

It looks like PDF Export breaks Unicode Emoji ?

This is using "normal" (standard) emojis, NOT even custom font icons; so this seems more "basic" than #1742 ?

You can see it e.g. on (my) https://www.vorburger.ch/LearningMachineLearning/prez/sli.dev/dist/slides.pdf which doesn't have the Emojis you see on https://www.vorburger.ch/LearningMachineLearning/prez/sli.dev/dist/.

The Markdown source is https://github.com/vorburger/LearningMachineLearning/blob/develop/docs/prez/sli.dev/slides.md

Environment

KermanX commented 1 month ago

I think this is not related to #1742. It seems that the machine on which you exported the slides somehow doesn't print the emojis correctly. Could you try using https://sli.dev/guide/exporting#executable-path or another machine and check if this problem still happens?

vorburger commented 1 month ago

It seems that the machine on which you exported the slides somehow doesn't print the emojis correctly. Could you try using https://sli.dev/guide/exporting#executable-path or another machine and check if this problem still happens?

Oh! You were right. Thank You!

It works indeed when I run it on another machine.

BTW: This is actually not PDF export specific, the PNG export is also affected; this PNG was also affected (previously, now fixed).

The machine where it works is a regular Linux (Fedora) Workstation. The environment where it does not work is a GitHub Codespace.

I wonder what's different between them to cause this.

KermanX commented 1 month ago

I wonder what's different between them to cause this.

I guess this is because the emojis are provided as fonts, but that machine hadn't installed those fonts.

vorburger commented 1 month ago

I wonder what's different between them to cause this.

Comparing env, I've found e.g. where it works it's LANG=en_US.UTF-8 and where it does not work it's LANG=C.UTF-8 - but that doesn't seem to be related (or not the only reason?) - when I run with LANG=en_US.UTF-8 npm run export-md-png it doesn't help.

I guess this is because the emojis are provided as fonts, but that machine hadn't installed those fonts.

You may well be right, given that where it doesn't work, in my GitHub Codespace, is sort of a more "headless" environment.

I suspect that this problem may also affect some CI/CD-like in-container sort of environments, depending on what's installed.

I'll see if I can figure out how one would have to install such a missing font in such a headless kind of (Linux) environment.

vorburger commented 1 month ago

I'll see if I can figure out how one would have to install such a missing font in such a headless kind of (Linux) environment.

Hah! 🎸 So this does the trick, and with that it works (Thank You Google for Noto Emoji), at least for me:

$ curl -L --output NotoColorEmoji.ttf https://github.com/googlefonts/noto-emoji/raw/main/fonts/NotoColorEmoji.ttf
$ sudo mv NotoColorEmoji.ttf /usr/local/share/fonts/
$ fc-cache -fv

Do you want me to raise a PR with an update for a note about this in the doc? Or is this too specific? Just close? Up to you.