Знак рубля в HTML

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Кирилл Кленов Артур Чафонов

8 августа 2007


Задача.

Внедрить знак рубля.

1 августа студия пригласила профессиональных дизайнеров начать использовать новый знак рубля. Впервые в офлайне он применен на ценниках студийного «Пункта сбыта мечт». Варианты применения в интернете предлагаются ниже.



Пока новый символ не включен в таблицы ISO и Unicode и отсутствует на компьютерах пользователей, приходится искать способы его отображения. Важно, чтобы он был масштабируемым. Необходимо также подумать об устройствах чтения с экрана и о том, что окажется в буфере обмена у пользователя, копирующего цены. Возможные решения: Flash, PNG, GIF и HTML.

Минусы флеша очевидны: у пользователя может не быть проигрывателя, фокус с текста перемещается в объект при клике, сложно изменить цвет знака.

Работая с изображениями мы сталкиваемся с пределами масштабирования, фиксированной цветовой гаммой, игнорированием поисковиками и привязкой к графике.

Решение с картинкой может быть следующим (обозначение «руб» скрыто и попадет в буфер обмена при копировании):

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

01 
02 
03 
04 
05 
06 
07 
08 
<style type="text/css">
    img.ruble-img { height: 1.5ex; }
    span.dot { position:absolute; text-indent: -1000em; }
</style>
<p style="font-size:1em">Кролики по 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">руб.</span></p>
<p style="font-size:1.2em">Кролики по 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">руб.</span></p>
<p style="font-size:1.5em">Кролики по 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">руб.</span></p>
<p style="font-size:2em">Кролики по 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">руб.</span></p>

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

Кролики по 100 руб.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
<style type="text/css">
    span.roparent { // display:none; }
    .robject { width: 1.5ex; height: 1.5ex; }
    span.adot { position:absolute; text-indent: -1000em; // position: static; // text-indent: 0; }
</style>
<p style="font-size:1em">Кролики по 100 <span class="roparent">
    <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object>
</span><span class="adot">руб.</span></p>
<p style="font-size:1.2em">Кролики по 100 <span class="roparent">
    <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object>
</span><span class="adot">руб.</span></p>
<p style="font-size:1.5em">Кролики по 100 <span class="roparent">
    <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object>
</span><span class="adot">руб.</span></p>
<p style="font-size:2em">Кролики по 100 <span class="roparent">
    <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object>
</span><span class="adot">руб.</span></p>

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

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

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

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

01 
02 
03 
04 
05 
06 
07 
08 
09 
<style type="text/css">
    span.ruble { text-transform:uppercase; }
    span.line-through { text-decoration: line-through; }
    span.dot { position:absolute; text-indent: -1000em; }
</style>
<p style="font-size:1em">Кролики по 100 <span class="ruble line-through">p</span><span class="dot">уб.</span></p>
<p style="font-size:1.2em">Кролики по 100 <span class="ruble line-through">p</span><span class="dot">уб.</span></p>
<p style="font-size:1.5em">Кролики по 100 <span class="ruble line-through">p</span><span class="dot">уб.</span></p>
<p style="font-size:2em">Кролики по 100 <span class="ruble line-through">p</span><span class="dot">уб.</span></p>

Если стандартную черту нельзя подвинуть, можно нарисовать свою. Допустим, бордером. Толщина линии в примере хорошо подходит для Firefox, но недостаточна для отображения в браузере Opera. Результат слишком непредсказуем.

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

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

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

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

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
<style type="text/css">
    span.ruble { text-transform:uppercase; }
    span.rel { position: relative; }
    span.dborder { top: -1.5ex; left: 0; width:.9ex; border-bottom: 0.16ex solid black; // top: -1.3ex; }
    span.dot { position:absolute; text-indent: -1000em; }
</style>
<p style="font-size:1em">Кролики по 100 <span class="ruble rel">p<span class="dot dborder">.</span></span></p>
<p style="font-size:1.2em">Кролики по 100 <span class="ruble rel">p<span class="dot dborder">.</span></span></p>
<p style="font-size:1.5em">Кролики по 100 <span class="ruble rel">p<span class="dot dborder">.</span></span></p>
<p style="font-size:2em">Кролики по 100 <span class="ruble rel">p<span class="dot dborder">.</span></span></p>

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

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

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

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

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
<style type="text/css">
    span.dot { position:absolute; text-indent: -1000em; }
    span.ruble { text-transform:uppercase; }
    span.hyphen:after { content: '\2013'; }
    span.hyphen { position:absolute; margin:.1ex 0 0; behavior: expression(this.innerHTML = '&ndash;'); }
</style>
<p style="font-size:1em">Кролики по 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot">уб.</span></p>
<p style="font-size:1.2em">Кролики по 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot">уб.</span></p>
<p style="font-size:1.5em">Кролики по 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot">уб.</span></p>
<p style="font-size:2em">Кролики по 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot">уб.</span></p>

Кролики по 100 քруб.

Кролики по 100 քруб.

Кролики по 100 քруб.

Кролики по 100 քруб.

01 
02 
03 
04 
05 
06 
07 
08 
09 
<style type="text/css">
    span.dot { position:absolute; text-indent: -1000em; }
    span.rel { position: relative; }
    span.arm{ top:-.52ex; }
</style>
<p style="font-size:1em">Кролики по 100 <span class="rel arm">&#x584;</span><span class="dot">руб.</span></p>
<p style="font-size:1.2em">Кролики по 100 <span class="rel arm">&#x584;</span><span class="dot">руб.</span></p>
<p style="font-size:1.5em">Кролики по 100 <span class="rel arm">&#x584;</span><span class="dot">руб.</span></p>
<p style="font-size:2em">Кролики по 100 <span class="rel arm">&#x584;</span><span class="dot">руб.</span></p>

Для просмотра этого примера необходим IE.

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

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

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

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

01 
02 
03 
04 
05 
06 
07 
08 
<style type="text/css">
    @font-face { font-family: "Rubl Sign"; src: url(http://www.artlebedev.ru/;-)/ruble.eot); }
    span.eot { // font-family: "Rubl Sign"; }
</style>
<p style="font-size:1em">Кролики по 100 <span class="eot">p</span><span class="dot">уб.</span></p>
<p style="font-size:1.2em">Кролики по 100 <span class="eot">p</span><span class="dot">уб.</span></p>
<p style="font-size:1.5em">Кролики по 100 <span class="eot">p</span><span class="dot">уб.</span></p>
<p style="font-size:2em">Кролики по 100 <span class="eot">p</span><span class="dot">уб.</span></p>

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

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

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

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

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

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
<style type="text/css">
    @font-face { font-family: "Rubl Sign"; src: url(http://www.artlebedev.ru/;-)/ruble.eot); }
    span.rur { font-family: "Rubl Sign"; text-transform: uppercase; // text-transform: none;}    
    span.rur span { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: .1ex 0 0 -.55em; // display: none; }
    span.rur span:before { content: '\2013'; }
</style>
<p style="font-size:1em">Кролики по 100 <span class="rur">p<span>уб.</span></span></p>
<p style="font-size:1.2em">Кролики по 100 <span class="rur">p<span>уб.</span></span></p>
<p style="font-size:1.5em">Кролики по 100 <span class="rur">p<span>уб.</span></span></p>
<p style="font-size:2em">Кролики по 100 <span class="rur">p<span>уб.</span></span></p>