Twitter открывает исходный код движка, заменяющего эмоджи на картинки

Речь здесь пойдёт о символах-картинках и о том, как отображать их.

По-японски они называются «絵文字» (где «絵» означает «картинка», а «文字» — «символ») или «えもじ», и произношение этого названия можно передавать разными способами: по Хэпбёрну — «emoji», по Поливанову — «эмодзи», в киричзи у Тассадара — «эмочзи», по Сергею Грису — «эмоджи» через мягкий «жи». Этот последний вариант мне больше всего нравится, его-то я и стану использовать и в заголовке, и в тексте.

Что такое эмоджи? Это миниатюрные пиктограммы и идеограммы, которые можно вставлять в текст почти так же, как и буквы.

Эмоджи многочисленны. Первый набор эмоджи (который придумал Курита для технологии i-mode в 1998 или 1999 году) содержал 172 символов, состоявших всего-навсего из 12×12 пикселов. Через десять лет в Unicode 6.0 (2010 г.) было ужé 722 эмоджи, а стандарт нынешнего года (Unicode 7.0) дополнил их число ещё примерно четвертью тысячи эмоджи.

Эмоджи разнообразны. Среди них есть знаки эмоций (смайлики круглоголовые или со звериными ушками, а также различные жесты и позы), знаки Зодиака, шахматные фигуры, грани игральной кости, масти карт, любовные сердечки, священные символы, некоторые значки компьютерного интерфейса (GUI), стрелочки, галочки, крестики (прямые и косые), звёздочки, снежинки, обозначения разных родов транспорта, миниатюрные изображения современных элементов бытовой техники бытовых и технических приборов, орудий и инструментов, обозначения различных вариантов прогноза погоды, различных растений, цветов, зверушек, блюд (в основном японской национальной кухни), фаз луны, часов дня, празднеств, времён года, музыкальных инструментов, спортивных состязаний, аттракционов, различных зданий (гостиничных, вероисповедных, больничных, фабричных…), и так далее, и так далее.

А выражение «почти так же» я чуть выше употребил потому, что эмоджи всё же нельзя в полной мере считать обычными символами. На то есть две причины.

Во-первых, в кодировке Unicode код большинства эмоджи записывается более чем четырьмя шестнадцатеричными цифрами (символы Unicode, обладающие этим свойством, иногда принято называть «астральными», и к числу их относятся не только эмоджи), и в кодировке UTF-16 им соответствует не два, а четыре байта. Эта тонкость кодирования в некоторых обстоятельствах (например, в свойстве «.length()» у строки в языке JavaScript) приводит к тому, что один эмоджи считается за два обычных символа во время подсчёта общей длины строки, в том числе — по отношению к твиттеровскому ограничению (140 символов на одну микроблогозапись), в том числе — в официальном приложении Twitter для Android, насколько я мог заметить.

Во-вторых, символы эмоджи задуманы как состоящие из нескольких частей разного цвета (этим они отличаются от обычных символов обычного текста, целиком принимающих цвет текста). Если вывод текста на экран осуществляется движком, не имеющим никакого представления об этой особенности эмоджи, то тогда эмоджи становятся монохромными (например, чёрно-белыми в чёрном тексте на белом фоне) и производят несколько худшее (менее узнаваемое) впечатление (потому что читатель вынужден полагаться только на форму, но не на цвет — как если бы был жертвою дальтонизма).

Поддержка эмоджи есть далеко не везде.

Браузер Firefox полагается на встроенный движок вывода текста, и прямо сейчас выводит эмоджи всегда одноцветными. Некоторые другие браузеры для вывода текста, наоборот, полагаются на возможности операционной системы — и тогда поддержка эмоджи зависит от версии операционной системы.

В системе Android поддержка эмоджи появилась в версии 4.4 (в конце 2013 года).

В системах Apple поддержка эмоджи в соответствии с Unicode началась в iOS 5 (на мобильных устройствах) и в OS X Lion (на остальных), то есть в 2011 году; до этого времени эмоджи было меньше, да и кодировка их была другою.

В системе Windows поддержка полноцветных эмоджи появилась в Windows 8.1, но отображения монохромных эмоджи можно добиться в более ранних версиях Windows, установив на них шрифт, содержащий эти символы (майкрософтовский шрифт Segoe UI Symbol, например).

Строго говоря, любой открытый и свободный шрифт, содержащий множество эмоджи (ну, например, шрифт Gdouros Symbola) можно добавить к себе в операционную систему и пользоваться. Однако есть две важные проблемы: во-первых, в некоторые системы трудно или невозможно добавить новый шрифт (таковы, например, Android и Chrome OS), а во-вторых, эмоджи будут монохромными, если система не поддерживает также и многоцветность их.

Глядя на такое безобразие, в Твиттере придумали действенный костыль на языке JavaScript, способный прямо во браузере подменять обыкновенные эмоджи (символы Unicode) на такие картинки (в формате PNG), на которых соответствующий символ нарисован в готовом и правильном (цветном) виде. Картинки для этой цели были изготовлены The Iconfactory — и 872 PNG-файла в нескольких размерах (16×16, 36×36, 72×72), и векторные аналоги их. Такой подход до известной степени позволил обойти проблему отображения цветных пиктограмм и идеограмм во браузерах.

Недавняя же новость заключается в том, что 6 ноября (в четверг на прошлой неделе) в Twitter (уступая просьбам общественности) открыли исходный код своего движка эмоджи, выложили исходный код на GitHub.

Без промедления (в тот же день) твиттеровское средство замены эмоджи на картинки запустили в Wordpress.

Без промедления (в тот же день) и самому движку, и иллюстрациям был предоставлен бесплатный хостинг на MaxCDN, так что подключить их к себе можно несложным кодом:

<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>

(Сразу скажу, что замена эмоджи на картинки происходит не автоматически: подключённый код придётся ещё и вызвать, передав ему джаваскриптовую строку или элемент DOM.)

Установка готового пакета к себе на сайт (посредством bower, component или npm) также поддерживается.

Есть страница предпросмотра, на которой можно ознакомиться с видом всех изображений эмоджи Твиттера (The Iconfactory), увидеть работу движка замены.

Во блоге Wordpress также упоминается о существовании сайта, на котором можно ознакомиться с тем видом, который эмоджи имеют в различных операционных системах и на различных устройствах.