Displaying Angle Symbol in HTML

Answer 1

Try surrounding the angle with a

<span class="ang">&ang;</span>

then, if the browser is IE, show an image of the angle there using CSS.

See this article on attaching images with css: http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS

Answer 2

Try using this

∠

<FONT FACE="Symbol">&#208;</FONT>

I have checked and it works in ie7 :). http://comers.citadel.edu/math_sym2005.htm

Answer 3

You could use a solution that incorporates both Jamie's and Shoban's answers and adds some conditional comments:

<style type="text/css">
span.ang { display: inline; }
span.ang_ie { display: none; }
</style>
<!--[if IE]>
<style type="text/css">
span.ang { display: none; }
span.ang_ie { display: inline; font-family: Symbol; }
</style>
<![endif]-->

<span class="ang">&ang;</span><span class="ang_ie">&#208;</span>

The above works on Windows in IE6, 7 & 8, Firefox 2 & 3, Opera 9.6 and Google Chrome 1.

It does not work in Safari for Windows 3 or 4. Safari for Windows renders a square for ∠ (and ∠). If Safari for Windows support is required, you are going to have to combine JavaScript to detect IE and Safari with Jamie's replace with image solution.

Answer 4

Looking at the problem from the other end, i.e. as a user who sees hollow squares for ⟨ (but also ⟨ and ⟩), I found a solution for IE7 (on Windows XP):

In the Internet Properties (Sorry, I have only a German version here, so I don't know if this is the correct name.), go to Fonts, and set the text font to Arial Unicode MS or Lucida Sans Unicode.

Strange enough, even if a page doesn't use that font, just the setting causes IE7 to correctly interpret those HTML named entities.

Edit: Lucida Sans Unicode doesn't work for all entities. E.g., ∠ or ↩ display ok but ⟨ and ⟩ not.