Steps to use Rupee symbol in Documents & Webpages

The new Indian rupee sign has been adopted so quickly, that in 6 months (the competition was announced in March 2009 and the final decision was given in July 2010), it is now seen on all magazines, dairy products, farm produce, newspapers — pretty much anything you could pick up at a supermarket! And blogs and online publications have been just as quick to adopt them.

Big question is that how to write the rupee symbol.

So here is a solution to it!
NOTE:you cant write the rupee symbol on your webpage as you write on your documents. You have to follow different procedure for written documents and your webpages.

Inserting the Rupee sign in documents

Internet startup Foradian were quick to release a font with the Rupee symbol as a character. You can freely download the font and use it in your text documents.

1. Follow this link to download the Rupee font. Download
2. After download click on downloaded file install this font# Now go to your document and select the font 'Rupee Foradian' from your font list
# Now press the '~' given on the keyboard. Note that there is no need to press shift,ctrl or alt.

documents.

Using the sign in webpages and blogs 

Initially people resorted to the raw image hack method — creating a small transparent image of the symbol and simply inserting them into the post using HTML. Here’s a new method to include rupee symbol in your blogs & webpages .
1

<img style="border:none;vertical-align:middle" width="14" height="14" src="/rupee.png" alt="Rs."/>

Now there are a few pitfalls in this method that make it a ‘hack’.

• You need to create the image, and it needs to be the colour of your website’s text.
• You might also want to create multiple images, in multiple sizes/styles, depending on which part of the page it will appear.
• You need to hand-code HTML for inserting it.
• The image might not be visible in your readers’ RSS clients.
• It might now show up properly in IE 6!
• Copying and pasting it in Notepad or similar text-only editor would not work.

The right way to insert the Rs. sign

You could use a Web -based API like WebRupee, which is a simple and effective method to insert the sign in webpages and blogs, while conforming to W3C standards as well as being cross-browser compatible. Their homepage gives clear and concise instructions on how to use their free service. All it takes is adding a reference to their stylesheet or JavaScript to your header file, and then using the following line of code to display it on your website.

1	<span class="WebRupee">Rs.</span>

 

Optimizing the WebRupee API for the über-geeks

If you would like to cut down the (little) overhead and latency involved in using the WebRupee API, you could host all the required files on your own server. Here’s how.

• Download the WebRupee CSS file, and all the files (WebRupee.V2.0.eot, WebRupee.V2.0.ttf, WebRupee.V2.0.woff, WebRupee.V2.0.svg) associated with it.
• Open the CSS file in a text-editor of your choice and replace the paths for all these 4 files with the path on your server (where you will upload them) and save it.

• 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  @font-face { font-family:WebRupee; src:local(WebRupee), url(/path/to/WebRupee.V2.0.ttf) format(truetype), url(/path/to/WebRupee.V2.0.woff) format(woff), url(/path/to/WebRupee.V2.0.svg) format(svg); font-weight:normal; font-style:normal; } .WebRupee { font-family:WebRupee; }

• Upload all the files onto your server.
• Now simply reference the modified CSS file in your header.

• 1 <link rel="stylesheet" type="text/css" href="/path/to/cssfile.css">

Taking the optimization a step further in WordPress blogs

If you had included the stylesheet in your theme’s header.php file, the stylesheet will be loaded on all pages of your WordPress site. If you would want to include the stylesheet only on pages where you actually use the Rupee sign, all you need to do is grab a plugin.

• Install and activate the Specific Files plugin.
• On it’s Settings page, upload your modified CSS file.
• And then, when editing your post, select the CSS file if you want to include it for that post.

And that’s it! You could use the new Indian rupee sign pretty much anywhere you’d want!