Emoji and Linux 🐧

[anxolerd]

Hi Monica,

Have you seen any successful combinations of emoji :tada: and Linux desktops :penguin: ? I'm really :disappointed: upset because all I get is monochrome :black_circle: emojis, which looks so sad :cry: .

Have you heard about any good way to use :rainbow: colorful emojis :joy_cat: on linux machines? TIA :heart:

[notwaldorf]

Ooof, that's a good question! 🤔

I hear (as a Mac user, sheltered from these problems), that the solution is to install a better emoji font. If you're on Ubuntu, I think this is what you're looking for. I don't know if it works on non-Ubuntu, but it's worth giving a try! The solution seems pretty generic -- 1. download a better font, 2. make it the OS fallback for emoji, 3. flush the font cache.

Good luck! Let me know if this worked out for you! ✌️

[anxolerd]

Hi again =)

Thanks for your answer. The solution you provided worked indeed. Unfortunately :disappointed:, it worked partially: colorful :rainbow: emojis appeared in Firefox :smile:, but did not appeared in Chrome Browser I use as the main browser :crying_cat_face:

It seems, Chrome on Linux 🐧 nowadays is bad at showing nice and colorful emoji, unless they are present as on-site js-powered glyphs...

[notwaldorf]

Ah. RIGHT. It's because Emoji One is an SVG font, and Chrome doesn't support that. You'll have to find a non-svg emoji font instead :(

[anxolerd]

Thanks! I'll try searching and if I succeed, I'll post here)

[notwaldorf]

Try the Noto Color emoji maybe?

[anxolerd]

Hm... Didn't knew about that.

[anxolerd]

YAY! Thanks a lot! You're an amazing Emojineer indeed! 🎉 🎉 🎉 😄 😹

[notwaldorf]

YESSSSSSSSS. So glad I could help!

Also, so I can link this on Twitter: if you want to get colour emoji on Linux Chrome, the solution was to follow the steps in this tutorial but using the Noto Color Emoji font instead! 🏆

[anxolerd]

Well, you'll probably not want to override monospace font with Noto Color Emoji, cause it will look ugly as well as behave strange. 😩

Here are the changes I made to configuration from the tutorial:

   <match>
     <test name="family"><string>sans-serif</string></test>
     <edit name="family" mode="prepend" binding="strong">
-      <string>Emoji One Color</string>
+      <string>Noto Color Emoji</string>
     </edit>
   </match>

   <match>
     <test name="family"><string>serif</string></test>
     <edit name="family" mode="prepend" binding="strong">
-      <string>Emoji One Color</string>
-    </edit>
-  </match>
-
-  <match>
-    <test name="family"><string>monospace</string></test>
-    <edit name="family" mode="prepend" binding="strong">
-      <string>Emoji One Color</string>
+      <string>Noto Color Emoji</string>
     </edit>
   </match>

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

[anxolerd]

Hm... on the Mozilla bugzilla I've found a possibility to setup a font fallback only for chrome app.

This might be useful for somebody.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

  <match target="pattern">
    <test name="prgname"><string>chrome</string></test>
    <edit name="family" mode="prepend_first">
      <string>Noto Color Emoji</string>
    </edit>
  </match>

</fontconfig>

[hexchain]

Hope I'm not too late. Jumping in because I had (somewhat 😂) great success in enabling colored emoji on 🐧.

To have them everywhere you need a patched cairo. For Arch Linux users there is aur/cairo-coloredemoji, and for other distro you might have to compile it with the patch, unfortunately:

--- a/cairo-1.14.6/src/cairo-ft-font.c  2016-03-13 09:36:42.618325503 +0800
+++ b/cairo-1.14.6/src/cairo-ft-font.c  2016-03-13 09:38:24.194288159 +0800
@@ -2258,7 +2258,7 @@
      * Moreover, none of our backends and compositors currently support
      * color glyphs.  As such, this is currently disabled.
      */
-    /* load_flags |= FT_LOAD_COLOR; */
+    load_flags |= FT_LOAD_COLOR;
 #endif

     error = FT_Load_Glyph (face,

Here is my related fontconfig and a final screenshot 📸: https://gist.github.com/hexchain/47f550472e79d0805060

Bonus, my $PS1:

You may notice that the emoji character width in terminal is sometimes considered 1, not 2, causing them to overlap. This is due to some assumptions on character width in glibc's wcwidth and (maybe) vte, glib, ... and it's hard to get them right. In vim, there is an emoji option to workaround this (does not effect outside vim, though 😐).

[ZWindL]

And the freetype's version must > 2.6.3. You may cause some issue when you are using infinality's package(such as firefox can't display emoji correctly, but chromium is fine).

[jobukkit]

It works, but, some websites don't display spaces anymore!

GitHub:

Emojipedia:

Twitter:

Though fortunately, most websites work fine. I'm not sure what triggers it.

I'm using the Chrome-only fontconfig posted above.

[hexchain]

Try changing your Chrome's font settings (in Settings -> Advanced -> Customized fonts) to generic names or fonts you like, e.g. "sans" "serif" "monospace".

This is because in https://gist.github.com/hexchain/47f550472e79d0805060#file-51-noto-color-emoji-conf-xml-L44, your final font list populated by fontconfig starts with the Emoji font (because of prepend). This is done to ensure all characters to be rendered are first searched for in Emoji font, because some other fonts have glyphs for some emoji characters.

If that does not solve your problem, try removing the last match block.

[jobukkit]

EDIT: Whoops, forgot a command EDIT 2: Better system cleanup

Thanks for the hint about monochrome fallbacks, hexchain! Why did you edit that away?

I figured it out! You don't need a config file at all! You just need to remove the monochrome Symbola font from your system in order to force Chrome to use Noto.

So to summarize, this is all you need to do to enable emoji support in Chrome on Ubuntu:

wget https://noto-website.storage.googleapis.com/pkgs/NotoColorEmoji-unhinted.zip
sudo unzip NotoColorEmoji-unhinted.zip -d /usr/share/fonts/truetype/noto
sudo rm /usr/share/fonts/truetype/noto/LICENSE_OFL.txt
sudo rm /usr/share/fonts/ancient-scripts/Symbola-hint.ttf
sudo apt-get remove ttf-ancient-fonts-symbola
sudo chmod 644 /usr/share/fonts/truetype/noto/NotoColorEmoji.ttf
fc-cache -f -v
rm NotoColorEmoji-unhinted.zip

This may have other side effects though.

[hexchain]

Not all monochrome glyphs are from Symbola. Even Noto Sans has some.

[jobukkit]

EDIT: Added an overriden emoji that I overlooked

You're not wrong, but it's a small amount. The only emoji's that are still overridden with monochrome versions are: (it's possible that I overlooked a few)

☺️ ☘ ☄ ⚙ ⚖ ⚒ ⚗ ⚔ ☠ ⚰ ⚱ ☮ ☪ ☸ ☦ ☢ ⚛ ☣ ↕️ ↔️ ♠️ ♣️ ♥️ ♦️ ‼️ ⚜ ☹

Other than those, it works perfectly, as you can see. (notice the single wrong one in between the "upside down" and "yummy" faces)

[anxolerd]

Hey, @Jop-V thanks! That worked like a charm!

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

[jobukkit]

Yay!

Seriously though @hexchain, think before editing! I'm glad I saw your reply before you edited it, because I'm not completely sure whether I would have figured it out without the information in your unedited post...

[joestrong]

Hi Guys, had the same issue with spaces being removed from text, and found a solution that didn't involve removing fonts. And I think it works with every emoji.

Basically, the DejaVu font is overriding some of them, so in your fontconfig you'll need to set the font fallbacks to both the emoji font and a font without emoji (otherwise the emoji font will screw up the spaces). I used "Bitstream Vera"

My Gist: https://gist.github.com/joestrong/b4ee8c12284fa2a20e70a9bc272ef19b

[jobukkit]

You may want to limit the config to Chrome using <test name="prgname"><string>chrome</string></test>, some apps (such as GIMP) crash because they can't handle the Noto Color font. https://github.com/notwaldorf/ama/issues/53#issuecomment-242913518

[joestrong]

GIMP works fine for me and I haven't seen any crashes so far

[cookiengineer]

@hexchain I already commented on your gist with the installation instructions for Arch, so people can try it out more easily. Thanks much for the patched cairo package!

However, I have now emojis in my UI programs GNOME-wide. How did you manage to get it working in your PS1 / bash config or VIM? My google fu is pretty bad googling such things, I guess.

Do I need to make an alias for "monospace" like described here but for Noto Color Emoji instead?

edit

Forgot to restart the GNOME Terminal, now it works perfectly fine.

[hexchain]

@cookiengineer Any VTE-based terminal would suffice (I use Termite personally). As reported by others, Qt(KDE) ones are good too but I haven't tried any.

[cookiengineer]

@hexchain: Well, I'm stupid. Forgot to restart GNOME Terminal. Now it works perfectly fine 👻

[dottorblaster]

Just letting you guys know I'm diggin' the net to write a small roundup about emojis and Linux. You are awesome :tada:

[ifzm]

@hexchain I would like to achieve in the Ubuntu terminal color symbol, your can give me some reference?

[mildsunrise]

It's strange that we have to patch Cairo, I thought Pango was used to render text under GTK+, while using Cairo for the rest of the graphic rendering? Anyway with a patched Cairo (download package for Ubuntu 16.04), the font installed and config written, it works.

So the full commands to get color emojis in Ubuntu 16.04 LTS would be:

cd "$(mktemp -d)"
wget https://noto-website.storage.googleapis.com/pkgs/NotoColorEmoji-unhinted.zip
unzip NotoColorEmoji-unhinted.zip
wget https://github.com/notwaldorf/ama/files/1049784/libcairo2_1.14.6-1_amd64.deb.zip
unzip libcairo2_1.14.6-1_amd64.deb.zip
sudo dpkg -i libcairo2_1.14.6-1_amd64.deb
mkdir -p ~/.fonts && mv *.ttf ~/.fonts
mkdir -p ~/.config/fontconfig && cat > ~/.config/fontconfig/fonts.conf <<EOF
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

<match>
 <test name="family"><string>sans-serif</string></test>
 <edit name="family" mode="prepend" binding="strong">
   <string>Noto Color Emoji</string>
 </edit>
</match>

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

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

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

</fontconfig>
EOF
fc-cache -f -v

[ifzm]

@jmendeth
Nice 👍 Your answer is very helpful to me，thank you very much :D

[limbaku]

Hi, I know the topic is closed but I had some issues related to this and I wanted to ask a question if someone here could help me with this issue I've just created on stack overflow.

https://stackoverflow.com/questions/48206471/how-to-create-an-emoji-image-with-graphics2d-and-google-noto-color-font

Thank you very much,

Sandra