How to Use New Indian Rupee Symbol(WebRupee) on your Webpage or Blog

On July 15, 2010 the union cabinet has approved the new symbol for the Indian Rupee. Now our currency rupee got its own symbol which give it a unique identity; designed by D. Udayan Kumar, Post-graduated by IIT (Indian Institute of Technology). Government announced that it will take about 2 year to make it available on the keyboards.

But designers started to use it on print, you might have seen it in newspapers and television. If you want to use it in your word document; just download the font and install it in your computer and press the key above ‘tab’ button and you’ll get the rupee symbol. But to use it on web is little bit tricky. In today’s post I am going to tell how to use the rupees’ symbol in web pages.

In this tutorial we are using “@font-face” property of CSS to display rupee symbol on multiple browse. This Property first introduce in CSS 2.0. It does work on all the major & updated browsers. But it has some inconsistencies in older versions

  1. It doesn’t work on Mozilla Firefox versions below 3.0.
  2. Internet explorer has been implementing @font-face support since version 4.
  3. Google Chrome actually does support @font-face but it was turned off by default until version 4.0, but now in its latest version it is on by default.

So how to implement it in our pages so that it looks fine in every browser. To do this we’ll have to get knowledge about our computer system fonts.

In our computer systems two types of fonts are available OpenType (OTF) or TrueType (TTF).
All modern browsers support @font-face with .ttf and.otf format except IE (Internet Explorer).

IE4 to IE8 supports the EOT (embbeded OpenType) formet, a compact form of OpenType fonts designed by Microsoft. So to show rupees symbol on IE we’ll have to change TTF or OTF format in to EOT. You may use a application called “Font Forque” to do it.

Some browsers only support SVG format in @font-face. So we’ll use SVG format in order to get support in Google’s Chrome, Safari for iphone, and the opera browser. You may also use “font squirrel” for font-converting process.

NOTE: If any browser doesn’t support @font-face property it’ll show RS. rather than Rupees Symbol.

@font-face implementation

1. HTML Part

<div id=”container”><span>Rs.</span> 5000</div>

You need to attach a css file.

2. CSS Part

@font-face{font-family:‘WebRupee’;src:url(‘WebRupee.V2.0.eot’);src:local(‘WebRupee’), url(‘WebRupee.V2.0.ttf’)format(‘truetype’),url(‘WebRupee.V2.0.woff’)format(‘woff’),
url(‘WebRupee.V2.0.svg’)format(‘svg’);font-weight:normal;font-style:normal;}
.WebRupee{font-family:’WebRupee’;}
html>body.WebRupee{margin-right:2px;}
html>body.WebRupee{*margin-right:0;}
#container{width:500px;margin:50pxauto;}

Try out this simple, cross browser compatible method for using the Rupee symbol on your website, blog or anywhere on the web.

To see a Live demo. Click here
To download a demo file. Click here

cheers!!
Joginder Poswal

Tags: , ,

This entry was posted on Thursday, September 9th, 2010 at 6:14 am and is filed under CSS, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “How to Use New Indian Rupee Symbol(WebRupee) on your Webpage or Blog”

  1. Umarfaruk M Says:

    wow!!! its working buddy! thanks a lot 🙂

  2. vineet Says:

    Thanks buddy, its great!!!

Leave a Reply

This blog is kept spam free by WP-SpamFree.

 

Get Adobe Flash player