search

notwaldorf / ama

:raising_hand: Ask @notwaldorf anything!
94 stars 13 forks source link

I have a silly side project... Panda, the emojinal DJ - can you help with emoji consistency? #46

Closed deshine closed 8 years ago

deshine commented 8 years ago

Hi Monica,

I started off using HTML unicode for my emojis, but after having some friends test it, I quickly found out that emoji do not look the same on different browsers and devices! I work on a Mac ( usually with Chrome or Firefox ) and thought the emoji looked good, but when a friend sent me a screenshot of what he saw on his Windows laptop using Chrome, I was shocked to see that the emoji were in black and white and looked.... different...

What is the best way to get a consistent cross browser emoji experience? I just switched to using an emoji library that uses SVGs to render the emoji just a few hours before finding your blog post on emoji so I thought I'd ask someone who has a passion for emoji.

Also, would love your design or UX feedback for Panda, the Emojinal DJ if you have any :) It's a web app that creates music mixes based on emoji and songs/artists that you like

http://panda.huzzaz.com/

Thanks!

notwaldorf commented 8 years ago

twemoji is a nice library that uses the twitter emoji instead of the native platform ones, which means they look the same cross platform. For example, emoji-rain uses it -- if you check the "with twitter emoji" checkbox, you should see the same emoji on Mac and Windows.

If you don't want to use twemoji, you'll have to figure out a way to ship an emoji font with your app, so that you force the emoji to render with your font, rather than the native one. Something like:

.emoji { font-family: SomeEmojiFont; };
<span class="emoji">😊</span>

Hope this helps! 🐼

deshine commented 8 years ago

Thanks for the advice! I did end up using an emoji library.

Nice job on emoji-rain 😃 Are you working on any other cool side projects?