How to fix Monospacing for Unusual characters on Windows?

Question

I have some output on my screen in a pre with a monospaced font. It shows up correctly on Mac on both Chrome and Firefox. However, on Windows, it loses its monospacing.

Here's an example from my site:

▥▥▥▥▥▥▥▥▥▥
▥♖.......▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥.......☆▥
▥▥▥▥▥▥▥▥▥▥

How do I fix it so each character takes the same amount of space, even on Windows?

Here's some more test text:

0123456789
..........
▥▥▥▥▥▥▥▥▥▥

Update: It seems its an issue with how Windows displays certain characters, like ▥. Is there a way to get around this?

Answer 1

Looking at the Computed Styles tab in Chrome, the reason for the issue is it is getting the glyphs from three different font faces:

Courier New -- 72 Glyphs
Lucida Sans Unicode -- 36 Glyphs
Arial Unicode MS -- 2 glyphs

Each of these faces will have different sizing.

Possible Solutions

• Replace border glyphs with css border
• Replace 'empty' cells with a glyph from the same area as the chess pieces, possibly U+3000 "ideographic space": 　
• use something like a ul or even flexbox to display the elements - gives the advantage of being able to select each element programatically!

Good luck

Answer 2

Use the CSS property letter-spacing.

// probably use a more explicit css selector than pre, but this works
pre {
  letter-spacing: 12px;
}

Result;

Edit;

I misunderstood, while it looks nicer with some letter-spacing, that wasn't the problem. Just had a look around for a clean solution but was unable to find anything. The two solutions I can suggest are;

1. Wrapping each character in a <span> and giving the span a width.
2. Find a new font that works.

I'll continue to have a look around and see if I can find anything.