Как вставить юникод в html

Юникод в вебе: введение для начинающих

Верите вы или нет, но существует формат изображений, встроенных в браузер. Этот формат позволяет загружать изображения до того, как они понадобились, обеспечивает рендеринг изображения на обычных или retina экранах и позволяет добавлять к изображениям CSS. ОК, это не совсем правда. Это не формат изображения, хотя все остальное остается в силе. Используя его, вы можете создавать иконки, независимые от разрешения, не требующие время на загрузку и стилизуемые с помощью CSS.

В этой статье я опишу основы Unicode (далее — Юникод) и некоторые интересные вещи, которые вы можете сделать с его помощью.

Что такое Юникод?

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

Юникод продолжает развиваться: сейчас актуальна версия 8.0 в которой более 120 тысяч символов (в оригинальной статье, опубликованной в начале 2014 года, речь шла о версии 6.3 и 110 тысячах символов).

Кроме букв и цифр, в Юникоде есть и другие символы и иконки. В последних версиях в их число вошли эмодзи, которые вы можете видеть в месседжере iOS.

Страницы HTML создаются из последовательности символов Юникода и при отсылке по сети они конвертируются в байты. Каждая буква и каждый символ любого языка имеют свой уникальный код и кодируются при сохранении файла.

При использовании системы кодирования UTF-8 вы можете напрямую вставлять в текст символы Юникода, но также можно добавлять их в текст, указывая цифровую символьную ссылку. Например, ♥ это символ сердечка и вы можете вывести этот символ, просто добавив код в разметку ♥.

Эту числовую ссылку можно задавать как в десятичном формате, так и в шестнадцатеричном. Десятичный формат требует добавления в начале буквы x , запись ♥ даст то же самое сердечко (♥), что и предыдущий вариант. (2665 это шестнадцатеричный вариант 9829).

Если вы добавляете символ Юникода с помощью CSS, то вы можете использовать только шестнадцатеричные значения.

Некоторые наиболее часто используемые символы Юникода имеют более запоминаемые текстовые имена или аббревиатуры вместо цифровых кодов — это, например, амперсанд ( & — &). Такие символы называются мнемоники в HTML, их полный список есть в Википедии.

Почему вам стоит использовать Юникод?

Хороший вопрос, вот несколько причин:

Чтобы использовать корректные символы из разных языков.
Для замены иконок.
Для замены иконок, подключаемых через @font-face .
Для задания CSS-классов

Корректные символы

Первая из причин не требует никаких дополнительных действий. Если HTML сохранен в формате UTF-8 и его кодировка передана по сети как UTF-8, все должно работать как надо.

Должно. К сожалению, не все браузеры и устройства поддерживают все символы Юникода одинаково (точнее, не все шрифты поддерживают полный набор символов). Например, недавно добавленные символы эмодзи поддерживаются не везде.

Иконки

Вторая причина использования Юникода это наличие большого количества полезных символов, которые можно использовать в качестве иконок. Например, ▶, ≡ и ♥.

Их очевидный плюс в том, что вам не надо никаких дополнительных файлов, чтобы добавить их на страницу, а, значит, ваш сайт будет быстрее. Вы также можете изменить их цвет или добавить тень с помощью CSS. А добавив переходы (css transition) вы сможете плавно менять цвет иконки при наведении на нее без каких-либо дополнительных изображений.

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

Получится следующий результат:

Образец рейтинга в Firefox

Но если вам не повезет, вы увидите что-то вроде этого:

Тот же рейтинг на BlackBerry 9000

Так бывает, если используемые символы отсутствуют в шрифте браузера или устройства (к счастью, эти звездочки поддерживаются отлично и старые телефоны BlackBerry являются здесь единственным исключением).

Если символ Юникода отсутствует, на его месте могут быть разные символы от пустого квадрата (□) до ромба со знаком вопроса (�).

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

Shapecatcher

Использование Юникода с @font-face иконками

Если вы используете иконки, подключаемые с внешним шрифтом через @font-face , символы Юникода можно использовать в качестве запасного варианта. Таким образом вы можете показать похожий символ Юникода на тех устройствах или в браузерах, где @font-face не поддерживается:

иконки Font Awesome и замещающие их символы Юникода

Слева иконки Font Awesome в Chrome, а справа замещающие их символы Юникода в Opera Mini.

Многие инструменты для подбора @font-face используют диапазон символов Юникода из области для частного использования (private use area). Проблема этого подхода в том, что если @font-face не поддерживается, пользователю передаются коды символов без какого-либо смысла.

Использование символов из области для частного использования может также вынудить Internet Explorer 8 перейти в режим совместимости, а это сродни открытию портала в ад и призванию отвратительных монстров из старых IE (подробнее эта проблема описана в статье Джереми Кита).

IcoMoon отлично подходит для создания наборов иконок в @font-face и позволяет выбрать в качестве основы для иконки подходящий символ Юникода.

IcoMoon

Но будьте внимательны — некоторые браузеры и устройства не любят отдельные символы Юникода при их использовании с @font-face . Имеет смысл проверить поддержку символов Юникода с помощью Unify — это приложение поможет вам определить, насколько безопасно использование символа в наборе иконок @font-face .

Поддержка символов Юникода

Основная проблема с использованием символов Юникода в качестве запасного варианта это плохая поддержка в скринридерах (опять-таки, некоторые сведения об этом можно найти на Unify), поэтому важно осторожно выбирать используемые символы.

Если ваша иконка это просто декоративный элемент рядом с текстовой меткой, читаемым скринридером, вы можете особо не волноваться. Но если иконка расположена отдельно, стоит добавить скрытую текстовую метку, чтобы помочь пользователям скринридеров. Даже если символ Юникода будет считан скринридером, есть вероятность, что он будет сильно отличен от своего предназначения. Например, ≡ (≡) в качестве иконки-гамбургера будет считан VoiceOver на iOS как “идентичный”.

Юникод в названиях CSS-классов

То, что Юникод можно использовать в названиях классов и в таблицах стилей известно с 2007 года. Именно тогда Джонатан Снук написал об использовании символов Юникода во вспомогательных классов при верстке скругленных углов. Особого распространения эта идея не получила, но о возможности использовать Юникод в названиях классов (спецсимволы или кириллицу) знать стоит.

Выбор шрифтов

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

Много иконок в Segoe UI Symbol или Arial Unicode MS . Эти шрифты есть и на PC и на Mac; в Lucida Grande также достаточное количество символов Юникода. Вы можете добавить эти шрифты в декларацию font-family , чтобы обеспечить наличие максимального количества символов Юникода для пользователей, у которых эти шрифты установлены.

Определение поддержки Юникода

Было бы очень удобно иметь возможность проверить наличие того или иного символа Юникода, но нет гарантированного способа сделать это.

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

Проверяйте. И обеспечивайте запасные варианты, чтобы пользователь всегда мог понять, что происходит при отсутствии нужного символа.

Юникод в письмах

Юникод можно использовать не только на веб-страницах, но и в письмах.

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

Символы Юникода могут быть эффективны при наличии поддержки. Например, эмодзи в теме письма выделяет его на фоне остальных в почтовом ящике.

Заключение

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

Список ссылок

“Пуленепробиваемые” иконочные шрифты
Символы Юникода в теме письма
IcoMoon (Генератор набора иконок @font-face на основе Юникода)
Shape Catcher (Инструмент для распознавания символов Юникода)
Unicodinator(таблица символов Юникода)
Unify (Проверка поддержки символов Юникода в браузерах)
Unitools (Коллекция инструментов для работы с Юникодом)

Как правильно вставлять символы юникода?

Везде рекомендуют использовать коды для вставки символов юникода (например ⌘ ). Чем этот способ лучше вставки через копирование самого символа?

Отслеживать
задан 3 мая 2019 в 18:25
19 1 1 серебряный знак 7 7 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Не все кодировки будут правильно «понимать» ваш символ, если вы его просто вставите. UTF-8, к примеру, поймёт, а вот другая какая-то может и кракозябры показать непонятные (так как у разных кодировок под одинаковыми символами могут быть разные «знаки/числа»). А юникод определяет связь между символами и «числами», он не зависит от кодировки. Как-то так

Отслеживать
ответ дан 3 мая 2019 в 18:45
5,004 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Специальные символы в html

Специальные символы используются в тексте документа, написанного на HTML, в случаях, когда нужно на странице сайта в тексте отобразить символ тега HTML (или другой символ) так, чтобы он не воспринимался «Интернет-Обозревателем» пользователя , как команда.

«Cпециальные символы» (или escape-последовательности) начинаются с символа амперсанда (&) и имеют вид:

&имя;
или &#DD;
где DD — код символа в Юникоде в десятичной системе счисления.
или &#xNNNN;
где NNNN — код символа в Юникоде в шестнадцатеричной системе счисления.

Как вставить специальнай символ?

Символ «уголок» (контейнер тэга) нужно отобразить на странице сайта в виде текста.

Пишем в документе на HTML:
< body color= #c0c0c0 >
Получаем на странице сайта:

Пишем в документе на HTML:
© 2020 — 2024
Получаем на странице сайта:
© 2020 — 2024

Пишем в документе на HTML:
Стоимость проезда 123 руб.
Получаем на странице сайта:
Стоимость проезда 123 руб. (123 руб. будут восприниматься без разрыва)

Cпециальные символы

Пишем в документе HTML	Результат на странице
<	Полная таблица спец. символов

Как поставить ударение в HTML-коде?

В HTML-документе знак «ударения» можно отобразить с помощью кода ́ или ́
(с использованием десятичного или шестнадцатеричного Unicode символа, соответственно).

В HTML: Амбарный замо́к ===> Результат: Амбарный замо́к
В HTML: Амбарный замо́к ===> Результат: Амбарный замо́к

В HTML: Старинный за́мок ===> Результат: Старинный за́мок
В HTML: Старинный за́мок ===> Результат: Старинный за́мок

Специальные символы и их Коды ⚒
Смайлики ��
Пиктограммы ��

Спецсимволы

Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.

Табл. 7.1. Спецсимволы

Имя	Код	Вид	Описание
		неразрывный пробел
£	£	£	фунт стерлингов
€	€	€	знак евро
¶	¶	¶	символ параграфа
§	§	§	параграф
©	©	©	знак copyright
®	®	®	знак зарегистрированной торговой марки
™	™	™	знак торговой марки
°	°	°	градус
±	±	±	плюс-минус
¼	¼	¼	дробь — одна четверть
½	½	½	дробь — одна вторая
¾	¾	¾	дробь — три четверти
×	×	×	знак умножения
÷	÷	÷	знак деления
ƒ	ƒ	ƒ	знак функции
Греческие буквы
Α	Α	Α	греческая заглавная буква альфа
Β	Β	Β	греческая заглавная буква бета
Γ	Γ	Γ	греческая заглавная буква гамма
Δ	Δ	Δ	греческая заглавная буква дельта
Ε	Ε	Ε	греческая заглавная буква эпсилон
Ζ	Ζ	Ζ	греческая заглавная буква дзета
Η	Η	Η	греческая заглавная буква эта
Θ	Θ	Θ	греческая заглавная буква тета
Ι	Ι	Ι	греческая заглавная буква иота
Κ	Κ	Κ	греческая заглавная буква каппа
Λ	Λ	Λ	греческая заглавная буква лямбда
Μ	Μ	Μ	греческая заглавная буква мю
Ν	Ν	Ν	греческая заглавная буква ню
Ξ	Ξ	Ξ	греческая заглавная буква кси
Ο	Ο	Ο	греческая заглавная буква омикрон
Π	Π	Π	греческая заглавная буква пи
Ρ	Ρ	Ρ	греческая заглавная буква ро
Σ	Σ	Σ	греческая заглавная буква сигма
Τ	Τ	Τ	греческая заглавная буква тау
Υ	Υ	Υ	греческая заглавная буква ипсилон
Φ	Φ	Φ	греческая заглавная буква фи
Χ	Χ	Χ	греческая заглавная буква хи
Ψ	Ψ	Ψ	греческая заглавная буква пси
Ω	Ω	Ω	греческая заглавная буква омега
α	α	α	греческая строчная буква альфа
β	β	β	греческая строчная буква бета
γ	γ	γ	греческая строчная буква гамма
δ	δ	δ	греческая строчная буква дельта
ε	ε	ε	греческая строчная буква эпсилон
ζ	ζ	ζ	греческая строчная буква дзета
η	η	η	греческая строчная буква эта
θ	θ	θ	греческая строчная буква тета
ι	ι	ι	греческая строчная буква иота
κ	κ	κ	греческая строчная буква каппа
λ	λ	λ	греческая строчная буква лямбда
μ	μ	μ	греческая строчная буква мю
ν	ν	ν	греческая строчная буква ню
ξ	ξ	ξ	греческая строчная буква кси
ο	ο	ο	греческая строчная буква омикрон
π	π	π	греческая строчная буква пи
ρ	ρ	ρ	греческая строчная буква ро
ς	ς	ς	греческая строчная буква сигма
σ	σ	σ	греческая строчная буква сигма
τ	τ	τ	греческая строчная буква тау
υ	υ	υ	греческая строчная буква ипсилон
φ	φ	φ	греческая строчная буква фи
χ	χ	χ	греческая строчная буква хи
ψ	ψ	ψ	греческая строчная буква пси
ω	ω	ω	греческая строчная буква омега
Стрелки
←	←	←	стрелка влево
↑	↑	↑	стрелка вверх
→	→	→	стрелка вправо
↓	↓	↓	стрелка вниз
↔	↔	↔	стрелка влево-вправо
Прочие символы
♠	♠	♠	знак масти «пики»
♣	♣	♣	знак масти «трефы»
♥	♥	♥	знак масти «червы»
♦	♦	♦	знак масти «бубны»
"	"	«	двойная кавычка
&	&	&	амперсанд
<	<		знак «меньше»
>	>	>	знак «больше»
Знаки пунктуации
…	…	…	многоточие .
′	′	′	одиночный штрих — минуты и футы
″	″	″	двойной штрих — секунды и дюймы
Общая пунктуация
–	–	–	тире
—	—	—	длинное тире
‘	‘	‘	левая одиночная кавычка
’	’	’	правая одиночная кавычка
‚	‚	‚	нижняя одиночная кавычка
“	“	“	левая двойная кавычка
”	”	”	правая двойная кавычка
„	„	„	нижняя двойная кавычка
«	«	«	левая двойная угловая скобка
»	»	»	правая двойная угловая скобка

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.