Upgrade to PRO for Only $50/Yearโ€”Limited-Time Offer! ๐Ÿ”ฅ

How I didn't fix ๐Ÿ“งโ“‚๏ธ๐Ÿ’ฃ๐Ÿšฝโ„น๏ธ in Chrome

How I didn't fix ๐Ÿ“งโ“‚๏ธ๐Ÿ’ฃ๐Ÿšฝโ„น๏ธ inย Chrome

Two years ago, in the dark days of the web, Chrome couldnโ€™t render emojis. Monica tried to fix it, failed, and has been obsessed with bringing unicode to the people ever since. Why do you sometimes get a square instead of a ๐Ÿ• if you type U+1F355?
How do skin coloured emoji work? How do you add a dinosaur emoji to the spec, which is decidedly lacking? If youโ€™ve ever asked any of these questions, this talk is for you.

Monica Dinculescu

September 12, 2016
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. H O W I D I D N โ€™ T

    F I X I N C H R O M E โ“‚ โ„น
  2. :-)

  3. )

  4. +

  5. pls shape in Comic Sans MS nah. not a thing

    fam in sans-serif fallback???
  6. pls shape in Comic Sans MS nah. not a thing

    fam in sans-serif fallback??? noooope.
  7. uhh in AppleColorEmoji? (a hunch) oh for sure. hereโ€™s the

    shape and position! yay! skia, hereโ€™s a text blob ! TM
  8. uhh in AppleColorEmoji? (a hunch) oh for sure. hereโ€™s the

    shape and position! yay! skia, hereโ€™s a text blob ! YASSS. hey user, i painted a !!! TM
  9. uhh in Segoe UI Emoji? (a hunch) oh for sure.

    hereโ€™s the shape and position! yay! skia, hereโ€™s a text blob ! YASSS. hey user, i painted a !!! TM
  10. uhh in A Custom Font? (a hunch) nah welp. i

    donโ€™t know. YASSS. hey user, i painted a โŒท !!!
  11. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  12. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  13. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  14. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  15. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  16. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  17. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  18. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  19. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  20. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  21. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  22. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  23. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  24. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  25. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  26. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€

    onclick=โ€œ โ€œ> </div> function ok() { alert(โ€˜ '); } hi()
  27. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€

    onclick=โ€œ โ€œ> </div> function hi() { alert(โ€˜ '); } hi()
  28. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€

    onclick=โ€œ โ€œ> </div> function hi() { alert(โ€˜ '); } ()
  29. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€

    onclick=โ€œ โ€œ> </div> function hi() { alert(โ€˜ '); } ()
  30. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€

    onclick=โ€œ โ€œ> </div> function hi() { alert(โ€˜ '); } ()
  31. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€

    onclick=โ€œ\u1F43C()โ€œ> </div> function \u1F43C() { alert(โ€˜ '); }
  32. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€

    onclick=โ€œ\u1F43C()โ€œ> </div> function \u1F43C() { alert(โ€˜ '); }