Я не люблю и избегаю использования эмодзи в тексте. Но я люблю и постоянно использую Unicode-символы вместо иконок в элементах веб-интерфейсов. Поэтому для меня совершенно нежелательна ситуация, когда веб-браузер “заменяет” ожидаемые текстовые Unicode-символы неуместными графическими символами эмодзи. Если проблема знакома, предлагаю разобраться почему так происходит и как взять это под контроль.
Cлово “заменяет” взято в кавычки не просто так. В контексте разговора оно не совсем корректно, так как эмодзи так же являются Unicode-символами и фактической замены одного символа на другой не происходит. Проблема заключается в том, как разные системы и веб-браузеры отображают эти символы.
Эмодзи, как и обычные цифры или буквы, имеют разные визуальные представления (глифы) в зависимости от используемого шрифта. Когда веб-браузер встречает Unicode-символ (кодовую точку Unicode), он выбирает подходящий для него глиф в используемом шрифте. Если шрифт включает в себя эмодзи, веб-браузер использует именно его.
По сути, для решения проблемы “замены” эмодзи, надо найти ответ на вопрос о том, как сделать так, чтобы Unicode-символы отображались как простые текстовые символы, а не как цветные графические изображения.
Первое решение, лежащее на поверхности - использовать шрифт без поддержки графических глифов для отображения эмодзи. Это может быть специальный шрифт, или, например, моноширный шрифт Courier New.
Не смотря на логичность выбора, это решение нельзя считать надёжным. Веб-браузер попытается использовать для Unicode-символа подходящий эмодзи глиф из другого доступного шрифта, например, Segoe UI Emoji.
Следующее решение, которое стоит попробовать - вместо прямого ввода или копирования и вставки Unicode-символов, использовать соответствующие HTML-сущности.
<p>U+263A: <span>☺</span></p>
В проектах, ориентированных на работу в последних версиях веб-браузеров, можно использовать новое CSS-свойство font-variant-emoji. Это свойство определяет стиль представления для отображения эмодзи по умолчанию.
.no-emoji {
font-variant-emoji: text;
}
На момент публикации статьи, поддержка CSS-свойства font-variant-emoji веб-браузерами, ограничена последними версиями веб-браузеров на основе Chromium. Однако со временем свойство может получить широкую поддержку и его использование в реальных проектах станет безопасным.
Оптимальное на сегодняшний день решение, которое я могу посоветовать - использование специального Unicode-символа из блока Variation Selectors.
Variation Selectors (вариантные селекторы) это блок стандарта Unicode, содержащий специальные символы, которые позволяют выбирать вариант символа.
Добавив после Unicode-символа, символ U+FE0E (Variation Selector-15), можно указать веб-браузеру отображать его как текст, а не как эмодзи. При этом следует иметь в виду, что не для каждого символа эмодзи существует текстовый глиф. В этом случае, не смотря на использование вариантного селектора, всё равно будет выведено графическое изображение эмодзи.
Если, наоборот, необходимо отображать Unicode-символ как эмодзи, следует использовать символ вариантного селектора U+FE0F (Variation Selector-16).
Подводя итог, можно сказать, что вместо того чтобы пытаться полностью “запретить” эмодзи, более реалистичным подходом является попытка влияния на их отображение с помощью выбора шрифтов, установки CSS-свойства font-variant-emoji или использования специального вариантного селектора U+FE0E в HTML-коде. Однако надо быть готовым к тому, что результат может быть не идеальным, зависеть от конкретной системы и используемого веб-браузера.
Тем не менее, теперь вы знаете, как в веб-браузере взять под контроль “замену” текстовых Unicode-символов графическими эмодзи. А это значит, что можно смелее и увереннее использовать текстовые Unicode-символы в качестве элементов графического оформления веб-интерфейса.