Поиск и копирование эмодзи

Что такое инструмент поиска и копирования эмодзи?#

Эмодзи выглядят как одиночные символы, но под капотом большинство из них таковыми не являются. Усмехающееся лицо 😀 — одна кодовая точка Unicode; красное сердце ❤️ — две (базовое сердце плюс селектор вариации, заставляющий его рендериться как цветной эмодзи, а не как простой текстовый глиф); флаг Китая 🇨🇳 — две буквы регионального индикатора, склеенные вместе. Когда нужен сам эмодзи — это неважно, вы просто вставляете глиф. Но как только нужна его кодовая точка для документации, HTML-сущность для веб-страницы, JavaScript-эскейп для строкового литерала или CSS-эскейп для правила content:, много-кодовые эмодзи ломают наивные инструменты, которые бьют по UTF-16-единицам и выдают испорченные суррогатные половинки.

Эта страница — каталог эмодзи с поиском, корректно обрабатывающий все эти случаи. Вы ищете по имени или ключевому слову на своём языке, просматриваете девять категорий, щёлкаете любой эмодзи и копируете его в одном из пяти форматов — глиф, кодовая точка, HTML, JavaScript или CSS — каждый сгенерирован обходом глифа кодовая точка за кодовой точкой, поэтому ❤️ и 🇨🇳 выходят правильно.

Как пользоваться#

Раскладка — боковая панель (поиск + категории) слева и сетка + панель деталей справа.

1. Найдите эмодзи. Либо вводите в поле Поиск эмодзи по названию или кодовой точке…, либо щёлкайте категорию в боковой панели (Смайлики и эмоции, Люди и тело, Животные и природа, Еда и напитки, Активность, Путешествия и места, Объекты, Символы, Флаги). Поиск сопоставляет имя и ключевые слова на вашем языке, а также английское имя и кодовую точку — поэтому heart или 1F600 работают в любой локали.
2. Щёлкните эмодзи в сетке. Панель деталей под сеткой заполняется глифом, его локализованным именем и версией Unicode.
3. Копируйте в нужном формате. Панель деталей даёт пять кнопок копирования:
   • Копировать эмодзи — сам глиф, для чата, документов или дизайнерского макета.
   • Копировать кодовую точку — форма U+... (через пробел, если их несколько), для документации или поиска Unicode.
   • Копировать HTML-сущность — десятичная числовая ссылка на символ, для вставки в сырой HTML.
   • Копировать JS-escape — брекет-эскейп ES2015, для строкового литерала JavaScript или TypeScript.
   • Копировать CSS-escape — CSS-эскейп для использования внутри content: или правила ::after.

Ключевые возможности#

• Пять форматов копирования, по клику на каждый. Никакого ручного перевода между глифом, кодовой точкой и формами эскейпов HTML/JS/CSS — каждый эмодзи доступен во всех пяти.
• Корректность на много-кодовых эмодзи. Эскейпы генерируются обходом глифа по кодовым точкам Unicode, а не по UTF-16-единицам. Красное сердце ❤️ даёт чистый \u{2764}\u{FE0F}, а не искажённую суррогатную пару.
• Учитывающий язык поиск, работающий между языками. Имена и ключевые слова локализованы, но английский тоже всегда индексирован, плюс «сырая» кодовая точка — поэтому smile, локализованное слово или 1F600 ведут к одному эмодзи.
• Девять категорий. Стандартные категории эмодзи Unicode, каждая с представительным глифом в боковой панели, чтобы можно было просматривать, когда нет поискового запроса.
• Дружественный к клавиатуре и скринридерам. Сетка — это listbox с навигацией стрелками, а панель деталей — область aria-live, объявляющая имя и кодовую точку при перемещении.

Разбор примера#

Скопируйте красное сердце ❤️ во всех пяти форматах. Щёлкните его в категории «Символы» (или ищите heart), и панель деталей покажет:

• Эмодзи: ❤️
• Кодовая точка: U+2764 U+FE0F
• HTML: ❤️
• JS: \u{2764}\u{FE0F}
• CSS: \2764 \FE0F

Обратите внимание: кодовых точек две, а не одна. U+2764 — базовое сердце (простой текстовый символ ещё до появления эмодзи); U+FE0F — селектор вариации-16, кодовая точка нулевой ширины, единственная работа которой — сказать рендереру: «покажи предшествующий символ в его красочной эмодзи-форме, а не как чёрный текстовый глиф.» Уберите селектор — и на некоторых платформах появится текстовое сердце; оставьте — и получите красный эмодзи. Каждый формат здесь сохраняет обе кодовые точки, поэтому вставка HTML-сущности в страницу всё равно отрисует цветное сердце.

Сравните с усмехающимся лицом 😀 — это одна кодовая точка (U+1F600). Его формы схлопываются в 😀, \u{1F600} и \1F600 — по одному эскейпу, потому что кодировать одну точку. Различие между ними — ровно то, почему важен инструмент, обходящий кодовые точки (а не предполагающий «один глиф = одна кодовая точка»).

FAQ#

В каком формате копировать для моего случая?#

Для сообщения в чате, документа или дизайн-макета копируйте Эмодзи — глиф универсален. Для технического документа или баг-репорта со ссылкой на конкретный символ копируйте Кодовую точку (U+1F600). Для исходного HTML HTML (😀) безопаснее всего — не ломается проблемами кодировки. Для строки JavaScript или TypeScript — JS (\u{1F600}). Для значения CSS content: — CSS (\1F600).

Почему у красного сердца две кодовые точки?#

Потому что ❤️ — это последовательность, а не одиночный символ. Базовая кодовая точка U+2764 — текстовое сердце; U+FE0F — селектор вариации, запрашивающий эмодзи-стиль отображения. Некоторые эмодзи идут дальше и используют соединитель нулевой ширины, чтобы слить несколько глифов в один (так строится семейный эмодзи), а флаги — всегда пара букв регионального индикатора. Этот инструмент обходит глиф по кодовым точкам перед генерацией эскейпов, поэтому каждая кодовая точка в последовательности сохранена.

Почему \u{1F600}, а не 😀?#

Оба — корректные JavaScript-представления одного эмодзи, но работают по-разному. 😀 — суррогатная пара, две UTF-16-кодовые единицы, что-то значащие только вместе: старый способ кодировать символы выше U+FFFF. \u{1F600} — кодовый эскейп ES2015, который записывает фактическую кодовую точку напрямую и куда легче читается. Этот инструмент выдаёт кодовую форму, потому что она однозначна и современна; если нужна суррогатная форма, значение кодовой точки точно скажет, что конвертировать.

Эмодзи выглядит иначе на телефоне, чем на компьютере — почему?#

Unicode определяет, что каждый эмодзи значит, но каждая платформа (Apple, Google, Microsoft, Samsung) рисует для него собственную графику, поэтому одна кодовая точка рендерится разной картинкой. Кодовая точка, HTML-сущность и каждый эскейп идентичны между платформами — различаются только пиксели. Если критична точная визуальная согласованность (скажем, бренд-кампания), вам нужно поставлять собственный набор картинок эмодзи, а не полагаться на платформенный шрифт; для большинства случаев подходит нативный рендеринг платформы.