Skip to content


Subversion checkout URL

You can clone with
Download ZIP
css + jquery to make the new indian rupee symbol behave well with various font sizes and colors
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


My attempt at making the Indian Rupee Symbol look better

Goal is to be able to get these to work correctly out of the box:
<h1> Pay <span class='inr'>1000</span> </h1>  <!-- Should show a large rupee symbol in black -->
<p style='color:#bebeef'> Pay <span class='inr'>1000</span> </p>  <!-- Should show a correctly sized rupee symbol in #bebeef or any other arbitrary color -->


the public folder consists of an index.html and an img directory
The img directory has the rupee symbol in many sizes. Note that its a PNG8 image with the symbol itself being transparent
The transparency allows us to tweak the background color and make it look like color has been applied

the index.html has a sample usage. The jquery script simply loops over every .inr element and prepends a prestyled span 
the prestyled span is selected from various options based on the maximum possible height that can be chosen from various alternatives

So far it looks good in FF.
Something went wrong with that request. Please try again.