emojize: A CSS repository from ded

Emojize

High resolution, unicode (emoji) to html conversion utility

npm install emojize --save

var convert = require('emojize').emojize
var html = convert('Haay 😜. Just getting ☕. But maybe 🍻 at 🕘🌜 is that 🆒')

Browser usage with Ender

ender add emojize

Note

Use of this library requires <meta charset='utf-8'> encoding if used in a browser.

<head>
  <meta charset='utf-8'>
  <link href='sprite/emoji.css' type='text/css'>
  <script src='ender.js'></script>
</head>

var convert = require('emojize').emojize
document.getElementById('content').innerHTML = convert('Haay 😜')

Sprite vs Image

emojize defaults to sprite based conversion which ultimately requires the developer to include the sprite/emoji.css and upload the emoji.png along side the file. You could otherwise include all images found in img/ and pass in flag to the second argument to emojize

var emo = require('emojize')
emo.base('images/emojis/')
emo.emojize('Haay 😜', true)

/**
 * outputs:
 * 'Haay <img src="images/emojis/_1f61c.png">'
 */

Examples

make build
make example
open http://localhost:3000/example.jade

Sizing

Each emoji defaults to 64px × 64px which may not always be desired. Thus, consider the following practice. Example assumes LESS.

.quarter { zoom: 0.25 }
.half { zoom: 0.5 }
.three-quarter { zoom: 0.75 }
.full { zoom: 1 }

@media screen and (max-width: 768px) {
  .emoji {
    .quarter()
  }
}

@media screen and (max-width: 992px) {
  .emoji {
    .half()
  }
}
@media screen and (max-width: 1200px) {
  .emoji {
    .three-quarter()
  }
}
@media screen and (max-width: 1600px) {
  .emoji {
    .full()
  }
}

Credits

Much thanks to Gemoji project for high resolution images and Apple Inc. for Artwork. See License

Happy Emojizing!