Знак рубля в HTML

HTML и CSS XSLT JavaScript Изображения Софт Etc

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

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

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

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

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

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

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

<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>

От некоторых проблем избавит формат SVG. Это вектор, размер файла небольшой, через CSS мы можем свободно управлять цветом символа. Большой минус — необходимость внедрения объектов в текст. Пример ниже не работает в MSIE.

Batik SVG Toolkit
Opera SVG
Mozilla SVG
Webkit(Safari) SVG

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

<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>

Если отбросить варианты с картинками, первое решение, лежащее на поверхности, — перечеркнутый текст. К сожалению, результат в MSIE ужасен. Существующие на данный момент средства CSS не дают нам возможности свободно управлять положением горизонтальной линии.

Font specification

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

<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.

<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>

Обратимся к таблицам символов. Совместим короткое тире с буквой «Р». Внедрив – через таблицы стилей, мы можем управлять его отображением при различных режимах вывода. Результат лучше, но при изменении размеров шрифта черта прыгает. Особенно в MSIE.

Content property

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

<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>

В армянском алфавите существует достаточно близкий к знаку символ. Хм, тоже вариант. Пользователи Mac OS X увидят несколько отдаленное от оригинала начертание (и лишь в том случае, если поставили Additional Fonts). Но все-таки слишком бросается в глаза, что буква строчная.

Армянский алфавит

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

<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>

Если символа нет на компьютере пользователя, то может быть стоит его туда загрузить? К сожалению, свойство font-face (CSS 2.0), не включено в CSS 2.1. Но браузер, поддерживающий загрузку шрифтов, существует — это Internet Explorer. Только он отобразит знак ниже. Остальные браузеры покажут «руб». Создав односимвольный шрифт со знаком рубля, привязанным к букве «р», мы получаем лучшее решение для пользователей MSIE.

Внедрение шрифтов в MSIE
Шрифт с тремя вариантами знака
Конвертер в формат EOT

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

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

<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уб.

<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>

Знак рубля в HTML

8 августа 2007