Typesetting/Box Drawing Fonts

Here various issues of displaying Box Drawing Characters characters in different operating systems and browsers will be identified and discussed.

Font in CSS

The existing CSS for the Wiki themes has Courier listed instead of Courier New. This may cause issues both in Internet Explorer and Firefox by using the non-TrueType Courier font kept arround for old applications. Fixing it with User CSS in UserPreferences, makes Firefox work fine on Windows, but not necessarily on other OS'.

Windows

As it was noted earlier (J General Forum Jan 14, 2006, Jan 31, 2006), display of Box Drawing Characters depends on typesetting logic and environment of the underlying OS: availability of particular fonts and choice made selecting them.

Box Drawing characters are given in the web browser as Unicode ranges.

On Windows this range seems to be tied up with historic PC/DOS code pages, where they appeared originally. The misalignment of boxes seen in J pages, is also reflected in the choice of glyphs for DOS encodings.

The following pictures we obtained on the same machine side-by-side with the Upper ASCII Charset page and selected Encoding: Cyrillic DOS (866) or Eastern European DOS (852). Note how non-Courier New glyphs are wider and not antialiased in IE.

Firefox gets the glyphs from Courier New only, whereas Internet Explorer tries to map Unicode to the DOS codepage, then finds a font for it, which is already not Courier New.

Box Drawing characters in Unicode are somewhat related to the higher Unicode sets, close to Far Eastern language sets. So certain confirgurations for Far Easter langauge support may interfere with Box Drawing characters. These settings are located in XP on the Control Pannel → Regional and Language Options, Languages tab, [Details] screen and Supplemental Language Support section.

The fonts with @ such as @Batang, @Gulim etc. contain characters for extended ranges. It was also noted in some installations of Windows XP, they have extension .ttc not .ttf in the Windows\Fonts folder.

This is the list of such files:

batang.ttc
gulim.ttc
mingliu.ttc
msgothic.ttc
simsun.ttc

Removing them, removes the Box Drawing ability from Internet Explorer totally -- just empty spaces. Bringing them back, creates the misalignment. On the other Windows XP machines, where they have extension .ttf and slightly different size, but the same version, misalignment did not happen.

Indeed, Fonts in "East Asia" Language Collection contain the fonts mentioned above: .ttc is a fonts collection having more than one TrueType font to share common glyphs.

• Many of these fonts contain the OEM Character Set, which has an intersection with the Unicode Box Drawing characters. Because these extended fonts have more complete ranges of glyphs than regular fonts, they may be given preference as being "more compenent" by the typesetting subsystem, although the regular fonts may also have the same characters.

-- OlegKobchenko 2006-02-02 22:53:06

After a fresh install of Windows XP, using Internet Explorer, alignment in Courier New font is preserved, both when mixed with non-TrueType Courier from a modern CSS and by itself in a custom CSS:

So misalignment is introduced later, when more fonts or support for extended Unicode scripts are installed.

-- OlegKobchenko 2006-02-16 06:20:48

Linux

Information needed.

Mac OS X

BrianSchott wrote Jan 13, 2006:

• I use Firefox 1.0.4 on the Mac. When I changed the preferred theme to "monomoin" from "classis" I got an improvement, but not in the box characters. On my Firefox preferences page for fonts I have the following selections now. (Again, boxes are misaligned)

  Fonts for:      Unicode
  Proportional:   Serif           Size(pixels) 16
  Serif:          Times
  Sans-Serif:     Helvetica
  Monospace:      Courier         Size(pixels) 13
  Display resolution:   96dpi  Minimum font size: none

By varying the Fixed-width font selection in Appearence tab of Safari Preferences, the following are typical results for supplied Mac OS X fonts:

It turns out that none of standard fonts have box-drawing characters in their repertoir. Other Unicode fonts, intended for far-eastern characters, are used to substitute them. The results is the same misalignment as seen on Windows.

• An installation of Tiger (Mac OS X.4) may have Courier New, either by default, or with some very common application. It has (Microsoft) as part of it's full name. (Tiger has the advantage of the Font Book application, which provides more insight into the fonts. Specifically, it show the Repertoir of a font, -- that's how we know about the presence of box-drawing characters.) However, the "standard" Courier New, version 2.6, does not have them. Now we change the Default Install Location in Font Book Preferences to User for separation; copy the four cour*.ttf files from Windows to Desktop; double-click to open in Font Book and choose Install. The files are placed in ~/Library/Fonts; in Font Book we need to disable each Courier New variety (Regular, Bold, etc.) other then those in the User folder. Examining the installed fonts, we see that it's version 2.9 and has the Box Drawing characters. Safari picks it up and displays them correctly. Firefox has less luck. To use Courier New as the font for wiki, specify a custom CSS, as the one on personal page of the contributor. Disclaimer: this note is provided for research purposes and does not constitute a direction for use, which should be considered within the respective lisence agreements.

Contributed by OlegKobchenko.

Discussion

In my case, Box Drawing Characters are not treated as fixed width by the browser in the default ("modern") style, but are treated as fixed width using the "monomoin" style.

According to an introspection feature of my browser, here's a list of the css styles for the box drawing characters in question:

Since font-family is the same in both variants, but the font-size is different, I suspect the issue is that fixed-width box drawing character are not supported in the 16px font used by the "modern" theme. (Note: Oleg's later writeup, above, suggests that the actual issue is subtly different.)

For immediate relief, perhaps monomoin could become the default theme for unregistered users. Perhaps also, the font-family in http://www.jsoftware.com/wiki/modern/css/common.css should become courier new, monaco, courier, monospace? I've not tested that one myself.

Dealing with browser compatibility issues can be messy, and the differences between the "modern" and "monomoin" layout can be disconcerting, so as specific advice the "monomoin" suggestion is worth a grain of salt. But having messed up box drawing characters is also disconcerting.

-- Raul Miller 2006-05-22 19:13:05

Alternatively, since box drawing characters are so unreliable for browsers, perhaps we should think seriously of reverting to +----+ style boxes for wiki purposes. -- Raul Miller 2007-10-23 12:35:24