Best way to encode Degree Celsius symbol into web page?

Question

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

Is there a standard thinking about what to use, UTF-8 vs Hex or another format? Thanks — Evanss, May 29 '12 at 11:15
Ah, sorry, didn't understand your question at first. I believe UTF-8 is generally preferred. As for the symbol itself, I usually just do the degree sign followed by a capital C, like so: °C. I am not sure whether or not this is better or worse than your solution. I guess the biggest difference is the letter spacing between the two characters. — Nix, May 29 '12 at 11:30
I think its necessary for this symbol to do it your way. Thanks — Evanss, May 29 '12 at 11:31

score 203 · Accepted Answer · edited May 03 '15 at 01:47

203

Try to replace it with °, and also to set the charset to utf-8, as Martin suggests.

°C will get you something like this:

Degrees Celsius

edited May 03 '15 at 01:47

Joshua Pinter

45,245
23
243
245

answered May 29 '12 at 11:02

Nix

5,746
4
30
51

Best answer, in my opinion – Epirocks Feb 26 '20 at 18:33
That's Perfect! – Zobia Kanwal Mar 30 '20 at 13:28
for some reason that will result to Â°C – KCYrgn Dec 02 '21 at 15:31

score 38 · Answer 2 · answered May 29 '12 at 13:07

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>.

One of the best answers I have read, with direct quote from key source. Awesome!! — htm11h, May 16 '13 at 15:34
Why so complicated at all? The degree celsius is on the top left side of my keyboard just press it? — Pascal, Feb 04 '15 at 08:08
Use style="white-space: nowrap" instead of . https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr — IceWarrior353, Sep 27 '18 at 22:31

score 14 · Answer 3 · answered Oct 12 '15 at 09:18

14

Using sup on the letter "o" and a capital "C"

<sup>o</sup>C

Should work in all browsers and IE6+

answered Oct 12 '15 at 09:18

Persijn

14,624
3
43
72

12

The letter «o» is not the degree symbol, but it might *look* like the degree symbol for humans. This is a hack and will be confusing for computers to understand - like screen readers and search engines. – gregers Aug 26 '16 at 13:41

score 7 · Answer 4 · edited Nov 07 '18 at 11:35

7

I'm not sure why this hasn't come up yet but why don't you use ℃ (℃) or ℉ (℉) for Celsius and Fahrenheit respectively!

edited Nov 07 '18 at 11:35

Matthieu

2,736
4
57
87

answered Nov 25 '15 at 04:26

Saba Ahang

578
9
24

What do they look like? – Matthieu Nov 06 '18 at 15:38
1

@Matthieu see here: https://unicode-table.com/en/search/?q=%26%238457%3B and https://unicode-table.com/en/search/?q=%26%238451%3B – Saba Ahang Nov 07 '18 at 10:05

score 5 · Answer 5 · answered May 29 '12 at 10:54

5

Add a metatag to your header

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

This expands the amount of characters you can use.

answered May 29 '12 at 10:54

Martin Risell Lilja

617
5
10

6

In HTML5 you can just use `` I believe. – Drew Noakes Jun 21 '14 at 13:42
In my case, this was the real solution. VS2015 behaves according to what "Content-Type" meta tag says. – German Latorre Mar 28 '16 at 15:18
Adding this resolved an issue for me where a `°` was being rendered as `Â°` in an `img` alt tag where the source image was missing. – stephent Aug 14 '19 at 00:54

score 1 · Answer 6 · answered Jan 18 '17 at 09:56

1

The degree sign belongs to the number, and not to the "C". You can regard the degree sign as a number symbol, just like the minus sign.
There shall not be any space between the digits and the degree sign.
There shall be a non-breaking space between the degree sign and the "C".

answered Jan 18 '17 at 09:56

Johan Hoffsten

21
1

Could you give a source of those assertions? – Matthieu Nov 06 '18 at 15:39

score 0 · Answer 7 · answered Jul 05 '20 at 18:37

0

If using Java-JSP, What worked for me is to paste below in JSP page

<%@ page contentType="text/html; charset=UTF-8" %>

answered Jul 05 '20 at 18:37

veritas

378
1
6
16

Best way to encode Degree Celsius symbol into web page?

7 Answers7

Linked