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

Добрый времени суток.

После вступления закона о знаке рубля на международном валютном рынке, многие из клиентов изъявили желание поставить в свои магазины именно знак рубля, а не «руб.».

Поискав в интернете я не нашел еще спецсимвола html (хотя нашел даже спецсимвол гривны Украины). Но мне гугл предложил пару вариантов:

1) Подключение шрифтов гугл. Вариант неплохой, но подключать на сайт шриф только для того, чтобы поставить знак рубля бред. Если уж и подключать шрифт, то использовать его надо по полной. А так только лишняя нагрузка.

2) Поставить картинку. Это вообще не вариант. Заходя со слабым трафиком каждая картинка на счету.

Ну и третий вариант — сделать все через CSS. Не скажу что это хороший способ, но как вариант. Тем более можно сделать знак под шрифт сайта.

.rub{
 display: inline-block; 
 font-size: 24px; 
 line-height: 7px;  
 border-bottom: 1px solid #000000;
width:0.4em;
}



P


Т.е. способ решается простой регулировкой высоты. Делаем подчеркивание и сдвигаем его выше на нужный нам уровень.

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

Похожие публикации

Комментарии 25
    +5
    > Надеюсь, что в следующих обновлениях выйдет наш долгожданный спецсимвол и мы не будем больше извращаться.
    Да будем ) Будем использовать спецсивол, а так же будем поддерживать тех, кто еще не обновился, ну и пару-тройку вариантов верстки для версий IE.
    Традиция такая.
      +2
      Не помню в каком языке, но есть похожий символ — ք
        +1
        Вики говорит армянский en.wiktionary.org/wiki/%D6%84
          –7
          На моей памяти, армянский работал на кириллице.
          0
          так есть же символ рубля — ₷ (U+20B7)

          но тут уже главное, что бы в шрифте он присутствовал
            0
            Нет, это специмилло.
              0
              Я не знаю, что такое «специмилло», но Ashot совершенно прав. Демо-пруф: sassmeister.com/gist/8145368

              Однако, есть проблема. Позиция знака рубля в Unicode еще не утверждена, поэтому в шрифтах PT знак рубля вставили сразу во много позиций. Эти позиции уже начали разбирать на другие знаки, поэтому наиболее безопасно использовать последнюю — 20CF, пока окончательная позиция знака рубля не будет утверждена официально.
                0
                en.m.wikipedia.org/wiki/Spesmilo

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

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

                  Другое дело, что рубль появится не во всех шрифтах, и необходимость быть внимательным с выбором шрифта сохраняется. Почему «этому нельзя потокать», я не понимаю.
                    0
                    Потакать, если вдруг непонятно, нельзя использованию позиции абсолютно постороннего знака спесмило в качестве знака рубля. Надо знак рубля нормально в Уникод ввести. И использовать повсеместно, разумееется.
                      0
                      Если вы знаете, что в шрифте вашего сайта знак рубля в этой позиции, в чем проблема его использовать?
            +3
            А было это опубликовано еще в августе 2007г.
            +2
            Хорошая головоломка для пятничного утра. Накидал на коленке небольшую less-примесь, которая позволила сделать следующее jsbin.com/OdatoVu/1. Конечно, не идеально, но это хотя бы направление для работы.

            Суть: вместо знака подчеркивания лучше использовать – Этот псевдосимвол будет изменяться со шрифтом и не придется подгонять размеры штриха под размер надписи.
              0
              тоже хороший вариант. я его как-то не рассматривал. Все на css без лишних картинок.
              0
              А можно скрин с третьим вариантом?! Как выглядит?
                –4
                cssdesk.com/
                вот тут онлайн редактор.
                сверху P
                снизу
                .rub{ display: inline-block; font-size: 24px; line-height: 7px; border-bottom: 1px solid #000000; width:0.4em;}
                +3
                Идея хорошая, но, к сожалению, у данного варианта есть несколько нежелательных, как минимум для меня, эффектов: знак рубля смещается вниз относительно основной линии всего остального текста, для каждого размера шрифта нужно подбирать смещение нижней рамки и перечеркивание идет на всю ширину знака, а на сайте ЦБ мы видим, что перечеркивание должно быть короче. Поэтому, немного поигравшись со стилями, представляю на суд свою версию формирования знака рубля:

                .amount {
                font-family: sans-serif;
                font-size: 120px;
                }
                .rub {
                position: relative;
                }
                .rub:before {
                content: «Р»;
                }
                .rub-line {
                position: absolute;
                top: .05em;
                left: 0px;
                }
                .rub-line:before {
                content: "-";
                }

                1000

                Проверил в различных браузерах и все отобразилось хорошо, причем не зависимо от вида шрифта и его размера.
                  0
                  Странно обрамляю пример использования тегом source, но он все равно парсится :(
                    +2
                    Скорее всего это из-за отрицательной кармы.
                      +4
                      Ясно. Буду писать полезные комментарии и выправлять свою карму :)
                  +2
                  Мой вариант:

                  10 000 <span class=rouble>Р</span>
                  

                  .rouble {
                    position: relative; }
                  
                  .rouble:before {
                    display: block;
                    content: "–";
                    position: absolute;
                    top: 0.05em; }
                  

                  Демо: sassmeister.com/gist/8145219

                  Имхо, самый просто и лаконичный вариант. Как и в других вариантах, верхний отступ перекладины зависит от используемого начертания шрифта. Для Tahoma и Verdana, например, отступ должен быть больше, чем для Arial.
                    0
                    Да, очень просто и лаконично…
                    Скрытый текст


                    FF 26, OS X 10.9.1
                      +1
                      Починил, попробуйте снова.
                        0
                        Теперь работает, спасибо.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое