20 января 2016  /  Фронтенд

Фоллбэчим Emoji

Emoji набирают популярность. В блоге я тоже использовал их несколько раз, но получил отзыв о том, что они не везде показываются. На тот момент я прикрутил к сайту Twemoji, но мне не нравилось что они заменяют стандартные на iOS и OS X.

У пользователя два варианта развития событий с эмодзи:

1. Не поддерживаются вообще (показываются квадратики)
2. Поддерживаются, но не красивые (стандартные в некоторых ОС)

Мы можем решить эту проблему, определив поддержку эмодзи и ОС пользователя.

Определяем поддержку эмодзи

var emojiSupported = (function() {
  var node = document.createElement('canvas');
  if (!node.getContext || !node.getContext('2d') ||
      typeof node.getContext('2d').fillText !== 'function')
    return false;
  var ctx = node.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '32px Arial';
  ctx.fillText('\ud83d\ude03', 0, 0);
  return ctx.getImageData(16, 16, 1, 1).data[0] !== 0;
})();

Определяем Apple девайсы

var isMacLike = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)?true:false;

После того, как мы определили на чем сидит пользователь и поддерживаются у него эмодзи мы сможем решить эту проблему с помощью Twemoji.

if (!emojiSupported || !isMacLike) {
	// загрузить Twemoji и обработать документ
	// twemoji.parse(document.body)
}

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.