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

Кроссбраузерный значок рубля на CSS

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

Знак рубля уже внедрили в некоторые шрифты и в HTML-разметку. В HTML, кстати говоря, код символа:

Многие интернет-магазины, да и прочие сайты, связанные с денежными операциями, активно заменяют привычное «Руб», «RUB» и «р.» на новый знак рубля. Но есть одна проблема – не на каждом компьютере существует этот символ, и вместо символа рубля мы наблюдаем следующее:

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

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

1. Итак, первое, что нам необходимо сделать, это обернуть нашу букву в тег span:

2. Затем напишем для нее небольшой стиль:

Сохраняем и смотрим, что у нас получилось:

По-моему – очень неплохо. По желанию можете изменить размеры горизонтальной полосы, ее цвет и положение относительно буквы «Р».

Источник

Знак рубля на сайте: экспресс-метод

Задача

Без лишней головной боли начать использовать знак рубля на сайте.

В свободно распространяемых (в том числе для использования в вебе) шрифтах PT Sans и PT Serif среди символов есть и знак рубля. Если использовать эти шрифты на сайте, то для решения задачи можно обойтись без лишнего html-кода, css-бубнов, векторной графики и прочих джедайских извращений.

Гугл в помощь

У Google есть вроде как замечательный сервис Web Fonts, позволяющий очень просто и легально использовать шрифты на веб-страницах. Кириллических шрифтов там не так уж и много, но нужные нам PT Sans и PT Serif есть. При этом для каждого браузера Гугл отдает свой css-код и нужный формат файла шрифта.

Делается это до безобразия просто:

1. Подключаем css-файл c нужным нам шрифтом:

2. Задаем для элементов соответсвующий font-face:

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

В чем подвох?

Для Internet Explorer Гугл из вредности генерирует файлы, в которых отсутствует некоторые дополнительные символы, в том числе и нужный нам знак рубля.

Поэтому ничего не остается, как пойти на Fontsquirrel и скачать полный @font-face Kit нужного нам шрифта (нужно выбрать набор не Cyrillic Subset, а Don’t Subset — то есть содержащий все символы).

Подключение шрифта при этом способе занимает чуть больше времени, зато так мы покрываем весь зоопарк браузеров.

Мораль

Если Google Fonts API выйдет из бета-версии (хотя мы говорим «Гугл», подразумеваем «бета») и начнет отдавать полные наборы символов для всех браузеров, это будет самым удобным способом использовать знак рубля на сайте. А пока без Шрифтобелки не обойтись.

Лирический довесок

В шрифтах PT Sans и PT Serif знак рубля располагается под всеми символами с кодами от ₹ до ⃏. Дело в том, что на момент создания шрифта символы диапазона 20B9—20CF были свободны. И так как официально знак рубля в юникоде отсутствует, авторы разместили знак рубля сразу в 22 «ячейках».

Однако в Юникоде версии 6.0 место U+20B9 было отдано официальному знаку индийской рупии. Поэтому, я рекомендую использовать самый «дальний» код ⃏ для не утвержденного официально знака.

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

Источник

Знак рубля в HTML

8 августа 2007

Внедрить знак рубля.

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

Пока новый символ не включен в таблицы ISO и Unicode и отсутствует на компьютерах пользователей, приходится искать способы его отображения. Важно, чтобы он был масштабируемым. Необходимо также подумать об устройствах чтения с экрана и о том, что окажется в буфере обмена у пользователя, копирующего цены. Возможные решения: Flash, PNG, GIF и HTML.

Минусы флеша очевидны: у пользователя может не быть проигрывателя, фокус с текста перемещается в объект при клике, сложно изменить цвет знака.

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

Решение с картинкой может быть следующим (обозначение «руб» скрыто и попадет в буфер обмена при копировании):

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

От некоторых проблем избавит формат SVG. Это вектор, размер файла небольшой, через CSS мы можем свободно управлять цветом символа. Большой минус — необходимость внедрения объектов в текст. Пример ниже не работает в MSIE.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Если отбросить варианты с картинками, первое решение, лежащее на поверхности, — перечеркнутый текст. К сожалению, результат в MSIE ужасен. Существующие на данный момент средства CSS не дают нам возможности свободно управлять положением горизонтальной линии.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Если стандартную черту нельзя подвинуть, можно нарисовать свою. Допустим, бордером. Толщина линии в примере хорошо подходит для Firefox, но недостаточна для отображения в браузере Opera. Результат слишком непредсказуем.

Обратимся к таблицам символов. Совместим короткое тире с буквой «Р». Внедрив – через таблицы стилей, мы можем управлять его отображением при различных режимах вывода. Результат лучше, но при изменении размеров шрифта черта прыгает. Особенно в MSIE.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

В армянском алфавите существует достаточно близкий к знаку символ. Хм, тоже вариант. Пользователи Mac OS X увидят несколько отдаленное от оригинала начертание (и лишь в том случае, если поставили Additional Fonts). Но все-таки слишком бросается в глаза, что буква строчная.

Кролики по 100 ք руб.

Кролики по 100 ք руб.

Кролики по 100 ք руб.

Кролики по 100 ք руб.

Если символа нет на компьютере пользователя, то может быть стоит его туда загрузить? К сожалению, свойство font-face (CSS 2.0), не включено в CSS 2.1. Но браузер, поддерживающий загрузку шрифтов, существует — это Internet Explorer. Только он отобразит знак ниже. Остальные браузеры покажут «руб». Создав односимвольный шрифт со знаком рубля, привязанным к букве «р», мы получаем лучшее решение для пользователей MSIE.

Для просмотра этого примера необходим IE.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

Кролики по 100 p уб.

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

Источник

Как набрать знак рубля на клавиатуре

Символ рубля (₽) официально используется для представления национальной валюты — российского рубля.

Символ рубля сочетанием клавиш Alt в Windows

Существует три способа набрать знак ₽ сочетанием клавиш Alt.

Правый Alt + 8

Для написания символа рубля следует одной рукой нажать ПРАВУЮ клавишу Alt и, удерживая её, другой рукой нажать клавишу с цифрой 8 (в верхнем ряду клавиатуры). Отпустите Alt — получится знак ₽.

Alt + 8381

Если нет правой клавиши Alt или в компьютере не установлено обновление Windows, которое даёт возможность вводить символ рубля с клавиатуры, можно использовать другое сочетание клавиш — Alt + 8381. Оно не такое универсальное как AltGr + 8, но тоже рабочее.

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

Alt + X

Сочетание используется в Word. В нужном месте текста переключите клавиатуру на английскую раскладку, напишите 20BD, а затем одновременно нажмите клавиши Alt и X — код автоматически изменится на знак рубля.

Рубль в таблице символов Word

Устанавливаем курсор в нужное место текста → вкладка Вставка → Символ → Другие символы…

Шрифт: (обычный текст). Набор: денежные единицы.

Выделяем символ ₽ → Вставить.

Знак рубля в HTML

Для вставки символа рубля (₽) в HTML-документ можно использовать шрифт рубля или применить десятичный или шестнадцатеричный код.

Символ рубля в CSS

Знак рубля можно вставить в веб-документы с помощью псевдоэлементов CSS. Используйте CSS-код «\20BD» со свойством content, и символ ₽ будет вставлен после элемента в списке с ценами.

Знак рубля на Mac OS

Источник

Как установить на сайт знак рубля

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

Как установить рубль e на сайт

Рассмотрим два варианта: шрифт рубля и символ рубля.

Шрифт рубля

В 2009 году студией Артемия Лебедева был создан шрифтовой файл символа рубля.

Распаковываем архив и загружаем файлы rouble-webfont.eot, rouble-webfont.ttf и rouble-webfont.woff в папку, например — [font]. В файл стилей (css) добавляем правило @font-face для настройки шрифта рубля, указываем пути к файлам шрифта и прописываем шрифт для класса rouble.

Например, файлы расположены в папке [font].

Чтобы установить знак рубля, нужно заключить буквенное обозначение (в зависимости от используемого шрифта) в тег span класса rouble.

a — Arial Regular
b — Arial Italic
c — Arial Bold
d — Arial Bold Italic
e — Georgia Regular
f — Georgia Italic
g — Georgia Bold
h — Georgia Bold Italic
i — Tahoma Regular
j — Tahoma Bold
k — Times Regular
l — Times Italic
m — Times Bold
n — Times BoldItalic
o — Lucida Sans
p — Lucida Sans Bold
q — Verdana Regular
r — Verdana Italic
s — Verdana Bold
t — Verdana Bold Italic
u — Futura
v — Trump Mediaeval
w — ITC Studio Script

Символ рубля Юникод

Символ или знак российского рубля (₽) — типографский символ стандарта Юникод.

Юникод U+20BD
HTML-код — ₽ (₽) или ₽ (₽)

Источник