Best way to encode Degree Celsius symbol into web page?
How should I encode special characters into web pages? For instance I need this symbol ℃, which I used just by copying and pasting the character as I can see it now. This worked for the desktop browsers I checked with and also on iPad and iPhone but nothing is displayed on a Blackberry I used for testing. Is there a standard best practice for this?
http://www.fileformat.info/info/unicode/char/2103/browsertest.htm
Try to replace it with °, and also to set the charset to utf-8, as Martin suggests.
°C will get you something like this:
If you really want to use the DEGREE CELSIUS character “℃”, then copy and paste is OK, provided that your document is UTF-8 encoded and declared as such in HTTP headers. Using the character reference ℃ would work equally well, and would work independently of character encoding, but the source would be much less readable.
The problem with Blackberry is most probably a font issue. I don’t know about fonts on Blackberry, but the font repertoire might be limited. There’s nothing you can do about this in HTML, but you can use CSS, possibly with @font face.
But there is seldom any reason to use the DEGREE CELSIUS. It is a compatibility character, included in Unicode due to its use in East Asian writing. The Unicode Standard explicitly says in Chapter 15 (section 15.2, page 497):
“In normal use, it is better to represent degrees Celsius “°C” with a sequence of U+00B0 degree sign + U+0043 latin capital letter c, rather than U+2103 degree celsius.”
The degree sign “°” can be entered in many ways, including the entity reference `°, but normally it is best to insert it as a character, via copy and paste or otherwise. On Windows, you can use Alt 0176.
Caveat: Some browsers may treat the degree sign as allowing a line break after it even when no space intervenes, putting “°” and the following “C” on separate lines. There are different ways to prevent this. A simple and effective method is this: <nobr>42 °C</nobr>.
Using sup on the letter "o" and a capital "C"
<sup>o</sup>CShould work in all browsers and IE6+