Search code examples
htmlcssasciifont-facecodepages

HTML/CSS use DOS Codepage 437 font / missing glyphs

I want to use the classic DOS Codepage437 fonts on a HTML web page. I've included a *.ttf file with CSS and normal letters do work. But there a some missing glyphs, that are interpreted as control characters (for example the nice dos style smileys :D or chinese yen sign). How can I force the browser to display e.g. glyph 0x0E of the ttf-file?

See Link to example html file (ttf file can be found in source code)

This is how it should look like:

enter image description here

Solution

  • tl;dr: You can't use the DOS 437 character set on a web page.

    One problem is that browsers interpret numeric character references as Unicode codepoints. In your example page, È always means U+00C8 LATIN CAPITAL LETTER E WITH GRAVE.
    Now you're using a font where U+00C8 happens to look like ╚ instead of È, but that doesn't matter.
    Or rather, it does matter, because it only contributes to the confusion. You say, "normal letters do work", but they don't "work"; they are simply displayed, but the result is not what you expect.
    As a test, try to display

    ÔÕÖ×ØÙÚ

    using your font. Then double click on the first character, to select the whole word. You will see that only the first three characters get selected, because ÔÕÖ is a word. × is not a letter, and thus not part of a word, no matter the font!

    The same is true for numerical references below 32, like  where the font may contain ↓ at that position, but the browser knows that this is Unicode U+0019 END OF MEDIUM, a non-printing character. So it won't be printed.

    Another, unrelated, problem with your webpage is that you specify UTF-8 for the charset, rather than IBM437.
    Browsers are not obliged to honour uncommon codepages though, so it won't magically start working if you change it. In addition, numerical references like È still mean Unicode codepoint 200 rather than the 200th glyph in your font.
    So in this case, it won't really make much of a difference what charset you specify.

    The solution, then, is to create a Unicode compatible font, that has the glyphs mapped to the correct codepoints (╚ is at codepoint U+255A, and so on) and use them by referring to said codepoints in the HTML (╚ or ╚). Or of course, use UTF-8 and simply type ╚ into your editor.