Символ рубля на сайте

26.02.2014 12:09 Автор 
Оцените материал
(3 голосов)

История символа рубля

Знак рубля был разработан в 2007 году инициативной группой, состоящей из таких компаний, как «Дизайн-депо», «Дизайнет», «Директ-дизайн», «Имадизайн», «Леттерхед», «Паратайп», Студия Артемия Лебедева. Поэтому отдельного автора у знака нет. После этого знак рубля стал активно использоваться российскими дизайнерами в оформлении рекламы, ценников и интернет-магазинах.

11 декабря 2013 года Банком России был официально утверждён символ рубля, — это буква «Р» с дополнительным элементом в виде горизонтальной черты.

Официальное описание символа рубля, данное Банком России следующее:

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

Итак, символ рубля официально утверждён, теперь можно его использовать на своём сайте. Но главная проблема заключается в том, что позиция знака рубля в Unicode еще не утверждена. Россия внесла в Международную организацию по стандартизации заявку на включение графического символа рубля в стандарт Юникод.

В соответствии с заявкой российской стороны, для нового символа предложено выделить место U+20BD. Это следующее свободное место в блоке символов валют Юникода. На данный момент в запланированной седьмой версии стандарта знаки занимают места от 20A0 до 20BC, от знака евро до знака азербайджанского маната.

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

Отображение символа рубля

Пока что идёт процедура утверждения позиции в Unicode, можно уже сейчас использовать его на своём сайте. Есть несколько вариантов.

1. Использование специальных шрифтов

Процедура не хитрая — подключается специальный шрифт, где место обычных символов занимает спецсимвол рубля. На данный момент существует уже несколько реализаций шрифтов. В прикреплённом вложении представлен один из таких вариантов, в котором определён только символ заглавной буквы Р, но имеющий вид знака рубля. Этот специальный шрифт подключаем с помощью CSS-правила font-face:

@font-face {
  font-family: 'ALSRubl-Arial';
  src: url('alsrubl-arial-regular.eot');
  src: url('alsrubl-arial-regular.eot?#iefix') format('embedded-opentype'),url('alsrubl-arial-regular.woff') format('woff'), url('alsrubl-arial-regular.ttf') format('truetype'), url('alsrubl-arial-regular.svg#ALSRublArialRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Определяем правило для класса:

.rub-fnt { font-family: 'ALSRubl-Arial', Arial, sans-serif; }

И можно использовать:

<p>Не имей 100 <span class="rub-fnt">Р</span>, а имей 100 друзей.</p>

Не имей 100 Р, а имей 100 друзей.

2. Использование картинки

Как вариант, но я бы не стал его использовать в силу определенных причин.

3. Реализация через CSS

Самый простой и лаконичный метод. Для его реализации создаём CSS-правило:

.rub-css {
  position: relative;
}
 
.rub-css:before {
  display: block;
  content: "–";
  position: absolute;
  top: 0.08em;
}

Используем данный класс:

<p>Не имей 100 <span class="rub-css">Р</span>, а имей 100 друзей.</p>

Не имей 100 Р, а имей 100 друзей.

Демонстрация

Для сравнения два этих варианта вместе:

 Размер шрифта24px18px14px12px
Реализация через шрифты 100 Р 100 Р 100 Р 100 Р
Реализация через CSS 100 Р 100 Р 100 Р 100 Р

Какой вариант использовать — решать вам. Будем ждать когда введут долгожданный спецсимвол и нам не придётся использовать костыли для его реализации.

Похожие материалы (по тегу)

Авторизуйтесь, чтобы получить возможность оставлять комментарии