Код рубля 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. Результат слишком непредсказуем.

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

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

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

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

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

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

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

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

В 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 сайта инструкцию).

Знак рубля в 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. Результат слишком непредсказуем.

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

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

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

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

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

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