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
- Is saved with UTF-8 encoding
- Uses Degree_Symbol_ANSI_hex.js and Degree_Symbol_UTF8_hex.js
In all the other test files, text is placed on a canvas using javascript code similar to the following.
context.fillText("25°C", 100, 100);
|
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.
context.fillText("\xB05°C", 100, 100);
|
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
- As a regular ASCII character (ANSI in the Encoding option when saving a file)
- As a UTF-8 character (Another Encoding option)
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
- There are 3 canvases - each written to by javascript in a different file
- Local HTML - Uses javascript in the current html file
- ANSI hex_js - Uses Degree_Symbol_ANSI_hex.js
- UTF-8 hex_js - Uses Degree_Symbol_UTF8_hex.js
- A code sample - Besides the text file encoding, all 3 javascript routines are identical except for
- 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.
Author:
Robert Clemenzi