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.

Screenshot from iOS 7.0.4 Safari

...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:

Screenshot from iOS 7.0.4 Safari

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.

Bird

We had an unexpected visitor in our backyard this evening. I was walking out to check the mail and heard a screech and saw the flutter of wings.

I popped inside the house to get Z and we started breaking through the snow in the backyard, looking up in the trees. We were both startled to see a large hawk, almost within arms reach of us!

We admired the bird for a while, and then I sent Z in to get a coat and grabbed my camera. Happily, the bird decided to hang around for a bit longer (although on a higher branch).

The photos aren't amazing, but I did get a few passable ones - mostly from the same angle, so I'll spare you the repetition. The hawk had 'treed' a few squirrels in an adjacent pine. They were making crying noises, and understandably, were both scared witless.

The bird eventually got bored of my picture taking and decided to fly away, squirrel-less.