Skip to content
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

Emoji and Linux ๐Ÿง #53

Closed
anxolerd opened this issue Aug 21, 2016 · 30 comments
Closed

Emoji and Linux ๐Ÿง #53

anxolerd opened this issue Aug 21, 2016 · 30 comments

Comments

@anxolerd
Copy link

@anxolerd anxolerd commented Aug 21, 2016

Hi Monica,

Have you seen any successful combinations of emoji ๐ŸŽ‰ and Linux desktops ๐Ÿง ? I'm really ๐Ÿ˜ž upset because all I get is monochrome โšซ emojis, which looks so sad ๐Ÿ˜ข .

Have you heard about any good way to use ๐ŸŒˆ colorful emojis ๐Ÿ˜น on linux machines?
TIA โค๏ธ

@notwaldorf
Copy link
Owner

@notwaldorf notwaldorf commented Aug 23, 2016

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! โœŒ๏ธ

@notwaldorf notwaldorf closed this Aug 23, 2016
@anxolerd
Copy link
Author

@anxolerd anxolerd commented Aug 23, 2016

Hi again =)

Thanks for your answer. The solution you provided worked indeed. Unfortunately ๐Ÿ˜ž, it worked partially: colorful ๐ŸŒˆ emojis appeared in Firefox ๐Ÿ˜„, but did not appeared in Chrome Browser I use as the main browser ๐Ÿ˜ฟ

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
Copy link
Owner

@notwaldorf notwaldorf commented Aug 23, 2016

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
Copy link
Author

@anxolerd anxolerd commented Aug 23, 2016

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

@notwaldorf
Copy link
Owner

@notwaldorf notwaldorf commented Aug 23, 2016

Try the Noto Color emoji maybe?

@anxolerd
Copy link
Author

@anxolerd anxolerd commented Aug 23, 2016

Hm... Didn't knew about that.

@anxolerd
Copy link
Author

@anxolerd anxolerd commented Aug 23, 2016

YAY! Thanks a lot! You're an amazing Emojineer indeed! ๐ŸŽ‰ ๐ŸŽ‰ ๐ŸŽ‰ ๐Ÿ˜„ ๐Ÿ˜น

image

@notwaldorf
Copy link
Owner

@notwaldorf notwaldorf commented Aug 23, 2016

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
Copy link
Author

@anxolerd anxolerd commented Aug 24, 2016

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
Copy link
Author

@anxolerd anxolerd commented Aug 27, 2016

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
Copy link

@hexchain hexchain commented Sep 27, 2016

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:
1475072618

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
Copy link

@ZWindL ZWindL commented Sep 28, 2016

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
Copy link

@jobukkit jobukkit commented Oct 26, 2016

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

GitHub:

Screenshot of GitHub

Emojipedia:

Screenshot of Emojipedia

Twitter:

Screenshot of Twitter

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

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

@hexchain
Copy link

@hexchain hexchain commented Oct 26, 2016

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
Copy link

@jobukkit jobukkit commented Oct 26, 2016

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
Copy link

@hexchain hexchain commented Oct 26, 2016

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

@jobukkit
Copy link

@jobukkit jobukkit commented Oct 26, 2016

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)

Screenshot of EmojiOne test page

@anxolerd
Copy link
Author

@anxolerd anxolerd commented Oct 27, 2016

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

๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

@jobukkit
Copy link

@jobukkit jobukkit commented Oct 27, 2016

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
Copy link

@joestrong joestrong commented Nov 3, 2016

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
Copy link

@jobukkit jobukkit commented Nov 3, 2016

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. #53 (comment)

@joestrong
Copy link

@joestrong joestrong commented Nov 4, 2016

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

@cookiengineer
Copy link

@cookiengineer cookiengineer commented Nov 9, 2016

@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
Copy link

@hexchain hexchain commented Nov 9, 2016

@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
Copy link

@cookiengineer cookiengineer commented Nov 9, 2016

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

@dottorblaster
Copy link

@dottorblaster dottorblaster commented Dec 11, 2016

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

@ifzm
Copy link

@ifzm ifzm commented May 21, 2017

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

@mildsunrise
Copy link

@mildsunrise mildsunrise commented Jun 3, 2017

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
Copy link

@ifzm ifzm commented Jun 5, 2017

@jmendeth
Nice ๐Ÿ‘
Your answer is very helpful to me๏ผŒthank you very much :D

@limbaku
Copy link

@limbaku limbaku commented Jan 11, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet