Кроссбраузерный значок рубля на CSS
Как известно из различных источников, в недалеком 2013-м году рубль, как и многие другие валюты, обзавелся собственным символом.
Знак рубля уже внедрили в некоторые шрифты и в HTML-разметку. В HTML, кстати говоря, код символа:
₽ или
₽ Многие интернет-магазины, да и прочие сайты, связанные с денежными операциями, активно заменяют привычное «Руб», «RUB» и «р.» на новый знак рубля. Но есть одна проблема – не на каждом компьютере существует этот символ, и вместо символа рубля мы наблюдаем следующее:
И такая картина может быть у большинства ваших клиентов. А исправлять это нужно как можно скорее, ведь без присутствия соответствующего знака валюты мы вводим в заблуждение ваших покупателей и, тем самым, теряем драгоценных клиентов.
Сегодня я покажу вам, как с помощью стандартной буквы «Р» и CSS можно получить значок рубля, который будет отображаться на всех устройствах правильно, как это и должно быть.
1. Итак, первое, что нам необходимо сделать, это обернуть нашу букву в тег span:
<span>Р</span>2. Затем напишем для нее небольшой стиль:
.rub {
line-height: 5px;
width: 0.4em;
border-bottom: 1px solid #000;
display: inline-block;
} Сохраняем и смотрим, что у нас получилось:
По-моему – очень неплохо. По желанию можете изменить размеры горизонтальной полосы, ее цвет и положение относительно буквы «Р».
Знак рубля на сайте: экспресс-метод / Habr
Задача
Без лишней головной боли начать использовать знак рубля на сайте.
Идея
В свободно распространяемых (в том числе для использования в вебе) шрифтах PT Sans и PT Serif среди символов есть и знак рубля. Если использовать эти шрифты на сайте, то для решения задачи можно обойтись без лишнего html-кода, css-бубнов, векторной графики и прочих джедайских извращений.
Гугл в помощь
У Google есть вроде как замечательный сервис Web Fonts, позволяющий очень просто и легально использовать шрифты на веб-страницах. Кириллических шрифтов там не так уж и много, но нужные нам PT Sans и PT Serif есть. При этом для каждого браузера Гугл отдает свой css-код и нужный формат файла шрифта.
Делается это до безобразия просто:
1. Подключаем css-файл c нужным нам шрифтом:
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" />
2. Задаем для элементов соответсвующий font-face:
.price {
font-family: 'PT Sans', serif;
}3. Вставляем знак рубля как спецсимвол:
<span>999 ⃏</span>В чем подвох?
Для 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 было отдано официальному знаку индийской рупии. Поэтому, я рекомендую использовать самый «дальний» код ⃏ для не утвержденного официально знака.
Сам символ рубля уже есть во многих страндартных гарнитурах. И даже если вы видите , это не означает, что файл шрифта у других пользователей тоже содержит такой знак.
Знак, символ Рубля: ₽ | на клавиатуре: Правый Alt + 8 | Код валюты: RUB и 643 по ISO 4217 — www.statdata.ru
Название:ruble sign
HTML-код:₽ или ₽
Описание процесса официального утверждения [1]
С 5 ноября по 5 декабря 2013 года Банк России провёл на своём сайте анонимный опрос: пользователи интернета, которые продекларировали, что им исполнилось 18 лет, могли выбрать один из пяти знаков, проголосовать против всех и пятьюстами символами, включая пробелы, прокомментировать свой выбор. По итогам опроса было зафиксировано почти 280 тыс. кликов, которые распределились следующим образом:первое место — более 61 %;
второе место — около 19 %;
третье место — 5,5 %;
четвёртое место — 4,5 %;
пятое место — 1,9 %;
против всех — менее 8 %.
При этом варианты-лидеры не названы. Поскольку опрос был анонимный и не требовал даже регистрации на сайте, методика учёта повторных голосов и, соответственно, смысл процентного распределения кликов между неизвестными знаками-кандидатами Банк России не разъяснил. В целом же понять предпочтения интернет-аудитории можно по открытым итогам параллельных голосований, которые проходили на нескольких других сайтах по тем же знакам, например, на сайтах агентства «Прайм» или Российской газеты. Лидировал дизайнерский знак — «Р» с перечёркнутой ножкой.
Ещё в первый день опроса один из сотрудников Банка России в беседе с корреспондентом газеты «Известия» сообщил, что «для регулятора это не столько голосование, сколько сбор мнений и комментариев… Голоса без текстовых комментариев относительно сделанного выбора учитываться не будут… Целью обсуждения является выявить какие-то нюансы, например, не оскорбляют ли данные символы чьих-то религиозных чувств, не носят ли расового подтекста и не являются ли уже употребимыми в каком-либо ещё качестве». Некоторые избранные комментарии Банк России начал публиковать с 18 ноября. Как сообщила пресс-служба банка, эти комментарии — «типичные мнения о каждом из пяти предложенных символов».
Состав рабочей группы, подготовившей кандидатов к голосованию, полный список критериев включения знаков в шорт-лист, критерии, сроки и порядок финального выбора символа рубля на сайте Центрального банка Российской Федерации не указывались. Никак не описаны каналы сбора мнений граждан России, не использующих интернет, а это более половины совершеннолетнего населения страны. По итогам опроса Банк России сообщил, что «внимательно проанализирует все оставленные на сайте отзывы и учтёт их при принятии решения», однако сроки принятия этого решения так и не были названы.
Как отмечается на сайте банка, «рабочая группа Банка России рассмотрела более тысячи обращений от граждан и организаций с предложениями разнообразных написаний графического обозначения рубля, изучила идеи интернет-сообщества. Среди них были отобраны пять наиболее часто предлагаемых вариантов». Между тем многие отечественные средства массовой информации отмечают явное отсутствие в шорт-листе знаков на основе латинской буквы «R», в частности, победивших в некоторых конкурсах символов, авторами которых являются Тагир Сафаев (перечёркнутая «R») и Владимир Ефимов («R» с удвоенной диагональной ножкой). Так, в 2006 году Всероссийский центр изучения общественного мнения и газета «Известия» попросили экспертов отобрать 13 наиболее интересных знаков, которые затем ВЦИОМ представил москвичам на четырёх фокус-группах, выяснив, что 4 знака оставили москвичей равнодушными, 3 были признаны неподходящими, 4 — «амбивалентными». Лишь два знака вызвали интерес у опрошенных — именно основанные на латинице проекты Сафаева и Ефимова. Итоги исследования были представлены 14 июня на круглом столе «Каким быть знаку рубля?»
11 декабря 2013 года символ рубля был официально утверждён советом директоров Центрального банка Российской Федерации. Победителем стала буква «Р» с горизонтальной чертой, которая набрала более 61 % голосов.
Знаки, по которым проводился опрос Центрального банка Российской Федерации
Символ рубля на монетах и марках
Такие монеты были выпущены в обращение 17 июня 2014 года: памятные монеты из серебра номиналом 3 рубля, а также монеты из стали с никелевым гальваническим покрытием номиналом 1 рубль. Серебряные монеты выпущены ограниченным тиражом: с качеством «пруф» 500 штук, качеством «анциркулейтед» 1000 штук. Монеты достоинством 1 рубль выпускаются в рамках эмиссионной программы тиражом 100 миллионов штук. Описание монеты на этой странице.
Монета 2014 года «1 Рубль».
Монета 2014 года достоинством 3 рубля.
С 2015 года символ рубля используется для обозначения номинала на почтовых марках и блоках.
Знаки валют, символы html коды денежных валют € $ £ ¥
$ Символы валют |
♏ Знаки зодиака |
ღ Сердечки |
☂ Погода |
✘ Закрыть
✔ Галочки |
➪ Стрелки |
✙ Кресты |
❞ Кавычки |
✂ Ножницы |
⌛ Часы
✍ Рука |
♫ Ноты |
✰ Звезда |
❄ Снежинка |
❀ Цветок
✐ Карандаш
Ⅶ Римские цифры | ❼ Цифры в кружочках | Ⓐ Буквы в кружочках
± Математические | ✈ Транспорт | ☎ Связь | ☢ Опасность
⛸ Спорт | ⛀ Шашки | ♣ Карточные масти | ♚ Шахматные фигуры
♅ Символы планет | ⚤ Мужской и женский знаки | ☯ Учения религия
Основные коды html денежных валют Dollar, Euro, Pound, Yen, Yuan, Ruble, Hryvnia
Часто используемые символы HTMLЕвро | Доллар | Фунт | Йена | Рубль | Гривна | ||
Символы html | Код html | Спецсимволы html (Описание) |
| $ | $ | Знак Доллара (на клавиатуре Shift+4) |
| € | € | Евро (html код) |
| £ | £ | Фунт (символ фунта стерлингов) |
| ¥ | ¥ | Йена (знак Японской йены html) |
| ￥ | ￥ | Китайский юань (знак валюты) |
| ₴ | ₴ | Гривна |
| ք | ք | Знак Рубля html (на клавиатуре — нет) |
| ¢ | ¢ | Цент |
| ¤ | ¤ | Знак валюты |
 | ||
| ₣ | ₣ | Французский Франк (знак html) |
| zł | zł | Польский Злотый (html знак) |
| Kč | Kč | Чешская Крона (html код) |
| ₢ | ₢ | Бразильское Крузейро (html) |
| ₺ | ₺ | Турецкая Лира (html код) |
| ₦ | ₦ | Нигерийская Наира (спецсимвол html) |
| ₧ | ₧ | Испанская Песета (знак html) |
| ₨ | ₨ | Индийская Рупия (html) |
| ₩ | ₩ | Корейский Вон (html код) |
| ₪ | ₪ | Израильский Шекель (Новый) (html) |
| ₫ | ₫ | Вьетнамский Донг (html) |
| ฿ | ฿ | Тайский Бат (html код) |
| ₭ | ₭ | Лаосский Кип ( спецсимвол html) |
| ៛ | ៛ | Камбоджийский Риель (html) |
| ₮ | ₮ | Монгольский Тугрик (спецсимвол html) |
| ₸ | ₸ | Казахстанский Тенге (знак html) |
Символы валют, знаки денежных валют, html, коды, спецсимволы
Currency Symbols (Signs of currencies): United States Dollar, Euro Member Countries, United Kingdom Pound, Japan Yen, China Yuan, Poland Zloty, Russia Ruble, Sweden Krona, Thailand Baht, Ukraine Hryvnia, India Rupee, Belarus Ruble, Kazakhstani Tenge, Turkish Lira,
znaki html, simvoly html, specsimvoly, kody html
Знак рубля для HTML
Студией Артема Лебедева создан шрифт со знаком рубля.
Чтобы использовать его на локальном компьютере — устанвливаем шрифт. Шрифт есть в двух форматах — rouble.ttf («Трутайп») или rouble.otf («Оупентайп»)
В этом файле есть начертания символа для различных шрифтов:
- 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 Bold Italic
- o — Lucida Regular
- p — Verdana Regular
- q — Verdana Italic
- r — Verdana Bold
- s — Verdana Bold Italic
То есть, если мы напишем английскую букву шрифтом AlsRubl, то знак рубля будет соответствовать шрифту Arial Regular.
Выглядет это так:
Теперь воспользуемся сервисом Font Squirrel для генерации файлов шрифта для самых распространенных браузеров. См. как это делается.
В данном случае со шрифтом rouble в генераторе шрифтов нужно использовать такие настройки:
- Expert
- Custom
- Subsetting
- Unicode Ranges:0061-0073
Нажимае загрузить и получаем вот такой архив со шрифтом, который теперь можно использовать на сайте.
Что теперь с этим архивом делать… Можно, например, в папке шаблона Joomla создать папку fonts и загрузить туда 4 файла:
- rouble-webfont.eot
- rouble-webfont.woff
- rouble-webfont.ttf’
- rouble-webfont.svg
А в файл с css кодом добавить определение шрифта:
@font-face {
font-family: 'als_rublregular';
src: url('../fonts/rouble-webfont.eot');
src: url('../fonts/rouble-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/rouble-webfont.woff') format('woff'),
url('../fonts/rouble-webfont.ttf') format('truetype'),
url('../fonts/rouble-webfont.svg#als_rublregular') format('svg');
font-weight: normal;
font-style: normal;
}Теперь, чтобы в тексте html страницы отобразить знак рубля делаем так:
<span>a</span>
Вместо английской буквы a в тексте страницы мы увидим знак рубля для шрифта Arial.
Думаю, лучше будет определить класс для знака рубля:
.rubl{font-family:als_rublregular;}и использовать в тэге span не атрибут style, а class:
<span>a</span>
Ошибка 404 — Not Found
404 |  |
Похоже, что кто-то взял эту страницу и не вернул назад. Испытайте удачу на новой. Список чуть ниже.
It looks like somebody took this page away and did not put it back.
Если сайт не помог, извиняемся за потраченное время — хочу заверить, что мы стараемся не попадать в нерелевантные запросы, но тем не менее не всегда успеваем обновлять ключевые слова. Ну и контролировать поисковую выдачу, конечно, невозможно.
Например: у нас есть статья про аэропорт Хельсинки и про аэропорт Риги но в выдаче по Риге всё равно статья про Хельсинки.
Если статья Вам помогла, нажимайте ДА. Так мы поймём, что переделывать её не нужно.
Занятно наблюдать в вебвизоре, как люди копируют текст, например вежливого отказа в трудоустройстве на английском но игнорируют кнопку ДА.
Сделаем поиск лучше!
| Рекомендую наш хостинг beget.ru |
| Пишите на [email protected] если Вы: |
| 1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык. |
| 2. Хотите разместить на сайте рекламу, подходящуюю по тематике. |
| 3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение — пожалуйста свяжитесь с нами по электронной почте |
| 4. Нашли на сайте ошибку, неточности, баг и т.д. … ……. |
| 5. Статьи можно расшарить в соцсетях, нажав на иконку сети: |
₽ — Ruble Symbol (U+20BD)
Briefly about the history of the ruble symbol
Ironically, the russian ruble symbol has a fairly long history of use. Of course, he was not the same as now and has nothing to do with the present. First time, in documents, it appeared in the XVII century. Then the numbers were recorded with the help of Cyrillic letters. To distinguish them from words put a special icon titlo. If it was a question of money, instead of the titlo they used a ligature from the letter Р turned up horizontally and the letter У. This was the ruble sign. However, in XX it was not used.
Modern russian currency symbol
The modern does not come from the old one. Under the Soviet Union, the official currency did not need an icon. It was not used in the international trade. Only in 1997 central bank of Russia announced the first competition for the development. The winners were determined, prizes were awarded, but the image was not approved. Then there were a few more competitions and voting. Time passed, but the situation did not change.
In 2007, a group of leading design studios agreed among themselves. Without the consent of the authorities, they began to use the crossed out letter Р.
- In website design.
- When creating shop windows.
- In the figures of money (100 kopeks = 1 ₽).
- In articles about russian financial crisis.
As a result, in December 2013, ruble image was received by the Central Bank of Russia. After a short time the official sign was added to Unicode. It happened in 2014, version 7.0.
Text is also available in the following languages: Русский; Deutsch;