bhanditz / emojistatic

:poop: CDN static asset generation for emoji

tt

emojistatic

Generate a bunch of static files useful for displaying Emoji on a website. Designed to be easily deployed to Github Pages or Amazon S3, or just hotlink the pre-hosted version.

What will you find within?

Emoji images

Sourced from github/gemoji, but with some advantages.

• Resized as 64/32/24/20/16px variations.
• Filesize optimized via image_optim.
• HTML5 appcache files generated for each pixel size. This will let you easily ensure a user's browser preloads and caches all the images.

Emoji image CSS sheets

If you intend you use the majority of emoji symbols, making 862 separate HTTP requests can sometimes be a bit much. Sprite sheets could solve this problem, but have non-trivial memory overhead when being used many with a file of large size. Thus, we use the Data-URI embedding technique to embed all emoji symbols of a specific pixel size directly into a CSS file.

Generated CSS font-face to assist with natively using Emoji on supported Apple devices

When on a device that supports Emoji natively (for example, Safari on MacOSX 10.7+), you probably will want to use the native support and not fall back to images.

However, there are some big problems with this:

• In a text span with mixed Emoji and regular alphanumeric characters (say, for example, rendering tweets), the regular characters will look horrible.
• if you don't force the font, then many common Emoji characters will render as their plain Unicode variants (e.g. ✌ versus ), which certainly isn't as fun.

We solve this problem by generating a custom CSS font-family which maps only the appropriate unicode ranges to the local Apple font, and allows us to fall back to whatever other font we like for the rest of the characters. Note this technique currently doesn't support double-byte Emoji glyphs (thankfully of which there are only a dozen or so).

Example comparison of using this font on Safari 7.0 on MacOSX 10.9: (source)

All files contain minified and/or gzipped versions

Make every byte count.

Using the pregenerated copies

Simply grab the files from the /build directory and stick them on AWS S3 or GitHub Pages or whatever.

You can also use the sample ones hosted with this repository at http://emojistatic.github.io/ !

Rolling your own

Get dependencies

Clone the repository, then initialize the submodules via:

git submodule update --init

You'll need dependencies for image processing, on MacOSX with Homebrew, for example, you would do:

brew install imagemagick advancecomp gifsicle jhead jpegoptim jpeg optipng pngcrush

Bundle to get ruby dependencies

bundle install

Configuration

Finally, you'll want to edit config.yml to add the domain of the host you'll be deploying to. (This is really only needed for the cache manifests to have absolute URLs, which is needed if they are going to be on a different domain than your main content. If not, set it to blank and you'll get relative URLs.)

Hacking on emojistatic

Rake file tasks are extremely powerful way to handle generators such as this in an efficient manner, but they are confusing if you are used to more conventional usages of rake. I recommend watching Jim Weirich's fantastic "Power Rake" talk to really grok them.

No tests here yet, if we start getting pull requests than perhaps we'll make some!