This page is part of the documentation and testcases related to
the issue of displaying a Degree Symbol (°) on web pages
This test file
- Is saved with UTF-8 encoding
- Uses Degree_Symbol_ANSI_hex.js and Degree_Symbol_UTF8_hex.js
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.
context.fillText("25°C", 100, 100);
This will allow both a black diamond and a Degree Symbol to be displayed
on the ANSI hex_js canvas below.
context.fillText("\xB05°C", 100, 100);
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.
- As a regular ASCII character (ANSI in the Encoding option when saving a file)
- As a UTF-8 character (Another Encoding option)
The hex code works the same with all the combinations I tested,
but is not as obvious in the text editor (notepad).
The following table encapsulates the testcases and is similar to the one used in the 4
main testcases -
ANSI with Chrome Failure
ANSI with meta tag
- ANSI hex_js - Uses Degree_Symbol_ANSI_hex.js
- UTF-8 hex_js - Uses Degree_Symbol_UTF8_hex.js
- The function name
- The id of the canvas object
|Testcases using the associated code
|Canvases ||Sample code
|Local HTML ||ANSI hex_js ||UTF-8 hex_js
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.