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.

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. 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. View Slide

23. 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