HowTo

How to use the Rupee symbol in blogs and webpages without any hacks

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.

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.

Using the sign in webpages and blogs – The ‘image’ hack

Initially, bloggers (including my dietitian Dhruv) 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 how I did it earlier in 2 of my posts.

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.

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.

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! Did you find another method? Share your story in the comments section!

Comments Off on How to use the Rupee symbol in blogs and webpages without any hacks