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.

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

September 12, 2016
Tweet

Transcript

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

    F I X I N C H R O M E โ“‚ โ„น
  2. @NOTWALDORF

  3. @NOTWALDORF

  4. None
  5. None
  6. None
  7. :-)

  8. ( ยด ฬ™ ` ).ล‡ฬพแฝ‘

  9. 1998 SHIGETAKA KURITA

  10. 1998

  11. None
  12. None
  13. None
  14. None
  15. None
  16. 2000 CHAOS TBH

  17. 2009 UNICODE 5.2

  18. +27 2009

  19. +994 2010

  20. OSX 10.7 2010

  21. 2016 +72

  22. 2016

  23. 2016

  24. BUT WHAT IS IT OK

  25. ASCII 128 CHARACTERS

  26. None
  27. None
  28. โ€œAโ€.LENGTH 1

  29. โ€œAโ€.CHARCODEAT(0)

  30. .TOSTRING(16) โ€œAโ€.CHARCODEAT(0)

  31. โ›…

  32. โ›… U+26C5

  33. โ›… โ€œโ›…โ€.LENGTH 1

  34. โ›… โ€œโ›…โ€.CHARCODEAT(0) .TOSTRING(16)

  35. โ€œโ€.LENGTH 2

  36. U+1F43C

  37. โ€œโ€.CHARCODEAT(0) .TOSTRING(16)

  38. โ€œโ€.CHARCODEAT(1) .TOSTRING(16)

  39. \uD83D \uDC3C

  40. )*+ WHAT ABOUT

  41. ) โ€œ)โ€.LENGTH 4

  42. ) \uD83D \uDC81 \uD83C \uDFFE

  43. )

  44. ) [โ€ฆโ€)โ€] [โ€œโ€, โ€œโ€]

  45. ) โ€)โ€.REPLACE(//g,โ€โ€)

  46. / โ€)โ€.REPLACE(//g,โ€โ€)

  47. +

  48. + [โ€ฆโ€+โ€] [โ€œโ€, โ€œโ€]

  49. * โ€œ*โ€.LENGTH 11

  50. * [โ€œโ€, โ€œโ€, โ€œโ€, โ€œโ€, โ€œโ€, โ€œโ€, โ€œโ€]

  51. * โ€*โ€.REPLACE(//g,โ€โ€)

  52. 5 โ€*โ€.REPLACE(//g,โ€โ€)

  53. YEAH BUT CHROME

  54. FONTS, THEMS A PICKLE

  55. APPLE COLOR EMOJI SEGOE UI SYMBOL/EMOJI NOTO EMOJI

  56. APPLE COLOR EMOJI SEGOE UI SYMBOL/EMOJI NOTO EMOJI PANDA_FACE.PNG lolololololol

  57. BLINK

  58. TEXT SHAPER BLINK

  59. PAINTER TEXT SHAPER BLINK

  60. PAINTER TEXT SHAPER BLINK

  61. <style> span { font-family: โ€œComic Sans MSโ€, sans-serif; } </style>

    <span></span>
  62. None
  63. pls shape in Comic Sans MS

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

    fam
  65. pls shape in Comic Sans MS nah. not a thing

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

    fam in sans-serif fallback??? noooope.
  67. uhh in AppleColorEmoji? (a hunch)

  68. uhh in AppleColorEmoji? (a hunch) oh for sure. hereโ€™s the

    shape and position!
  69. uhh in AppleColorEmoji? (a hunch) oh for sure. hereโ€™s the

    shape and position! yay! skia, hereโ€™s a text blob ! TM
  70. 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
  71. 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
  72. uhh in A Custom Font? (a hunch) nah welp. i

    donโ€™t know. YASSS. hey user, i painted a โŒท !!!
  73. None
  74. ANYWAY

  75. None
  76. None
  77. None
  78. None
  79. ANYWAY

  80. PRACTICAL SHIT

  81. EMOJILIB BY @MUAN { "grinning": { "keywords": ["face", "smile", "happy",

    "joy"], "char": "", "category": "people" } }
  82. MEOWNI.CA/EMOJI-TRANSLATE

  83. None
  84. WORD ART BY @CDATA

  85. โŒ˜ + โŒƒ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
  100. None
  101. None
  102. <title> </title> <div class=โ€œ โ€ onclick=โ€œok ()โ€> </div> function ok()

    { alert(โ€˜ '); }
  103. <title> </title> <div> </div> function ok() { alert(โ€˜ '); }

  104. <title> </title> <div class=โ€œ โ€> </div> function ok() { alert(โ€˜

    '); }
  105. . { font-size: 40px; font-style: italic; } <div class=โ€œ โ€>

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

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

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

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

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

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

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

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