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.
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.
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.
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:
Make every byte count.
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/ !
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
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.)
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!