7

I recently discovered this historical document, which purports to act as a test of UTF-8 encoding for whatever application displays it.

When I paste it into my terminal (iterm2), it loads the box drawings at the end beautifully (except for a couple at bottom right):

correctly rendered unicode box drawings

But in both Chrome and Firefox, they are crooked and clearly wrong:

incorrectly rendered unicode box drawings

It seems the difference has to do with the width of the rendered character: for example "╲" displays in my terminal as wide as other characters such as "a", but in the browser it displays wider.

Is this a deliberate choice, and if so what inspired it? If not, where is the right place to file a bug?

EDIT

Thanks to Tom Blodget's answer, I am now aware that fonts are an important consideration. I'll clarify:

In my screenshots above, Firefox and Chrome are using Courier as the monospace font, while the terminal is using Monaco. In both contexts, the font seems to apply as much to the box-drawing characters as to the ASCII ones: when I change the font, the appearance of the drawings changes as well as that of the surrounding text.

When I switch the terminal to either Courier or Courier New, it shows the box drawings equally well -- in some ways better!

When I switch either browser to Monaco, it still shows the box drawings wrong, again from characters apparently displaying at a wider-than-monospace width.

So it still seems like the browsers are doing something wrong.

2
  • Are you using a monospaced font? Consoles typically use monospaced fonts by default, but browsers do not. Feb 16, 2019 at 0:24
  • This appears as part of a <pre> element, so the surrounding ASCII text (including the visible part in the screenshot, "Box drawing alignment tests:") is monospace.
    – jsharp
    Feb 16, 2019 at 5:09

2 Answers 2

2

When I go to dev tools, I see the entire test is one pre element. Several fonts are being used on my system. Everything looks okay except the hatch pattern on the right.

If I hack out all of the other text, the only font used is Consolas and it looks okay. I think it's down to which fonts you have, how the browser prioritizes them, especially when it has to use more than one, and (conjecture) two monospaced fonts need not have the same width.

A terminal is likely to be less adept at using multiple fonts, instead, using one fixed one or selecting one "best" match for the required characters.

[Google Chrome 72.0.3626.96 on Windows 10.]

2
  • Thank you for alerting me to the (now obvious :-/) importance of font choice. Editing the question since this hasn't fully solved it for me.
    – jsharp
    Feb 20, 2019 at 15:13
  • Are you are providing your web browser with monospace fonts that have the same width for the required characters? Might you also be providing it with other options and not giving it a page that says which fonts to use? I don't think the test is for selecting fonts, just positioning. Feb 20, 2019 at 16:39
2

This is likely the same as https://bugs.debian.org/981577

If you have any old fonts installed that don't cover the unicode BOX DRAWING range, it's likely that your browser is stitching them together. While each font itself might be monospace (each glyph is the same width within the font), the combination of fonts might not be monospace (because glyph width differs between fonts), which is why the alignment fails.

I found on my system that uninstalling the legacy Bitstream Vera font resolved the issue. (Bitstream Vera has been superseded by DejaVu Sans)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.