Accents on numbers in HTML (like a ^ over 1)

Question

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 ̂ or ̂ 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 support @font-face in CSS by default. Once it does, though, it will be great, since the other browsers are already on board. webfonts.info is the place for info on this.

Answer 1

If rendering of the combining mark isn't sufficiently good I guess you would have to hack it up with positioning.

<style>
    .over { position: relative; }
    .over span { position: absolute; top: -0.5em; left: 0; }
</style>

abc <span class="over">1<span>^</span></span> xyz

Still a nasty hack! But possibly less work than MathML.

Answer 2

U+0302 COMBINING CIRCUMFLEX ACCENT

Make one with character map or with the entity

 ̂

Stick one over anything you want by putting it after it:

ê Â 1̂ ̂

Becomes

ê Â 1̂ ̂

...but it's not designed to go over the 1 or the smiley face. Notice how it moved up higher for the A but not for the 1 or the smiley face.

Answer 3

Try the COMBINING CIRCUMFLEX ACCENT (U+0302) using ̂ or ̂:

1̂

Example:

1̂

Answer 4

A lot will depend on whether or not the font your user is using supports this feature. Since you cannot embed fonts in a web page (without some potential legal trouble), your best bet is to try the above suggestions with different fonts to determine if the character your looking for is supported. Once you find a font, reference it in your CSS file and then inform the user that a specific font is required to correctly view your site.

Try using the following unicode index: http://www.fileformat.info/info/unicode/char/a.htm

You will need to know the name of the character you are trying to display. Once you've found it, the information page will tell you how to display the character using HTML character codes.

Answer 5

Check out the combining diacritical marks faq. A combining circumflex is U+0302.

That section says: "Some fonts, such as the Doulos and Charis fonts, which are freely available for download, contain large repertoires of appropriate precomposed glyphs". It might be worth a try to get your users to download those fonts (if they work).

You might have some success shrinking the number:

<span style="font-size: 75%">1</span>&#x0302;