The Symbol font is often used in scientific webpages to display special symbols such as greek letters and the integral sign. For example, the HTML code <font face="Symbol">a</font> is often used to display the greek letter alpha (α). As of this writing, one site that uses such code is the Navier-Stokes equations website, e.g. http://www.navier-stokes.net/nsbalint.htm.

However, this is technically incorrect in this Unicode age, since the latin letter "a" and the greek letter alpha are different characters. Font settings should control only how a character should look, and it should not allow a different character to be displayed. Therefore, in some modern browsers such as Mozilla, the code above just displays the latin letter "a", as if the <font> tag were nonexistent.

The correct way is to use Unicode. Since the greek letter alpha is U+03B1 in Unicode, it should be sufficient to just use &#x3b1; in the HTML code. Setting the font of that to "Symbol" may give an alpha in a different font, but either way an alpha should be shown.

Alas, because of compatibility problems with old browsers that do not support Unicode, as well as the lack of update on many such websites, the incorrect code above will probably remain on the net for the foreseeable future. One common suggestion to work around this problem is to set the encoding of the Symbol font to "ISO-8859-1", instead of the normal Adobe font-specific encoding. This is also technically incorrect, since the font is not actually encoded in ISO-8859-1, and giving it the wrong encoding may break other things. What's worse, since it is incorrect, we can hardly expect browser vendors to apply the "fix" out of the box, so you would have to reapply that "fix" after system/browser upgrades.

The following is a bookmarklet that solves the problem by dynamically converting the erroneous usage mentioned above to the correct way using Unicode. It is tested on Firefox for linux, but I'm not sure if it will work with other browsers, since the DOM2 standards used there are still not very well implemented in some browsers. To install it, just create a bookmark and copy-n-paste the following text as the URL. Now when you visit a webpage containing such erroneous usage of the Symbol font (such as the Navier-Stokes site mentioned above), select the bookmark and it should display correctly.

javascript:var view = document.defaultView;
var symboltab = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8704,0,8707,0,0,
8715,0,0,8727,0,0,8722,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,8773,913,914,935,8710,917,934,915,919,921,
977,922,923,924,925,927,928,920,929,931,932,933,962,
8486,926,936,918,0,8756,0,8869,0,8254,945,946,967,
948,949,966,947,951,953,981,954,955,956,957,959,960,
952,961,963,964,965,982,969,958,968,950,0,0,0,8764,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,978,8242,8804,8725,8734,402,9827,9830,
9829,9824,8596,8592,8593,8594,8595,176,177,8243,
8805,215,8733,8706,8226,247,8800,8801,8776,8230,0,
0,8629,8501,8465,8476,8472,8855,8853,8709,8745,8746,
8835,8839,8836,8834,8838,8712,8713,8736,8711,174,169,
8482,8719,8730,8901,172,8743,8744,8660,8656,8657,
8658,8659,9674,9001,174,169,8482,8721,0,0,0,0,0,0,0,
0,0,0,0,9002,8747,8992,0,8993,0,0,0,0,0,0,0,0,0,
0]; function convNode(n) { var n1; if (n == null)
return; if (n.nodeType == 3) { elem = n.parentNode;
var st = view.getComputedStyle(elem, null); var val =
st.getPropertyValue('font-family'); if
(val.toLowerCase() == 'symbol') { var s0 = n.data,
s1 = '', len = s0.length, ch; for (i = 0; i < len;
i++) { ch = s0.charCodeAt(i); if (ch < 256 &&
symboltab[ch] != 0) ch =
symboltab[ch]; s1 += String.fromCharCode(ch);
} n.data = s1; } } n1 = n.firstChild; while (n1 !=
null) { convNode(n1); n1 = n1.nextSibling; } }
convNode(document);

The technically inclined may paste the above code into a text editor and indent it properly, then it should not be hard to understand with the DOM2 standards around.

Log in or register to write something here or to contact authors.