Javascript - Degree Symbol
ANSI version with UTF-8 Meta tag
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 meta tag.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
Of course, this combination is incorrect and should never be used.
It is included here to help document
my analysis of a problem
with using the Degree Symbol (°) in an application.
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 ANSI js canvas error (table in next section) always occurs when the test page is loaded
from the local file server ..
but sometimes works (shows the Degree Symbol) when loaded from a remote web server.
I inspected the HTTP headers, but can not determine why this happens.
In the Chrome debug window
- The ANSI javascript Degree Symbols displays as a black diamond in Sources.
- The main html file Degree Symbol is correct in Elements
but a black diamond in Sources.
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