Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
    Ⓜ
    ℹ

    View Slide

  2. @NOTWALDORF

    View Slide

  3. @NOTWALDORF

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. :-)

    View Slide

  8. ( ´ ̙ ` ).Ň̾ὑ

    View Slide

  9. 1998
    SHIGETAKA KURITA

    View Slide

  10. 1998

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. 2000
    CHAOS TBH

    View Slide

  17. 2009
    UNICODE 5.2

    View Slide

  18. +27
    2009

    View Slide

  19. +994
    2010

    View Slide

  20. OSX 10.7
    2010

    View Slide

  21. 2016
    +72

    View Slide

  22. 2016

    View Slide

  23. 2016

    View Slide

  24. BUT WHAT IS IT
    OK

    View Slide

  25. ASCII
    128 CHARACTERS

    View Slide

  26. View Slide

  27. View Slide

  28. “A”.LENGTH 1

    View Slide

  29. “A”.CHARCODEAT(0)

    View Slide

  30. .TOSTRING(16)
    “A”.CHARCODEAT(0)

    View Slide

  31. ⛅

    View Slide

  32. ⛅
    U+26C5

    View Slide

  33. ⛅
    “⛅”.LENGTH 1

    View Slide

  34. ⛅
    “⛅”.CHARCODEAT(0)
    .TOSTRING(16)

    View Slide


  35. “”.LENGTH 2

    View Slide


  36. U+1F43C

    View Slide


  37. “”.CHARCODEAT(0)
    .TOSTRING(16)

    View Slide


  38. “”.CHARCODEAT(1)
    .TOSTRING(16)

    View Slide


  39. \uD83D \uDC3C

    View Slide

  40. )*+
    WHAT ABOUT

    View Slide

  41. )
    “)”.LENGTH 4

    View Slide

  42. )
    \uD83D \uDC81 \uD83C \uDFFE

    View Slide

  43. )

    View Slide

  44. )
    […”)”] [“”, “”]

    View Slide

  45. )
    ”)”.REPLACE(//g,””)

    View Slide

  46. /
    ”)”.REPLACE(//g,””)

    View Slide

  47. +

    View Slide

  48. +
    […”+”] [“”, “”]

    View Slide

  49. *
    “*”.LENGTH 11

    View Slide

  50. *
    [“”, “”, “”, “”, “”, “”, “”]

    View Slide

  51. *
    ”*”.REPLACE(//g,””)

    View Slide

  52. 5
    ”*”.REPLACE(//g,””)

    View Slide

  53. YEAH BUT
    CHROME

    View Slide

  54. FONTS, THEMS A PICKLE

    View Slide

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

    View Slide

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

    View Slide

  57. BLINK

    View Slide

  58. TEXT SHAPER
    BLINK

    View Slide

  59. PAINTER
    TEXT SHAPER
    BLINK

    View Slide

  60. PAINTER
    TEXT SHAPER



    BLINK

    View Slide

  61. <br/>span {<br/>font-family: “Comic Sans MS”, sans-serif;<br/>}<br/>

    View Slide

  62. View Slide


  63. pls shape in Comic Sans MS

    View Slide


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

    View Slide


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

    in sans-serif fallback???

    View Slide


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

    in sans-serif fallback???
    noooope.

    View Slide


  67. uhh in AppleColorEmoji? (a hunch)

    View Slide


  68. uhh in AppleColorEmoji? (a hunch)
    oh for sure. here’s the shape and position!

    View Slide


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

    yay! skia, here’s a text blob !
    TM

    View Slide


  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

    View Slide


  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

    View Slide


  72. uhh in A Custom Font? (a hunch)
    nah

    welp. i don’t know.
    YASSS. hey user, i painted a ⌷ !!!

    View Slide

  73. View Slide

  74. ANYWAY

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. ANYWAY

    View Slide

  80. PRACTICAL
    SHIT

    View Slide

  81. EMOJILIB BY @MUAN
    {
    "grinning": {
    "keywords": ["face", "smile", "happy", "joy"],
    "char": "",
    "category": "people"
    }
    }

    View Slide

  82. MEOWNI.CA/EMOJI-TRANSLATE

    View Slide

  83. View Slide

  84. WORD ART BY @CDATA

    View Slide

  85. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  86. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  87. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  88. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  89. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  90. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  91. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  92. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  93. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  94. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  95. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  96. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  97. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  98. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  99. ⌘ + ⌃ + SPACE TIME
    WI-FIS DEVICE NAMES
    ACTUALLY EVERY NAME
    TERMINAL PROMPTS
    EVERY TEXTFIELD ON
    THE INTERNET CODE

    View Slide

  100. View Slide

  101. View Slide



  102. function ok() {
    alert(‘ ');
    }

    View Slide



  103. function ok() {
    alert(‘ ');
    }


    View Slide



  104. function ok() {
    alert(‘ ');
    }



    View Slide

  105. . { font-size: 40px; font-style: italic; }

    function ok() {
    alert(‘ ');
    }


    View Slide

  106. . { font-size: 40px; font-style: italic; }

    function ok() {
    alert(‘ ');
    }

    hi()

    View Slide

  107. . { font-size: 40px; font-style: italic; }

    function hi() {
    alert(‘ ');
    }


    hi()

    View Slide

  108. . { font-size: 40px; font-style: italic; }

    function hi() {
    alert(‘ ');
    }

    ()




    View Slide

  109. . { font-size: 40px; font-style: italic; }

    function hi() {
    alert(‘ ');
    }



    ()



    View Slide

  110. . { font-size: 40px; font-style: italic; }

    function hi() {
    alert(‘ ');
    }

    ()




    View Slide

  111. . { font-size: 40px; font-style: italic; }

    function \u1F43C() {
    alert(‘ ');
    }




    View Slide

  112. . { font-size: 40px; font-style: italic; }

    function \u1F43C() {
    alert(‘ ');
    }





    View Slide

  113. @NOTWALDORF

    View Slide