Published on November 18th, 20130
minEmoji, another emoji JS library.
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:
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.
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:
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.
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:
- The SVG Sprite with all emojis:
- The huge PNG Sprite created with ImageMagick command:
convert -background none huge_sprite.svg master_sprite.png