Как сделать смайлики в html

Как вставить эмодзи в HTML?

Эмодзи появились в течение последних тридцати лет и стали чрезвычайно популярными с использованием смартфонов. Хотя изначально молодые люди использовали смайлики в неформальном чате и обмене мгновенными сообщениями, в настоящее время стало обычным использование смайликов в формальном общении. Если вы веб-разработчик, блоггер или владелец сайта, вы также можете вставить смайлики в HTML, как и любой другой текстовый контент. Это сделает ваш контент привлекательным для читателей при чтении в браузере.

Понимание Emoji

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

Не имея клавиш на клавиатуре, давайте посмотрим, как вы можете вставить эмодзи в HTML.

Кодовая точка Юникода

Цель консорциума Unicode — сделать эмодзи стандартными символами, используемыми на всех устройствах и на всех языках. Чтобы выполнить эту задачу, они назначат уникальный код для каждого символа эмодзи с представлением по умолчанию. Разработчики приложений и операционных систем могут использовать этот код для использования представления по умолчанию или настройки внешнего вида. Например, U + 1F609 — это код для популярного эмодзи Winking Face. Вы можете получить кодовые точки из официальная страница смайликов Unicode.

Как видите, кодовая точка — это не что иное, как шестнадцатеричный код в формате «U + шестнадцатеричный».

Вставить эмодзи в HTML

Вы можете использовать этот шестнадцатеричный код в HTML или преобразовать этот шестнадцатеричный код в десятичный формат и использовать. Эти коды обычно называются escape-объектами HTML или escape-строками. Давайте посмотрим, как правильно использовать эти коды на веб-странице HTML.

Определение UTF в HTML

Как уже упоминалось, первый и важный шаг — убедиться, что в вашем HTML-документе есть метатег charset, как показано ниже:

Полный HTML-шаблон должен выглядеть примерно так:

Обязательно используйте объявление кодировки символов сразу после тега заголовка. Это даст указание браузерам интерпретировать шестнадцатеричные и десятичные escape-строки как правильные символы эмодзи.

HTML-теги для использования с эмодзи

Поскольку смайлики являются текстовыми символами, вы можете использовать любые связанные с текстом HTML-теги для вставки смайлов. Теги абзаца и диапазона — это два простых варианта:

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

Использование шестнадцатеричного кода в HTML

Давайте возьмем тот же пример смайлика Winking Face. Вы можете использовать следующий формат шестнадцатеричного кода в HTML для вставки эмодзи.

Для ввода шестнадцатеричного кода можно использовать заглавные или строчные буквы. Это даст результат, как показано ниже.

Десятичный код эмодзи в HTML

Вместо шестнадцатеричного кода вы можете использовать десятичный код как escape-строку с указанным ниже форматом.

Результат будет тот же, что и выше. Единственное отличие состоит в том, что вы можете удалить «x» в синтаксисе при использовании десятичного кода.

Прямая вставка эмодзи в HTML

Хотя два вышеуказанных метода просты в использовании, они не будут работать во всех случаях. Проблема в том, что не все смайлы имеют единую кодовую точку. Есть много символов эмодзи, содержащих комбинацию кодовых точек. Например, код эмодзи ученого — U + 1F9D1 U + 200D U + 1F52C, который нельзя ввести с помощью вышеуказанных методов.

Самый простой вариант — скопировать и вставить нужный смайлик между тегами HTML.

Теперь, когда вы можете задать вопрос, откуда вы можете скопировать все эти символы эмодзи:

Редакторы HTML-документов

Большинство людей используют текстовый редактор для подготовки HTML-документа. Все текстовые редакторы, такие как «Блокнот», «Блокнот ++», «TextEdit», «Скобки» и т. Д., Поддерживают вставку эмодзи, как описано выше. Хотя редакторы, такие как Блокнот, будут отображать смайлы в обычном черно-белом цвете, они будут отображаться сплошным цветом при отображении в браузере.

Обязательно сохраните документ в формате UTF-8.

Выберите формат UTF-8

Ниже приведен пример кода в редакторе TextEdit и его отображение в браузере Google Chrome.

Emoji в TextEdit и Chrome

Если вы используете приложение для создания своей HTML-страницы, вы можете использовать метод прямой вставки или сочетание клавиш. Помните, что некоторые системы управления контентом, такие как WordPress, используют PHP вместо HTML. Подробнее о вставке эмодзи в WordPress вы можете узнать в отдельной статье.

Отображение новых эмодзи

Как уже упоминалось, внешний вид смайлов может отличаться в зависимости от кодировки символов, используемой этим приложением. Например, Microsoft Edge, Firefox и Chrome могут отображать одни и те же эмодзи в разных форматах. Помимо этого фактора, вы обнаружите, что некоторые символы эмодзи будут отображаться в виде квадратного поля или отображать несколько символов. Это происходит, когда браузер не поддерживает символ смайлика. Unicode выпускает новые смайлики каждый год, и браузерам нужно время, чтобы принять новые символы. До этого времени вместо смайликов вы увидите рамку.

Например, смайлик «Сердце в огне» будет выглядеть как два символа ❤️‍🔥. Вы можете найти все новые символы эмодзи, отмеченные символом ⊛ на официальной странице Unicode. Это означает, что браузеры могут не поддерживать эти символы должным образом, и вам следует избегать их использования на своей HTML-странице.

Источник

Эмоции.js

В статье описывается опыт создания текстового поля с возможностью вставки смайлов, проблемы которые мне встретились и их решения, а так же ссылка на репозиторий с готовым jQuery плагином. Если вам интересно, прошу под кат.

Во время разработки моего первого проекта мне поставили задачу, создать чат со смайлами. Основной функционал чата был готов, но приступив к смайлам у меня возникла проблема, я не мог вставить смайл в текущую позицию курсора, получалось только в начало или конец текстового поля. Опыта у меня было ноль, как в программировании так и в поиске нужной информации, поэтому не смог найти ничего «работоспособного» и тем более готовых решений. Помучавшись две-три недели я сдался и пришлось сказать ненавистные мне слова «Я не могу это реализовать».

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

Поиски готового решения снова закончились безрезультатно, но с документацией было уже намного лучше, узнав о document.getSelection() тут же кинулся писать код и конечно же встретил еще несколько проблем и как всегда на одну из них ушло больше всего времени.

Нашел примерно такое решение

Что было очевидно, при клике на смайл фокус переходил к нему и нужный нам контент вставлялся в него, а не в наше текстовое поле. Решение было простым, запретить фокусироваться на блоке с эмоциями.

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

После прочтения замечательной статьи от bur все немного прояснилось.
Написал функцию которая вставляет курсор после элемента, решение оказалось простым.

На данный момент это jQuery плагин и поддерживается браузерами IE9+. В ближайших планах переписать код без использованием jQuery и с поддержкой старых браузеров, да и код написан не продумано, без особой гибкости. Буду рад если кому то сэкономил время.

Update
Код переписан на нативный js, скрипт оптимизирован, смайлы перемещены в одну картинку + добавлен генератор карты смайлов (на php), который из папки со смайлами делает одну картинку с css файлом

Источник