Глава 8. 15. Вставка знака рубля

Ещё 11 декабря 2013 года советом директоров Центрального банка Российской Федерации был официально утверждён новый символ рубля. Но несмотря на это, не все пользователи на страницах своих браузеров видят этот символ. Некорректное отображение знака рубля на сайте происходит из-за использования устаревшего браузера или операционной системы. В этом случае вместо символа отображается квадрат или прямоугольник. Веб разработчики не могут повлиять на рабочее место пользователя, поэтому появилось несколько способов для обхода этой проблемы.

Добавление символа рубля с помощью спецсимволов HTML

Спецсимволы HTML, или символы-мнемоники, представляют собой конструкцию SGML (англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки), ссылающуюся на определённые символы из символьного набора документа.

Для вставки символов внутрь тегов можно использовать HTML-код символа, а для использования символов в стилях, например, в качестве значения свойства content — CSS-код.

Спецсимвол, как и обычная буква, наследует цвет от цвета текста родительского элемента. Чтобы изменить цвет спецсимвола, нужно поместить HTML-код внутрь тега <span> или в content псевдоэлемента, а затем задать нужное значение свойства color.

Ниже приведёна таблица со значениями спецсимволов для знака Российского рубля.

Спецсимволы HTML

Вид	HTML-код	CSS-код	Описание
₽	& #8381;	\20BD	Российский рубль

Спецсимвол в HTML:

<p style="font-size: 1em">Раки по 5 <span>&#8381;</span></p><p style="font-size: 2em">Раки по 10 <span>&#8381;</span></p><p style="font-size: 3em">Раки по 15 <span>&#8381;</span></p>

Спецсимвол в свойстве content:

<p style="font-size: 1em">Раки по 5 <span class="rub"></span></p><p style="font-size: 2em">Раки по 10 <span class="rub"></span></p><p style="font-size: 3em">Раки по 15 <span class="rub"></span></p>.rub::before { content: "\20BD";}

Спецсимвол в разметке и в CSS-свойстве content

Такой способ имеет единственный описанный выше недостаток: в устаревшем браузере или операционной системе вместо знака рубля будет отображаться неопределённый символ.

Подменное изображение

Решение с картинкой может быть следующим: в качестве символа рубля в разметку вставляется векторное изображение, а за ним добавляется скрытое обозначение «руб», которое попадёт в буфер обмена при копировании текста. Внедрённый SVG позволяет через CSS свободно управлять размерами и цветом символа.

<p style="font-size: 1em">Раки по 5 <svg class="rub" fill="none" viewBox="0 0 8 10"> <path d="M2.17 1h2.25c1.24 0 2.25 1 2.25 2.25v0c0 1.24-1.01 2.25-2.25 2.25H2.17V1zM2.17 4v6M.67 7.33h4.28"/> </svg><span class="dot">руб.</span></p> <p style="font-size: 2em">Раки по 10 <svg class="rub" fill="none" viewBox="0 0 8 10"> <path d="M2.17 1h2.25c1.24 0 2.25 1 2.25 2.25v0c0 1.24-1.01 2.25-2.25 2.25H2.17V1zM2.17 4v6M.67 7.33h4.28"/> </svg><span class="dot">руб.</span></p> <p style="font-size: 3em">Раки по 15 <svg class="rub" fill="none" viewBox="0 0 8 10"> <path d="M2.17 1h2.25c1.24 0 2.25 1 2.25 2.25v0c0 1.24-1.01 2.25-2.25 2.25H2.17V1zM2.17 4v6M.67 7.33h4.28"/> </svg><span class="dot">руб.</span></p>.rub { height: 1.5ex;   /* полуторная высота шрифта */ stroke: #000000; /* стилизация цвета SVG */ stroke-width: 0.75; /* стилизация толщины символа SVG */}.dot { position: absolute; /* блок скрыт визуально */ text-indent: -1000em;}

Добавление знака рубля с помощью подменного изображения

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