Are you looking at the ways to display Indian Rupee symbols on your blog or website? Then you are reading the right post.
Displaying Indian Rupee symbol with WebRupee APIs is very easy. WebRupee lets you display the rupee symbol with the help of CSS and JavaScript on web pages, blogs or anywhere on the web.
The CSS and JavaScript script APIs of WebRupee are cross browser compatible. They work consistently on Internet Explorer, Firefox, Chrome and Safari browsers.
CSS Method To Display Rupee Symbol
This is the most easy and glitch free method to display Rupee symbol. All you need to do is to add reference to WebRupee’s CSS file and use a span tag with class set to WebRupee to display Indian Rupee font. In detail..
Add the following line of text to your website/blog <head> area
<link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">
and where ever you want to display Indian Rupee symbol use the following <span> tag
<span class="WebRupee">Rs.</span>
That’s very simple isn’t it? Lets look at the alternative way now
JavaScript Method To Display Indian Rupee Symbol
For some reason, if you prefer not to use the above CSS here is a JavaScript method for displaying Indian Rupee symbol. Just paste the following javascript tag in your webpage or blog templates, it will automatically replaces all the occurrences of Rs and Rs. text with Indian Rupee symbol.
<script src="http://cdn.webrupee.com/js" type="text/javascript"></script>
Seems to be more easier than the earlier method right? But hold on. There is a glitch in using this.
Which One To Use – CSS or JavaScript?
We tested CSS as well as the JavaScript methods for displaying the Indian Rupee symbol on Google Chrome, Firefox and Internet Explorer browsers. We recommended you to go with CSS method as Internet Explorer has a problem with JavaScript method[Update: this issue arises when the local html pages. When the web pages are served from a web server, we will not face this problem). When a web page with the JavaScript method is opened in IE, an annoying security message is display. See the picture below
So in order to display Indian Rupee symbol across the browsers without any issues, we recommend you to go with CSS method.
UPDATE
Developers of WebRupee emailed me with the details of why IE is shows a security error.
We would like to mention that our both the methods are safe. The article writer faced the security message because he was running webpage in his local computer(as i could figure out from the screenshot), as the script connects to our website and gets the information, it requires internet to connect, and Internet Explorer security strictness causes popping of that security message.
From Internet Explorer’s point of view –A local page has an external link(our link). That external link is bringing some data. That data is changing the Rs to rupee symbol. Internet Explorer thinks this can be a threat. There would not be any such issue once the webpage is run on a server.Try running your webpage in a local web server. You definitely wont face that security issue.
So IE does not show the security error when the pages are served from a web page. Good.
Still I recommend CSS way of displaying Rs. I prefer CSS over a javascript.
Demos
Okay, enough of reading and it’s to time see the demos: CSS and JavaScript
Thanks Meher Ranjan Howji and Aman Kumar Jain of WebRupee.com for providing us a simple and cross browser compatible way to display Indian Rupee symbols.
Related: Download Indian Rupee Font To Use Indian Rupee Symbol In Your Documents
Its not working on anchor tag.
During my search i got a good tutorial also its works without using javascript
http://www.design2core.com/myblog/css/how-to-use-new-indian-rupee-symbolwebrupee-on-your-webpage-or-blog/
Looks like the web rupee guys were late. Here is a blog post on July 29 with the same way to put the rupee symbol on teh webiste .. http://blog.nparashuram.com/2010/07/use-new-symbol-for-indian-rupee-already.html