Javascript - Degree Symbol
ANSI version showing the Chrome 63 failure
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 ANSI encoding
- Contains the following 3 characters that should identify this file as UTF-8,
but only when they are the first 3 characters of the file .. NOT HERE
/* At beginning of a UTF-8 file - should have no effect here
|
To be perfectly clear, before the /*,
there are 3 characters that are visible
in notepad and every browser - except - Chrome 63!
(This is only an issue when running from a local drive, not when loading from the web.)
In all the test files, text is placed on a canvas using javascript code similar to the following.
context.fillText("25°C", 100, 100);
|
Also in all test files (html and javascript), viewing the above text in notepad
shows the Degree Symbol as (°) (this one is rendered as °
so that the html file encoding won't matter).
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 Testcases
The following table encapsulates the testcases and is identical in all 4 html files -
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 js - Uses Degree_Symbol_ANSI.js
- UTF-8 js - Uses Degree_Symbol_UTF8.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
- The temperature value
| Testcases using the associated code
|
|---|
| Canvases | Sample code
|
|---|
| Local HTML | ANSI js | UTF-8 js
|
|---|
|
|
As you can see (depending on which scenario you are observing),
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.
Author:
Robert Clemenzi