Javascript - Degree Symbol Test
UTF-8 version with Hex codes in javascript

This page is part of the documentation and testcases related to the issue of displaying a Degree Symbol (°) on web pages via html and javascript.

This test file

In all the other test files, text is placed on a canvas using javascript code similar to the following.

In this testcase, the all 3 versions of the javascript are modified to have 2 Degree Symbols, one that looks like a Degree Symbol in notepad, and a second that is entered using hex notation - "\xB0" similar to the following. This will allow both a black diamond and a Degree Symbol to be displayed on the ANSI hex_js canvas below.

Like all the other test files (html and javascript), viewing the above text in notepad shows the Degree Symbol as (°).

It turns out that there are 2 different ways for a text file to store the degree symbol

Both of these will display the exact same in notepad, but differently when creating a web page - depending on the browser and a variety of combinations.

The hex code works the same with all the combinations I tested, but is not as obvious in the text editor (notepad).

The Testcases

The following table encapsulates the testcases and is similar to the one used in the 4 main testcases - UTF8 ANSI ANSI with Chrome Failure ANSI with meta tag

As you can see, when that code executes and the Degree Symbol is placed on a canvas, it may be rendered as either a small superscript circle or as a black diamond with a question mark. However, the Degree Symbol entered as a hex value (the first of the two) is always displayed correctly.

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Degree_Symbol / Degree_Symbol_UTF8_hex.html