I’ve been working on a currency conversion class (will post later) and I came across a problem in displaying the Indian Rupee symbol (र). Whilst not strictly necessary for what I’m doing, I like to make sure everything works properly so as to avoid bugs later.
The HTML code that I used was र. The problem with this was that the character had whitespace at the top and bottom of it, making the symbol quite a bit taller than the rest of the text. This was quite an easy problem for me to solve using my currency class, as it puts the symbol in a <span>. All I had to do was give it the class “currency_inr” (INR being it’s ISO code) and write the following CSS.
.currency_inr {
line-height: 0.8em;
}
I used em as it won’t cause any problems if I need to specify the line-height in another CSS declaration in future.
For the record, the other HTML code for the Rupee is ₹. This had a really weird problem in that it doesn’t seem to register that it’s there so text was being written over it meaning it’s not visible. Clearly, some CSS jiggery-pokery will solve it, but I couldn’t be arsed to find it. If anyone does, please post it in the comments.
