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

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

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

Символ рубля сочетанием клавиш 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

Источник

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

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

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

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

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

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

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

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

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

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

Источник

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

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

Источник

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

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

В 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. Здесь применимы те же советы, что уже были даны:

Источник

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

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

Загружаем шрифт «rouble.otf» на сайт и подключаем в CSS стилях.

На сайте выводим знак следующим образом:

В шрифте «rouble» английская буква «i» отрисована как знак рубля начертанием «Tahoma Regular». Для другого начертания достаточно изменить букву.

Номер в Юникоде U+20BD
HTML-код ₽
CSS-код \20BD

Спасибо! Классное решение!

1) Ставим в WooCommerce шрифт по ссылке автора выше. Можно через бесплатный плагин Custom Fonts.
2) В теме Вордпресса через редактор темы вставляем в Style.css код автора. В коде меняем путь до шрифта, загруженного через плагин.
3) Вставляем в functions.php код из ссылки во втором абзаце моего поста. В нем меняем class на тот, что у автора.
4) Сохраняем. Радуемся. Теперь в вашем woocommerce-магазине будет отображаться значок рубля в любом браузере.

Примечание: Если у вас где-то отображается буква i, а не значок рубля, значит у вас темой выводится заглавная буква — меняем через CSS на прописную.

Источник