Почему мои эмоджи выглядят по-разному в разных браузерах? Что делать, если дизайнеры говорят, что все смайлики должны выглядеть, как на Айфоне? Решаем проблему, попутно разбираясь в спецификациях Emoji и Unicode.
Доклад в программе WSD Минск, 21 октября 2017
Доклад в программе FrontendConf2018
История доклада началась с того, что у нас появился проект, где нужно было выводить в браузер посты из социальных сетей. В социалки постят картинки, видео, музыку и всякое разное, но мы договорились, что выводить будем только текст. Но и тут всё оказалось не очень просто. Тексты могут содержать упоминания. Их мы решили просто вырезать. Потом дошла очередь до кросбраузерного тестированию, и вот тут нас ждал сюрприз. Оказалось, что дизайнерам очень не нравятся скриншоты проекта, сделанные на Windows. Эмодзи, которыми пестрят сообщения в социальных сетях отображаются совершенно не "как нужно". Пришла пора погрузиться в теорию и разобраться, что же не так с эмоджи. Приступим.
Эмодзи - это язык идеограм и смайликов, где вместо слов используются сочетания картинок. Он появился в Японии и распространился по всему миру.
Первые Emoji появились в 1999 году в Японии, использовались операторами мобильной связи и работали на проприетарных стандартах.
Начиная с 2010 года, некоторые набор символов эмодзи были включены в Unicode, стандартную систему для индексирования символов, что позволило использовать их за пределами Японии и стандартизировать в разных операционных системах.
Сотни символов эмодзи были закодированы в Unicode 6.0, выпущенной в октябре 2010 года
Ядро эмодзи, установленное в Unicode 6.0, состояло из 722 символов, из которых 114 символов соответствуют последовательностям одного или нескольких символов в стандарте Unicode до 6.0, а остальные 608 символов сопоставляются с последовательностями одного или нескольких символов, введенных в Unicode 6.0.
С ростом популярности эмодзи их количество только прибывало. Текущая версия Unicode 10.0 насчитывает 1144 одиночных символов эмоджи, но многие эмоджи кодируются последовательностью символов. Так что на самом деле их в разы больше.
В августе 2015 года была опубликована спецификация Emoji Version 1.0, которая включала в себя все эмодзи, добавленные в Unicode до 2015 года. Текущая версия спецификации Emoji - 5.0, релиз 18 мая 2017. Готовится шестая версия.
Состовляют эту спецификацию подкомитет Unicode Emoji, который является подкомитетом Технического комитета Unicode. Нынешние сопредседатели - Марк Дэвис (Google) и Питер Эдберг (Apple).
Спецификации - это здорово, но давайте посмотрим, что у нас с поддержкой.
Эмодзи отображаются при помощи шрифтов, где есть их поддержка. Для разных операционных систем это разные шрифты. Есть несколько открытых шрифтов, которые можно устанавливать в систему для поддержки эмодзи.
font-family: "Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";Кроме того, хорошо бы иметь клавиатуру для эмодзи для возможности их удобно использовать. Такие клавиатуры присутствуют в Android с 4.3, в Windows c 8.1, в iOS c 5, в OS X c 10.7 Lion. Не очень трудно самому написать такую клавиатуру.
Facebook, Twitter, VK заменяют все unicode эмодзи, используемые на своих сайтах, своей собственной графикой. Twitter выпустил Twemoji, который является их графикой эмодзи вместе с библиотекой Javascript для их обработки
Как видим, даже при наличие четких спецификаций, поддержка сильно различается, и гиганты стремятся использовать свои собственные наборы графики.
- Давайте-ка выберем шрифт
Вы можетесь полагаться на систему при рендеринге эмодзи, но тогда полностью теряете контроль над их внешним видом. Вы можете подключить свой шрифт, но такие шрифты достаточно объемные для передачи по сети.
- Эмодзи часто являются причиной недопонимания
Если положиться на систему при рендеринге эмодзи, то одни и те же эмодзи могут выглядеть настолько по-разному, что пользователи не поймут друг друга.
Мы приняли решение не выпендриваться и поступить как крупные веб-сервисы, контент с которых мы используем.
-
Подготавливаем набор поддерживаемых эмодзи в виде нужных нам картинок и кладем в проект или на CDN.
-
Пишем парсер, заменяющий символы эмодзи на нужный тег IMG
-
Радуемся кросбраузерности
Теперь остается только вовремя добавлять новые картинки в соответствии со спецификацией Emoji.
Конечно, не правильно.
Никакой проблемы не было, если бы спецификация обязала всех вендоров использовать один шрифт для рендеринга эмодзи. Сейчас ситуация похоже на ту, как несколько лет назад каждый производитель мобильных телефонов делал собственные форматы зарядных устройств.
Когда я набираю на клавитуре символ "А", я ожидаю, что его прочитают именно как "А", даже если он будет отредерен другим шрифтов. С эмодзи все не так, "удивление" в разных шрифтах выглядит совершенно по-разному.
Нам остается как-то фиксировать набор эмодзи, доступный для использования.