The Peso Symbol Hack

[$dbpasswd]

More often we use the acronym Php to indicate a monetary value as Philippine peso. If you want to save letter space and use the conventional peso symbol with the combined P and = sign, use this css code:

<edit>

P<span style="vertical-align:0.1em;margin-left:-0.7em">=</span>

</edit>

In the old days of the typewriter era, we could conveniently use the peso symbol placed in one of the number keys. While coding for an e-commerce web site, I thought of a way to abuse CSS to get the peso symbol I wanted without resorting to using icons.

[dodie]

A good way to make an illusion for Peso in html formats.
I still wonder why you use word "hack" in this topic.

[sinus_]

clever... hehe! thanks!

[DarkMatter]

Hahaha! nice work bai. I sure could make a use of this. Cool css hack!

[$dbpasswd]

I still wonder why you use word "hack" in this topic.

It's a workaround for a text character problem, therefore a "hack". Hehe.

A neater way to write this code is to separate the CSS code and assign a class to the = sign:

HTML code

P<span class="pesosymbol">=</span>

CSS code:

.pesosymbol {vertical-align:0.1em;margin-left:-0.7em}

This way, the html code is neater and the = sign can be quickly aligned to P by modifying only the CSS code when the need arise, such as when changing font attributes.