Выводим знак рубля на сайте

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

В 2006 году Центральный Банк России наделили полномочиями по утверждению графического изображения рубля и с этого момента различные персоны и дизайнерские компании, в том числе студия Артемия Лебедева стали предлагать свои новые варианты этого символа.

Наиболее популярным и простым был символ в виде буквы Р с перечеркнутой ножкой. Он стал массово использоваться еще до официального утверждения и по результатам голосования, проведенного Центробанком в 2013 году, был официального выбран в качестве международного символа российской валюты.

Ставить российский денежный символ принято после числа.

Как ввести знак с клавиатуры

Просто так одним нажатием клавиши код рубля с клавиатуры пока не напечатать. Код символа в раскладке юникод — U+20BD. Но важно, чтобы используемый шрифт поддерживал этот знак, иначе вы увидите на этом месте в тексте просто квадратик.

Например, в MS Word напечатать знак рубля можно, если ввести «20BD» (без кавычек), а затем нажать клавишу ALT и, удерживая ее нажатой, – клавишу X. Кроме того, можно поставить символ через меню «Вставка — Символ».

Html код символа рубля

Чтобы добавить обозначение рубля на сайт в html коде нужно указать код:

Естественно, что шрифт должен содержать в своем составе этот денежный знак.

Приведу работающий пример.

В сервисе Google Fonts можно быстро найти шрифты с поддержкой этого знака. В поле Preview Text указываем код рубля (я скопировал символ из документа Word, куда вставил вышеописанным способом, поскольку так и не нашел универсального приема набрать символ unicode с клавиатуры).

Видно, что нужный нам значок поддерживают шрифты:

• PT Sans (также PT Sans Narrow, PT Sans Caption);
• PT Serif (также PT Serif Caption);
• Roboto (также Roboto Condensed);
• Rubik;
• Istok Web;
• PT Mono;
• Cormorant (также Cormorant Garamond, Cormorant Infant, Cormorant SC, Cormorant Unicase).

Подробно о подключении шрифта с google fonts написано в статье: Использование на сайте шрифтов от Google Fonts.

Применительно к нашему случаю нужно выполнить 3 шага:

1. Подключаем шрифт (помещаем куда нибудь в область header сайта инструкцию).

2. Задаем этот шрифт для соответствующего элемента.

3. Вставляем знак рубля как спецсимвол.

Создаем свой знак рубля

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

Для этого на сайте указываем:

А в таблицу стилей добавляем следующий код:

Значение line-height определяет, на какой высоте будет находится подчеркивание, а width определит ширину подчеркивания.

Чаще всего символ рубля необходим в расширениях для продажи товаров, таких как WooCommerce. Здесь применимы те же советы, что уже были даны:

• использование шрифта, поддерживающего денежный знак;
• «создание» собственного значка из буквы Р и перечеркивания.