html код знака рубля

Знак рубля в 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 уб.

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

Источник

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

Задача

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

В свободно распространяемых (в том числе для использования в вебе) шрифтах 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 было отдано официальному знаку индийской рупии. Поэтому, я рекомендую использовать самый «дальний» код ⃏ для не утвержденного официально знака.

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

Источник

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

В декабре 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-код — ₽ (₽) или ₽ (₽)

Источник