Who doesn’t like to share a message with an emoji? Everyone who has a way to do it is doing it and there is no doubt about it, if you don’t believe me, check out this site which provides a real-time feed of each emoji used on Twitter:

http://www.emojitracker.com/

The sad thing is that most web browsers doesn’t support it yet, Safari on the latest OS X version appears to be the only one, but there is always a solution.

I have tried a lot of libraries to replace Unicode emojis into a “span” tag which is linked into a CSS selector and a PNG sprite, but most of the libraries out there have some issues, they are huge, literally huge, a 100k+ JavaScript file, a 60k CSS file, most of the libraries doesn’t have the complete iOS emoji set and most of the time the JavaScript file gets corrupted because some of them use the Unicode character for each emoji instead of the Unicode representation, so I decided to make my own emoji JavaScript library.

First thing I needed was to get the set of PNG images from somewhere, lucky for me I found the “emoji-extractor”, a small Ruby script that extract all PNG images from the original “Apple Color Emoji.ttf” file:

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

Having all PNG extracted I needed to make a CSS Sprite, in other words, merge all images intro one big PNG file, but first I sorted all images in the same way it appeared on my iOS device so I know everything that is on the emoji keyboard is included on the sprite, then thanks to JavaScript and node.js I created a SVG with all images included.

Why a SVG? Well, this is because its contents and creation are very similar those in HTML and most important, ImageMagick recognize the SVG format as an image, so I can export a SVG into a PNG with the ImageMagick convert console command.

Finally, after making a huge sprite, I resized the sprite to match the 20x20px dimension each emoji need with ImageMagick, then with the same node.js script I used to create the SVG I created a CSS file with the positions of each emoji and finally I created the JavaScript library for the replacement.

The project is available on github for everyone, it doesn’t require jQuery and it works great with all modern web browsers.

This is not the end, contribution is key, you can help testing it, submitting bugs and pull requests, making a WordPress plug-in to replace emoji, make a Chrome or FireFox extension to replace emoji on each page it loads, etc. it all depends on you now.

Special thanks to ImageMagick and the creator of the emoji-extractor.

Here are the files I used:

• HTML with all PNG emojis:
  http://v1.rodrigopolo.com/files/emoji/
• The SVG Sprite with all emojis:
  http://v1.rodrigopolo.com/files/emoji/huge_sprite.svg
• The huge PNG Sprite created with ImageMagick command:
  convert -background none huge_sprite.svg master_sprite.png
  http://v1.rodrigopolo.com/files/emoji/master_sprite.png