Monospace in iOS Safari

Back in 2008, Dr. Drang wrote about how Monospace Characters in iOS were not actually monospaced. The situation has improved since then.

Today, drawing the same characters in a <pre> or <code> block works just fine.

...with an important exception. Using certain unicode "line drawing" characters in a <pre> or <code> block still, maddeningly, does not appear to be monospaced.

Here's an example of line drawing, which should look good on a desktop browser:


┌───────┐
│·······│
│·······│
│·······│
│·······│
└───────┘

When I previewed my line drawings on iOS, I couldn't get them to look right.

After searching the web I did find a little help.

Courier New appears to do a much better job of handling extended characters, and by explicitly requesting "Courier New" in your stylesheet, your text will render correctly. Here's a demonstration:

HTML for the above page is on Github.

If you are having trouble with extended characters rendering as monospaced in a <pre> or <code> block, make sure you are using "Courier New" rather than Courier.