Slackmoji Anywhere

September 9th, 2018

I use slack a lot to communicate with other Kubernetes contributors, and I’m a fan of the emoji reaction feature for reacting to posts without notifying everyone in the group. Positive emoji responses in particular are a simple way to acknowledge messages and make discussions more friendly and welcoming.

A particularly fun part of this feature is custom emoji support, commonly known as “slackmoji”, which allows adding arbitrary images (and even gifs!) treated like any other emoji. The Kubernetes slack instance currently has more than three-hundred custom emoji, and there are entire websites dedicated to cataloging slackmoji. Slack is a web app and implements all emoji, custom or otherwise, with shortcodes replaced with images of the corresponding emoji. With a bit of CSS we can easily mimic slackmoji and put them anywhere*

* anywhere on the web, where we can control html and styling :^)

First we need to some HTML to style, Slack uses a <span> element for slackmoji, which makes sense semantically as inline styled text. For the standard emoji “Dog Face” with shortcode :dog: we can use the following HTML:

1<span class="emoji" title=":dog:">:dog:</span>

Now we’ll need to make it look like the dog emoji with some styling:

 1span.emoji {
 2  /* inline block allows us to set width and height */
 3  display: inline-block;
 4  /* the emoji is 1x1 character in size */
 5  height: 1em;
 6  width: 1em;
 7  /* We don't want the shortcode to overflow the emoji size */
 8  overflow: hidden;
 9  white-space: nowrap;
10  /* Center the emoji image, we'll be using a background in a moment ... */
11  vertical-align: middle;
12  background-size: contain;
13  background-repeat: no-repeat;
14  background-position: 50% 50%;
15  /* make the image slightly larger and aligned with the text */
16  font-size: 1.2em;
17  line-height: 1;
18  margin-top: -0.1em;
19  text-align: left;
20  /* make sure the text is selectable */
21  user-select: all;
22  -webkit-user-select: all; /* Chrome/Safari */
23  -moz-user-select: all; /* Firefox */
24  -ms-user-select: all; /* IE10+ */
25  /* try to hide the actual text, we want the emoji to appear selected */
26  color: transparent;
27  text-shadow: none;
28}

Now we just need to add an image for :dog: to the span. We can use something like Google’s open Noto Color Emoji font, which will give us an image for the “dog face” codepoint (U+1F436) like:

We can then update the <span> to use the image like:

1<span style="background-image:url(/dog.png)" class="emoji" title=":dog:">:dog:</span>

Giving us this: :dog:

Which will:

• display the :dog: emoji similar to slack
• show :dog: on hover using the title tag
• copy as the :dog: shortcode because we put :dog: inside the span
• render inline as a single character, despite the inner text

For this site I use some additional CSS to make the highlight look as expected:

 1/* set a consistent highlight color for the site */
 2/* we use #b4d5fe which is default in most browsers on macOS, */
 3/* and a pretty good choice, but adjust it to 25% transparent, */
 4/* for non-webkit browsers so we can still see the emoji image */
 5/* webkit will control the highlight color transparency itself */
 6::selection {
 7  background-color: rgba(180,213,254,0.75);
 8}
 9::-webkit-selection {
10  background-color: #b4d5fe;
11}
12/* firefox for android does not seem to know ::selection */
13::-moz-selection {
14  background-color: rgba(180,213,254,0.75);
15}
16/* emoji text needs to stay transparent */
17span.emoji::selection {
18  color: transparent!important;
19}
20/* repeat for firefox on android */
21span.emoji::-moz-selection {
22  color: transparent!important;
23}

This seems to work in Webkit based browsers (Chrome, Safari, etc.) at least, highlighting is slightly off on Firefox in varying ways depending on the platform, but still works and the shortcodes copy correctly.

✎ Update

Thanks to some sleuthing with matter123 this has been improved and now works pretty well in Firefox, Edge, Chrome, Safari …

Finally, here are a few of my favourite slackmoji:

:ship_it_parrot: - :ship_it_parrot: :this_is_fine: - :this_is_fine: :sig-testing: - :sig-testing: :bikeshed: - :bikeshed: :k8s: - :k8s: :heart_eyes_k8s: - :heart_eyes_k8s: :parrotk8s: - :parrotk8s: :gopher_dance: - :gopher_dance: :picard_facepalm: - :picard_facepalm: :unicorn: - :unicorn: :left-shark: - :left-shark: :right-shark: - :right-shark: :bash: - :bash: :bash_fire: - :bash_fire:

(Along with the standard :+1:, smiles, etc. :smile:)

Happy :slack:-moji-ing! :upside_down_smile: