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

Emojis

Artur
December 02, 2017

 Emojis

I've met a task related to the emojis on the front-end side, so I decided to make a public talk about learned and found.

Artur

December 02, 2017
Tweet

More Decks by Artur

Other Decks in Programming

Transcript

  1. It does not make sense to have a string without

    knowing what encoding it uses. And There Ain’t No Such Thing As Plain Text. 3 About
  2. 1963-1965 - ASCII and ECMA-6, 7 bit 1982 - emoticons,

    1991 - Unicode 1994 - UTF-7 is not a Unicode 2003 - UTF-8 aka EASCII, 8 bit, 4 bytes 2006 - The Unicode Standard 5.0 #51 2017 - The Unicode Standard 10.0 History, ಠ_ಠ 4
  3. Unicode (Universal Coded Character Set) Each char/symbol has a codepoint

    65,536 code points * 17 planes = 1,114,112 cp ASCII is a first 128 symbols/chars of the UTF-8, also there’s only 95 printable characters. History 6
  4. :( :) :‑) ;) :D :P XD =) @}->-- o_O

    (*_*) ^_^ -_- ( ͡ ° ͜ʖ ͡ °) (/◕ヮ◕)/ (=^··^=) ¯\_(ツ)_/¯ Emoticons 7
  5. In 1999 the Japanese telecom NTT DOCOMO released the original

    176 emoji. Today is there around 2600+ emoji. UNICODE: Mark Davis(Google), Peter Edberg(Apple). Unicode with Emoji 8
  6. Numeric Character References 10 - decimal: & (&) 16 -

    hexadecimal: & (&) Usage HTML 13
  7. <style> . { display: block; } . { display: none;

    } </style> <b class=" " onclick="\u1F43C()"> () &#x2665; &#9829; &hearts; ♥ </b> Usage HTML/CSS 14
  8. . { /* <unicode-range> values */ unicode-range: U+26; /* 1

    codepoint */ unicode-range: U+0-7F; unicode-range: U+0025-00FF; /* range */ unicode-range: U+4??; /* wildcard range */ unicode-range: U+0025-00FF, U+4??; /*mult*/ } UsageCSS 15
  9. Number(128169).toString(16) // "1f4a9" parseInt('0000', 16) // 0 parseInt('007f', 16) //

    127 parseInt('11111111', 2) // 255 Number(255).toString(2) // "11111111" 17 Usage in JS
  10. All hexadecimal code points must be 4 characters. Use: ''.padStart(4,

    '0'); \u41 // This is invalid \u0041 // This is valid All hexadecimal code points are case insensitive. '\uD83D' or '\ud83d' Hexadecimal can be represented in two ways: '\u0041' and '0x0041' 18 Usage in JS
  11. H e l l o U+0048 U+0065 U+006C U+006C U+006F

    72 101 108 108 111 Usage in JS 19
  12. // unicode code point escapes, for U+000000 -> U+10FFFF '\u{41}'

    - 'A' // ES6: Unicode code point escapes '\u{1F4A9}' - // up to 6 hexademical digits 21 Usage in JS
  13. 'JS'.charCodeAt(0) // 74 - doesn’t work with emoji 'JS'.codePointAt(0) //

    74 - use this! (surrogate pair) '\uD800\uDC00'.codePointAt(0) // 65536 22 Usage in JS
  14. 23 [...' '] === [" ", "", " "] Usage

    in JS with ZWJ ZWJ is U+200D
  15. 24 [" ", "", " ", "", " "] .reduce((prev,

    curr) => prev + curr) === " " Usage in JS with ZWJ
  16. ' '.replace(' ', ' ') // ' '.replace(' ', '')

    // ' '.replace(' ', ' ') // Usage in JS with ZWJ 25
  17. Can i use emoji ? Edge Firefox Chrome Safari yes

    yes yes yes 29 caniemoji.com some OS fonts support But ask your font first!
  18. font-family: "Apple Color Emoji", /* iOS, MacOS - 34.3 МБ

    */ "NotoColorEmoji", /* Google (Android, Linux) - 6.92 МБ */ "Segoe UI Emoji", /* Windows - 660.45 КБ */ "Segoe UI Symbol", /* Windows */ "EmojiSymbols"; /* Open Source - 231 КБ */ Fonts 30 source
  19. Of course browsers are sup-posed to use fallback fonts.. but

    Polyfills could be done with symbol parsing and replace with a usual img. gist.github.com/mwunsch/4710561 Usage in JS 31
  20. 33

  21. • twitter-symbols all , emoji-cheat-sheet - for a GitHub, search

    icon • https://www.bram.us/2016/08/27/fun-with-javascript-and-emoji/ • https://medium.com/reactnative/emojis-in-javascript-f693d0eb79fb • https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolute ly-positively-must-know-about-unicode-and-character-sets-no-excuses/ • https://en.wikipedia.org/wiki/Plane_%28Unicode%29#Basic_Multilingual_Plane • https://www.smashingmagazine.com/2016/11/character-sets-encoding-emoji/ • http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript • http://jkorpela.fi/html/characters.html • whats-emoji , how-i-didnt-fix-in-chrome , or-how-i-didnt-fix-emoji-in-chrome Standards • https://www.unicode.org/versions/Unicode10.0.0/ and RFC3986 for urls • https://www.unicode.org/emoji/charts/emoji-zwj-sequences.html • https://unicode.org/emoji/charts-5.0/emoji-list.html and https://unicode.org/Public/emoji/6.0/ Libs emojione and twemoji and fromCodePoint polyfill About size • https://tobireif.com/posts/maximum_font_size_for_emoji/ • https://twitter.com/wesbos/status/650006363041497088 Video • https://vimeo.com/76597193 + https://mathiasbynens.be/notes/javascript-encoding • https://youtu.be/_H1s9wBOqp8 URL’s 35 freeformatter
  22. ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜

    ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜ ⬜ ⬜⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜ ⬜⬜ ⬜ ⬜ ⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜ ⬜ ⬜⬜⬜ ⬜⬜ ⬜ ⬜ ⬜ ⬜⬜⬜ ⬜ ⬜ ⬜ ⬜ ⬜⬜⬜⬜ ⬜⬜ ⬜ ⬜ ⬜⬜⬜ ⬜ ⬜ ⬜ ⬜ ⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜ ⬜⬜⬜ ⬜ ⬜ ⬜ ⬜⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ Emojilate 36