how to format price with currency symbol in HTML5?

Question

I have to show price $1.99 like $1⁹⁹, but I want to make sure that Google indexes $1.99 and not $199.

Different variation for i18n/localization.

$1.99 = $1⁹⁹
€1.55 = €1⁵⁵
CAN$2.99 = CAN$2⁹⁹

Thanks.

Answer 1

You can wrap the decimal point (the period in this case) in a span and set it to display: none.

Answer 2

try this fiddle: http://jsfiddle.net/d7vMb/2/

html

CAN$2.99 = CAN$2.<span>99</span>

css

span {
    position       : relative;
    left           : -.3em;
    vertical-align : super;   
    padding-bottom : .38em;
    background     : #fff; /* this will cover the dot */
    font-size      : 0.76em;
}

I tried to change the font-size from 1 to 20 em and it seems correctly working (no unwanted overlaps). In this way you can also avoid display: none.