I'm trying to find the best way to put circumflex accents ( ˆ = ˆ) on top of numbers (a musical notation) without resorting to images. Certain letters have equivalent HTML entities: ê = ê, Ô = Ô, etc., but numbers don't.

Here is what I'm currently using on my website:

<span style="position:relative;">1
   <span style="position:absolute; 
                left:0.1em; 
                bottom:0.2em; 
                font-size:1.1em;">
                &circ; 
   </span>  
</span>

It looks pretty good, but not perfect---because of slight differences in number shapes and browser rendering, something is bound to be a little off.

Does anyone have a more elegant solution for this?

Update:

The Combining Circumflex Accent &#770; or &#x302; produces different results on different browsers/platforms, most of which are not right (on my Mac, only Safari does it right).

According to this, proper display of a combining accent is dependent on both the font and the renderer. I'm using Times New Roman, Times, so it doesn't appear to be a workable option. I can't afford the hassle and inevitable ignoring of requiring a user to have a particular font.

I guess I'll have to stick with manually positioning the accent atop the note as above unless there's any other new answers. Thanks.

Update 2:

Embedding a free font with better diacritic support (especially Doulos SIL) seemed promising, but as of now (Nov 2009), Chrome does not

Edit
Report