title: Accents on numbers in HTML (like a ^ over 1)
body: <p>I'm trying to find the best way to put circumflex accents ( &circ; = <code>&amp;circ;</code>) on top of numbers (a musical notation) without resorting to images. Certain letters have equivalent HTML entities: &ecirc; = <code>&amp;ecirc;</code>, &Ocirc; = <code>&amp;Ocirc;</code>, etc., but numbers don't.  </p>
  
  <p>Here is what I'm currently using on my <a href="http://carillontech.org/vademecum/" rel="nofollow noreferrer">website</a>:</p>
  
  <pre><code>&lt;span style="position:relative;"&gt;1
     &lt;span style="position:absolute; 
                  left:0.1em; 
                  bottom:0.2em; 
                  font-size:1.1em;"&gt;
                  &amp;circ; 
     &lt;/span&gt;  
  &lt;/span&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>Does anyone have a more elegant solution for this?  </p>
  
  <p><b>Update:</b></p>
  
  <p>The Combining Circumflex Accent <code>&amp;#770;</code> or <code>&amp;#x302;</code> produces different results on different browsers/platforms, most of which are not right (on my Mac, only Safari does it right). </p>
  
  <p>According to <a href="http://unicode.org/faq/char_combmark.html#12b" rel="nofollow noreferrer">this</a>, proper display of a combining accent is dependent on both the font and the renderer. I'm using <code>Times New Roman, Times</code>, 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. </p>
  
  <p>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.  </p>
  
  <p><b>Update 2:</b></p>
  
  <p>Embedding a free font with better diacritic support (especially <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&amp;cat_id=FontDownloadsDoulos" rel="nofollow noreferrer">Doulos SIL</a>) seemed promising, but as of now (Nov 2009), Chrome does not support <code>@font-face</code> in CSS by default. Once it does, though, it will be great, since the other browsers are already on board. <a href="http://www.webfonts.info" rel="nofollow noreferrer">webfonts.info</a> is the place for info on this.  </p>