css + jquery to make the new indian rupee symbol behave well with various font sizes and colors
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
README

README

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 -->

Approach
========

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.