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 full-size slide

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

    View full-size slide

  3. 1998
    SHIGETAKA KURITA

    View full-size slide

  4. 2000
    CHAOS TBH

    View full-size slide

  5. 2009
    UNICODE 5.2

    View full-size slide

  6. OSX 10.7
    2010

    View full-size slide

  7. BUT WHAT IS IT
    OK

    View full-size slide

  8. ASCII
    128 CHARACTERS

    View full-size slide

  9. โ€œAโ€.LENGTH 1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. โ›…
    U+26C5

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  15. โ€œโ€.LENGTH 2

    View full-size slide


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

    View full-size slide


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

    View full-size slide


  18. \uD83D \uDC3C

    View full-size slide

  19. )*+
    WHAT ABOUT

    View full-size slide

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

    View full-size slide

  21. )
    \uD83D \uDC81 \uD83C \uDFFE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. YEAH BUT
    CHROME

    View full-size slide

  31. FONTS, THEMS A PICKLE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. TEXT SHAPER
    BLINK

    View full-size slide

  35. PAINTER
    TEXT SHAPER
    BLINK

    View full-size slide

  36. PAINTER
    TEXT SHAPER



    BLINK

    View full-size slide

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

    View full-size slide


  38. pls shape in Comic Sans MS

    View full-size slide


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

    View full-size slide


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

    in sans-serif fallback???

    View full-size slide


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

    in sans-serif fallback???
    noooope.

    View full-size slide


  42. uhh in AppleColorEmoji? (a hunch)

    View full-size slide


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

    View full-size slide


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

    yay! skia, hereโ€™s a text blob !
    TM

    View full-size slide


  45. 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 full-size slide


  46. 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 full-size slide


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

    welp. i donโ€™t know.
    YASSS. hey user, i painted a โŒท !!!

    View full-size slide

  48. PRACTICAL
    SHIT

    View full-size slide

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

    View full-size slide

  50. MEOWNI.CA/EMOJI-TRANSLATE

    View full-size slide

  51. WORD ART BY @CDATA

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide



  67. function ok() {
    alert(โ€˜ ');
    }

    View full-size slide



  68. function ok() {
    alert(โ€˜ ');
    }


    View full-size slide



  69. function ok() {
    alert(โ€˜ ');
    }



    View full-size slide

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

    function ok() {
    alert(โ€˜ ');
    }


    View full-size slide

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

    function ok() {
    alert(โ€˜ ');
    }

    hi()

    View full-size slide

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

    function hi() {
    alert(โ€˜ ');
    }


    hi()

    View full-size slide

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

    function hi() {
    alert(โ€˜ ');
    }

    ()




    View full-size slide

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

    function hi() {
    alert(โ€˜ ');
    }



    ()



    View full-size slide

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

    function hi() {
    alert(โ€˜ ');
    }

    ()




    View full-size slide

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

    function \u1F43C() {
    alert(โ€˜ ');
    }




    View full-size slide

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

    function \u1F43C() {
    alert(โ€˜ ');
    }





    View full-size slide