Бесит, что если использовать emoji на сайте “как есть”, набирая их с клавиатуры на телефоне, или копируя откуда-то, то у посетителей на разных устройствах они будут выглядеть по-разному.
Идеально было бы заменить все эмодзи на векторные изображения одного типа, что бы страница выглядела прогнозируемо одинокого для всех посетили.
Решение есть.
Twitter twemoji
Наверняка вы знаете, что у Твиттера есть свои собственные эмодзи. В своё время Твиттер раздали их, как Open Source решение, и его может использовать абсолютно любой, где угодно, на свое усмотрение.
Да-да, эмодзи от Apple вам нравятся больше, понимаю. Мне тоже, но используем что дают, так как это быстро и честно.
Инструкция
Идем в админку вашего сайта, и подключаем скрипт в шапке сайта:
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
Тут нужно сказать, что скрипт можно забрать себе локально, если не любите cdn, в этом случае придется забирать еще и сами изображения эмодзи в формате svg. Реализовать не сложно, но я на своем сайте заморачиваться не стал.
Далее, в подвале сайта вставляем скрипт:
<script type="text/javascript">
document.body = twemoji.parse(document.body, { size: 'svg', ext: '.svg' });
</script>
Добавляем в стили сайта рекомендованные твиттером стили для таких изображений:
img.emoji {
height: 1.2em;
width: 1.2em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
Готово ?
Как это работает. После загрузки страницы, скрипт ходит по всем элементам сайта и смотрит, встретились ли там emoji. Если находит - подменяет их на svg векторные изображения, нужного формата.
Таким образом, вместо эмодзи будут отображаться однотипные для всех Twitter twemoji.
Пару слов о производительности
В большинстве случаев вам будет достаточно проходить автоматически по всем элементам сайта, на производительность это почти не повлияет.
Но нужно знать, что скрипт twemoji.parse() выполняется для каждого элемента на странице. Если у вас есть задача бороться за быстродействие (например, у вас большой проект) то предложенное мной решение вам не подходит. Лучше воспользоваться ручным парсингом emoji поштучно. Найти документацию, как реализовать ручной парсинг можно на официальном гитхабе проекта twemoji.