The rouble sign in HTML

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	Introduce the rouble symbol.

August 1, 2007 Art. Lebedev Studio proposed to all professional designers the new rouble sign. For the first time it was used offline on Art. Lebedev Store price tags. Here you can find several suggestions on how it can be introduced online.

The symbol is not available for PC and Mac users until it is included in ISO and Unicode tables, so we have to find alternative ways of displaying it. The sign must be resizable. We also have to think about the way it will be read off screen and copied into clipboard. Possible solutions include Flash, PNG, GIF and HTML.

Using flash has obvious drawbacks—it would require certain software which a user might not have, a click on the object would disable text selection, and it would not be easy to change the color of the sign.

If we chose to work with images, we would have to deal with limited size, fixed color range, zero search efficiency and a graphic anchor.

An approached based on images is shown below (there is a hidden “RUR” expansion that gets copied into clipboard):

Bunnies 100 RUR each

<style type="text/css">
    img.ruble-img { height: 1.5ex; }
    span.dot { position:absolute; text-indent: -1000em; }
</style>
<p style="font-size:1em">Bunnies 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">RUR</span> each</p>
<p style="font-size:1.2em">Bunnies 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">RUR</span> each</p>
<p style="font-size:1.5em">Bunnies 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">RUR</span> each</p>
<p style="font-size:2em">Bunnies 100 <img src="ruble.gif" class="ruble-img" /><span class="dot">RUR</span> each</p>

SVG format offers a better solution. It is a small size vector image, and we can easily alter the color of the symbol by means of CSS. But we have to incorporate the sign into the text and that’s where we face trouble. What you see below is how this approach fails in MSIE.

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

Bunnies 100 RUR each

<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">Bunnies 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">RUR</span> each</p>
<p style="font-size:1.2em">Bunnies 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">RUR</span> each</p>
<p style="font-size:1.5em">Bunnies 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">RUR</span> each</p>
<p style="font-size:2em">Bunnies 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">RUR</span> each</p>

If we reject images, the first thing that comes to mind is strikethrough text. Unfortunately, the way it appears in MSIE is highly discouraging. At present CSS doesn’t allow shifting the strikethrough line up and down.

Font specification

Bunnies 100 p each

<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">Bunnies 100 <span class="ruble line-through">p</span><span class="dot"></span> each</p>
<p style="font-size:1.2em">Bunnies 100 <span class="ruble line-through">p</span><span class="dot"></span> each</p>
<p style="font-size:1.5em">Bunnies 100 <span class="ruble line-through">p</span><span class="dot"></span> each</p>
<p style="font-size:2em">Bunnies 100 <span class="ruble line-through">p</span><span class="dot"></span> each</p>

If the computer generated line can’t be adjusted, then we can draw one. Lets use border. Line thickness in the sample suits well when browsed with Firefox, but appears insufficient for Opera. The result is too unpredictable.

Bunnies 100 p. each

<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">Bunnies 100 <span class="ruble rel">p<span class="dot dborder">.</span></span> each</p>
<p style="font-size:1.2em">Bunnies 100 <span class="ruble rel">p<span class="dot dborder">.</span></span> each</p>
<p style="font-size:1.5em">Bunnies 100 <span class="ruble rel">p<span class="dot dborder">.</span></span> each</p>
<p style="font-size:2em">Bunnies 100 <span class="ruble rel">p<span class="dot dborder">.</span></span> each</p>

Lets refer to tables of symbols. Lets combine letter P and an en dash. If we include – into stylesheet, we can control its appearance in different input modes. It looks a little better, but the line leaps as we change type size. It’s the worst in MSIE.

Content property

Bunnies 100 p each

<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">Bunnies 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot"></span> each</p>
<p style="font-size:1.2em">Bunnies 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot"></span> each</p>
<p style="font-size:1.5em">Bunnies 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot"></span> each</p>
<p style="font-size:2em">Bunnies 100 <span class="hyphen"></span><span class="ruble">p</span><span class="dot"></span> each</p>

There is a symbol in Armenian alphabet that is rather similar to the sign. Well, it’s another way perhaps. Mac OS X users shall see it somewhat different from the original (provided that they have Additional Fonts installed). But it is yet too obvious that the letter is lowercase.

Armenian alphabet

Bunnies 100 քRUR each

<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">Bunnies 100 <span class="rel arm">&#x584;</span><span class="dot">RUR</span> each</p>
<p style="font-size:1.2em">Bunnies 100 <span class="rel arm">&#x584;</span><span class="dot">RUR</span> each</p>
<p style="font-size:1.5em">Bunnies 100 <span class="rel arm">&#x584;</span><span class="dot">RUR</span> each</p>
<p style="font-size:2em">Bunnies 100 <span class="rel arm">&#x584;</span><span class="dot">RUR</span> each</p>

If there is no such symbol on a user’s computer, may be we should furnish it? To our regret, the font-face property (CSS 2.0) is not included in CSS 2.1. However, there is a browser that enables embedding fonts, it’s Internet Explorer. Only IE is capable of displaying the symbol below. Other browsers will show RUR. Creating a font that consists of a single rouble sign bound to letter P is the best solution for MSIE users.

About font embedding in MSIE
Microsoft Web Embedding Fonts Tool

Internet Explorer is required to view this example.

Bunnies 100 p each

<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">Bunnies 100 <span class="eot">p</span><span class="dot"></span> each</p>
<p style="font-size:1.2em">Bunnies 100 <span class="eot">p</span><span class="dot"></span> each</p>
<p style="font-size:1.5em">Bunnies 100 <span class="eot">p</span><span class="dot"></span> each</p>
<p style="font-size:2em">Bunnies 100 <span class="eot">p</span><span class="dot"></span> each</p>

Users of other browsers will have to stick with en dash or images. This last sample combines the advantages of the methods described above.

Bunnies 100 p each

<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">Bunnies 100 <span class="rur">p<span></span></span> each</p>
<p style="font-size:1.2em">Bunnies 100 <span class="rur">p<span></span></span> each</p>
<p style="font-size:1.5em">Bunnies 100 <span class="rur">p<span></span></span> each</p>
<p style="font-size:2em">Bunnies 100 <span class="rur">p<span></span></span> each</p>

Order a design...

The rouble sign in HTML 8 August 2007