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