Что не так с эмоджи

Алексей Авдеев, Neuron.Digital

Что не так с эмоджи

Решаем проблему, попутно разбираясь в спецификациях Emoji и Unicode.

Emoji

👨‍💻 О себе

  1. 👨 Алексей Авдеев

Эмоджи vs эмотикон ❓

Эмотиконы

=)
:)

Эмотиконы (каомодзи)

(╮°-°)╮┳━━┳ ( ╯°□°)╯ ┻━━┻
¯\_(ツ)_/¯

Язык идеограм и смайликов

👶🚿
😡📊

Язык идеограм и смайликов

🎣🔛🐑
👉👌

Эмоджи vs
эмодзи❓

Родина эмоджи

🙇😷💮🍜🍡
🍙🍛🍣🌸👹

❓Первые эмоджи

Первые эмоджи

Клавиатуры emoji ⌨️

keyboard_ios
keyboard_galaxy
keyboard_windows

⬆️ Unicode version history

Unicode version Single emoji count delta
1.0.0 78 (+78)
... ... ...
5.2 80 (+2)
6.0 858 (+716)
... ... ...
10.0 1,144 (+56)

Unicode® Technical Standard #51

Unicode® Technical Standard #51

Mark Davis
Mark Davis (Google)
Peter Edberg
Peter Edberg (Apple)

Мод Фитцпатрика 🏻 🏼 🏽 🏾 🏿

Code point default FITZ-1-2 FITZ-3 FITZ-4 FITZ-5 FITZ-6
U+1F466: BOY 👦 👦🏻 👦🏼 👦🏽 👦🏾 👦🏿
U+1F467: GIRL 👧 👧🏻 👧🏼 👧🏽 👧🏾 👧🏿
U+1F468: MAN 👨 👨🏻 👨🏼 👨🏽 👨🏾 👨🏿
U+1F469: WOMAN 👩 👩🏻 👩🏼 👩🏽 👩🏾 👩🏿

🏳️ Флаги

🇧 + 🇾 = 🇧🇾
🇷 + 🇺 = 🇷🇺

Multi-Person Groupings

U+200D ZERO WIDTH JOINER (HTML ‍ ‍)
Code point default ⚕️ 🏫 🔧 🏭 💼 💻
U+1F468: MAN 👨 👨‍⚕️ 👨‍🏫 👨‍🔧 👨‍🏭 👨‍💼 👨‍💻
U+1F469: WOMAN 👩 👩‍⚕️ 👩‍🏫 👩‍🔧 👩‍🏭 👩‍💼 👨‍💻

http://unicode.org/emoji/charts/emoji-zwj-sequences.html

Multi-Person Groupings

👩 + ❤️ + 💋 + 👨 = 👩‍❤️‍💋‍👨
👩 + ❤️ + 💋 + 👩 = 👩‍❤️‍💋‍👩

Multi-Person Groupings

👨 + 👩 + 👧 = 👨‍👩‍👧
👩 + 👩 + 👧 + 👧 = 👩‍👩‍👧‍👧

Multi-Person Groupings

🏳 + 🌈 = 🏳‍🌈
👨‍🎨🤦‍♂️
🌐🤩🤦‍♂️

😐 Множество реализаций

🔣 Шрифты

      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 КБ */

🖼️ Или наборы картинок

  1. Facebook
  2. Twemoji (Twitter Emoji for Everyone)
  3. ВК
  4. emojidex (emojidex emoji-as-a-service)
  5. можно разобрать шрифт по символам

⛑️ Плохая поддержка

🤬 🤬 🤬

🤬 🤬 🤬

🤷 Проблемы совместимости

🤷 Проблемы совместимости

А А А А А
  1. Angry

🥅 Spec Goals

design guidelines for improving interoperability across platforms and implementations

UNICODE EMOJI 5.0

http://unicode.org/reports/tr51/

📝 Design Guidelines

While the shape of the character can vary significantly, designers should maintain the same “core” shape, based on the shapes used mostly commonly in industry practice. For example, a U+1F36F HONEY POT encodes for a pictorial representation of a pot of honey, not for some semantic like "sweet". It would be unexpected to represent U+1F36F HONEY POT as a sugar cube, for example. Deviating too far from that core shape can cause interoperability problems: see accidentally-sending-friends-a-hairy-heart-emojiexternal link.

UNICODE EMOJI 5.0

👌 Решение

      Hello, world! 👋, 🌎!
    
      Hello, world!
      <img alt="👋" src="/apple40/1f44b.png">,
      <img alt="🌎" src="/apple40/1f30e.png">!

https://github.com/Julia-Lavrova/emoji-js

👌 Решение

      parseEmoji('😍🍕👉👿💖');
    
      <img alt="😍" src="/apple40/1f60d.png" />
      <img alt="🍕" src="/apple40/1f355.png" />
      <img alt="👉" src="/apple40/1f449.png" />
      <img alt="👿" src="/apple40/1f47f.png" />
      <img alt="💖" src="/apple40/1f496.png" />

https://github.com/Julia-Lavrova/emoji-js

1️⃣ Для одиночных эмоджи

      '🤙'.charCodeAt(0).toString(16); // d83e
    
      '🤙'.charCodeAt(0).toString(16); // d83e
    
      '🤙'.charCodeAt(0).toString(16); // d83e

*️⃣ Универсальное

      '👩🏿'
      .split('')
      .reduce((result, currentChar) => {
        const code = currentChar.charCodeAt(0).toString(16);
        const code4 = `000${code}`.substr(-4);
        return `${result}\\u${code4};`
      }, ''); // \ud83d\udc69\ud83c\udfff

Что делать❓

15 стандартов

👨‍💻 Разработчикам

  1. Поддерживает ли Ваш проект эмоджи

👨‍🎨 Дизайнерам

  1. Не придумывать свою реализацию эмоджи

Материалы

  1. http://unicode.org/reports/tr51/
  2. https://emojipedia.org
  3. https://github.com/Julia-Lavrova/emoji-js

Вопросы❓