Данила Лучинский6.0
Вольнонаемный сайтостроитель
+7 921 308-88-38 ICQ 344-00-443 Сообщение  
dan@luchinsky.ru danluchinsky Заказать сайт
Кодоводство

Знак рубля на скорую руку

22 мая 2012 г.

На настоящий момент все современные браузеры поддерживают CSS-псевдокласс ::after, чем мы и воспользуемся для создания знака рубля минимальными усилиями. В HTML достаточно одного элемента с русской «Р»:
<span class=rouble>Р</span>

Класс rouble задает стиль, пририсовывающий палку:
<style>
  span.rouble { font: 48px Arial; }
  span.rouble::after { content: '–'; position: absolute; margin: 5px 0 0 -0.65em; }
</style>

На выходе получаем такое:
Р

В роли палки выступает короткое тире (&ndash; или Alt+0150).

Плюсы: минимум кода, никакой графики и левых шрифтов, в буфер копируется только «Р».
Минус: для разных размеров шрифта, и тем более для разных шрифтов нужно менять отступ палки (margin), чтобы она чуточку выдавалась за левый край буквы и не липла к ее низу или середине.
Метки:  CSS