blog

archives

Emoji and Discourse

Jeff Atwood December 30, 2015

We’ve always had a strong relationship with Emoji. From the earliest days of Discourse, you could add Emoji to your posts by by typing : and using our handy Emoji autocompleter:

emoji-completion-2x

Of course : just so happens to be the first character of the most common ASCII smiley, our old pal :) – so hopefully it was discoverable.

Since then, we’ve continually refined and improved our Emoji support.

Added an Emoji Picker

discourse-emoji-picker

Sam whipped up this graphical emoji picker as an unplanned surprise in an earlier release and it works great! It’s linked from the editor toolbar as well:

discourse-emoji-toolbar-button

We also added a “more…” button to the autocomplete so even if you don’t have the editor toolbar visible (or, say, you’re on mobile), you can still get to the emoji picker.

discourse-emoji-picker-more

Added Multiple Emoji Families

We launched with the Apple Emoji set, although it isn’t quite clear what the licensing terms are for that set. So we were very excited when Emoji One came along with an explicitly open source set of Emoji images, free for everyone! We immediately made Emoji One our default Emoji set.

slack-emoji-style-selector

There’s a number of Emoji Families or “sets” to choose from, so once we added Emoji One we also added the other common families: Google / Android, Apple / iOS, Twitter, and of course Emoji One which is the default.

discourse-select-emoji-set

Visit your site settings and change your emoji set setting to taste.

Added Slight Smile

There was a surprising amount of consternation over the fact that Emoji, as originally defined, doesn’t have a “plain” closed mouth smiley. I’m not sure why this is, but it’s true:

emoji-smile-familes

Notice that none of those smiling Emoji faces, in any family, contains a simple closed mouth smile, the kind we associate with the classic 1960s and 1970s “Have a Nice Day” smile in American culture.

emoji-smile-vs-slightly-smiling

Fortunately Unicode 7 added something called slightly_smiling, so we’ve switched the default :) mapping to that.

Added Emoji to Topic Titles

Another persistent user request was for Emoji in topic titles, so Régis added that a few releases ago, too:

discourse-emoji-topic-titles

Nothing makes your topic stand out quite like a … :banana: does.

Added Unicode Emoji Remapping

Emoji went from a weird Japanese mobile quirk to being so completely mainstream that tears-of-joy-emoji was the 2015 “word” of the year. And starting in 2010, Emoji was added as part of the official Unicode standard.

Although having Emoji formalized in Unicode does wonders for standardizing the Emoji experience, the actual rendering of Unicode Emoji depends heavily on your platform and your browser. To address this, Robin just made it so that when we encounter a unicode Emoji in a Discourse post we automatically remap it to the correct Emoji image set, per your Discourse site settings.

discourse-emoji-unicode-remapping

This way, no matter how the Emoji is entered – via the Discourse picker, or via Unicode character typed with your local keyboard – it’ll look consistently great, on any device, for any user.

Updated and Optimized Emoji Sets

There are a fair number of changes to Emoji each year, as Emoji become more and more of a cultural phenomenon.

The same is true of each iOS and Android release, which include refined Emoji as well as new ones. We regularly update each Emoji set to match as we release. We’ve also heavily optimized all our Emoji sets using Google’s new zopfli PNG compression for speedy rendering.

In the current Discourse 1.5 beta, we’re especially pleased to pull in the new, completely redesigned 2016 Emoji One set, which looks fantastic!

emoji-one-2016-examples

Emoji One also provides essential Emoji references as a public service:

At Discourse, we’re true blue_heart Emoji fans. We want you to have fun and express yourself with the deep Emoji support in Discourse! And, as always, let us know how we can continue to improve your Emoji experience. plus-one

Notable Replies

  1. Yay! @eviltrout just updated us so we officially support Unicode 7.0 emoji, released June 2014, and Unicode 8.0 emoji, released June 2015.

    He confirmed all four emoji sets have 144 standard emoji additions and this enhancement will of course be an official Discourse 1.5 feature.

    Let the :taco: countdown begin. You get a :taco: and you get a :taco: and you get a :taco: ...

  2. Falco says:

    Wow! Very nice!

    I'm upgrading my instance now because of this :vulcan:.

    Ps.: I guess the skin tone interface will be kinda tricky...

  3. This time around I was focused on adding all the missing emoji we had. Just doing that for all 4 sets was quite a bit of work. And @codinghorror I actually added 196 emoji, including all new ones for Unicode 8. The one thing we're missing is skin tones because we'd need to change our interface around for that.

  4. Yes, basically I extracted the current versions of all 4 sets we use. I then wrote a script to get the intersection of emoji that are present in each set that weren't previously in discourse and there were 196.

    I'm not sure if we were missing some from Unicode 6 or if all sets happened to include more emoji that is later than unicode 8. Each set had quite different numbers of emoji that weren't in Discourse, so I'm not sure if they speculatively try out new emoji or what, but the good news is we have many more to use!

  5. Oh neat! That repo wasn't on my radar. If you want to see the tools we used to extract the emojis they're all in this repo:

    https://github.com/discourse/discourse-emoji-extractor

    In order to merge them into discourse we need the emojis

    1. Present in all 4 sets.
    2. Renamed to the emoji.json name
    3. Minified using zopflipng

    Then they can be put into a PR after they are:

    1. copied into the discourse repo
    2. updated emoji.json in our repo with what is present
    3. Increment emoji version

    (It's a lot of work but all the tools are there)

Continue the discussion meta.discourse.org

5 more replies

Participants