🎉🐱✨or: How I didn’t fix emoji in Chrome

🎉🐱✨or: How I didn’t fix emoji in Chrome

Last year, in the dark days of the web, Chrome couldn’t render emojis. I tried to fix it, failed, and have been making silly emoji related apps ever since.

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

December 23, 2015
Tweet

Transcript

  1. ✨ @notwaldorf

  2. None
  3. None
  4. U+26C4 ☃

  5. “\u26C4” ☃

  6. “‚”.length == 1 ☃

  7. None
  8. U+1F43C

  9. "".charCodeAt(0).toString(16)

  10. \uD83D \uDC3C

  11. “”.length == 2

  12. )

  13. ) U+1F43C

  14. U+1F43C

  15. \ud83d \udc81 \ud83c \udffe

  16. ) “)”.length == 4

  17. None
  18. ok so fonts

  19. AppleColorEmoji Segoe UI Symbol/Emoji Noto

  20. AppleColorEmoji Segoe UI Symbol/Emoji Noto panda_face.png lolololololol

  21. None
  22. None
  23. None
  24. None
  25. if you can’t fix the problem be the problem

  26. None
  27. None
  28. @muan made emojilib { "grinning": { "keywords": ["face", "smile", "happy",

    "joy"], "char": "", "category": "people" } }
  29. None
  30. None
  31. None
  32. None
  33. None
  34. <meta charset="utf-8"> <title></title>

  35. <meta charset="utf-8"> <title></title> <div></div>

  36. . <div></div>

  37. . { font-size: 40px; } <div class=“ ”></div>

  38. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function

    ok() { . alert('hi'); . . }
  39. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function

    ok() { alert(‘ '); }
  40. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function

    ok() { alert(‘ '); }
  41. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function

    ok() { alert(‘ '); }
  42. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function

    ok() { alert(‘ '); }
  43. . { font-size: 40px; } <div class=“ ” onclick=“\u1F43C()”></div> function

    \u1F43C() { alert(‘ '); }
  44. . { font-size: 40px; } <div class=“ ” onclick=“\u1F43C()”></div> function

    \u1F43C() { alert(‘ '); }
  45. @notwaldorf ❤