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 around 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 configurations for Far Easter language support may interfere with Box Drawing characters. These settings are located in XP on the Control Panel → 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 compliant" by the typesetting subsystem, although the regular fonts may also have the same characters.
-- Oleg Kobchenko <<DateTime(2006-02-02T22:53:06Z)>>
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.
-- Oleg Kobchenko <<DateTime(2006-02-16T06:20:48Z)>>
Linux
<!> Information needed.
Mac OS X
Brian Schott 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 Appearance 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 repertoire. 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 its full name. (Tiger has the advantage of the Font Book application, which provides more insight into the fonts. Specifically, it shows the repertoire 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 license agreements.
Contributed by Oleg Kobchenko.
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:
"modern" "monomoin" Font & Text font-family courier, monospace font-size 16px 12.6667px line-height 20px 13.9333px white-space -moz-pre-wrap Color & Background background-color #FFF8ED #F0F9F3 color #000000 Box height 160px 111.467 width 917px 733.667 border 1px solid #AEBDCC 1px dashed #2F6FAB margin 16px 16px 0 0 13px 13px 0 0 padding 7px 7px 7px 7px 13px 13px 13px 13px Positioning display block
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 <<DateTime(2006-05-22T19:13:05Z)>>
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 <<DateTime(2007-10-23T12:35:24Z)>>