ansaurus

Question

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

Answer 1

+7 A:

U+0302 COMBINING CIRCUMFLEX ACCENT

Make one with character map or with the entity

 &#x302;

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

ê Â 1̂ ̂

Becomes

ê Â 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.

jleedev 2009-11-15 21:20:13

thanks. Yeah, unfortunately it doesn't display consistently across browsers. On my mac, it works great on Safari, but not on Chrome (which is weird since it's also WebKit), Firefox, or Opera. On everything but Safari, it just puts the accent next to the number/letter, as if it were the next character in line.

carillonator 2009-11-15 21:28:58

@carillonator: That is odd, since I'm also using Chrome for Mac and it looks terrible but is indeed above the number rather than next to it.

Chuck 2009-11-15 21:31:32

@Chuck: With Mac Chrome, in this post the accent covers up the top of the 1, but when I make a separate html file with only this stuff in it, Chrome puts the accent next to it.

carillonator 2009-11-15 21:37:21

I hate computers.

jleedev 2009-11-15 21:41:01

can we channel that hatred toward internet explorer and make it go away? the world will be a better place.

carillonator 2009-11-15 21:46:52

On Safari 4.0.3 on OS X leopard I see a square box next to the "1" and the smiley face. I guess that it doesn't work for my setup for some reason.

Peter M 2009-11-15 22:00:58

Doesn't work with Firefox 3.5.5 on my Leopard either

Peter M 2009-11-15 22:03:15

It's primarily a font issue I think, rather than browsers per se — although browsers complicate the issue by having different default fonts. If your font has a glyph available for A-with-circumflex you should get that, otherwise you'll get a separate A and circumflex fudged together. ...that is, if you even have a glyph for a standalone circumflex. If you don't, you'll get the browser's replacement character symbol (a box or question mark).

bobince 2009-11-24 18:29:04

Answer 2

+4 A:

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

1&#770;

Example:

1̂

Gumbo 2009-11-15 21:20:20

Answer 3

+2 A:

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.

Cyborgx37 2009-11-15 21:33:47

You can always embed free and open source fonts though .. there are more than you'd imagine.

codeinthehole 2009-11-15 22:01:58

Answer 4

+2 A:

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;

Seth 2009-11-15 21:33:54

Answer 5

+1 A:

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.

bobince 2009-11-15 21:59:58

will using em for positioning give a better result than px in this case? What's this about MathML? I've never used it.

carillonator 2009-11-15 22:09:42

Using em for positioning will work better, as it will work even when the user is enlarging text in his browser. It's best to always use either px or a relative unit but never to mix them, so that the distances stay consistent.

Pekka 2009-11-16 15:44:12

MathML support in browsers is still pretty sketchy, and usually requires a lot of work on the end user's part. But MathML could render it with something like <mover><mi>^</mi><mi>1</mi></mover>

Seth 2009-11-16 19:53:06

ansaurus

tags:

views:

answers:

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

related questions