Make replacement characters from non-monospace fonts appear with correct width when used as monospace font

Question

Web browsers replace a missing character in a font (usually an arrow, a graphical symbol and in my particular use-case the unicode character "≫" (U+226B)) with the character from another font. If you are using a monospace-font, the replacement character comes (most of the time) from a proportional font and will mess up the strict grid-pattern that is in many cases desired when monospace fonts are used.

For example, in my browser this is messed up:

<pre>
012345
 1 |
 a |
 Ö |
 % |
 ≫ |
 2 |
 b |
 X |
 & |
</pre>

The pipe-symbol after "≫" does not align with the others (at with the fonts that are installed on my machine).

Is there a way to make sure that the browser scales the replacement character to the correct width?

A JavaScript solution would be also fine if necessary.

Answer 1

This is at the very best only a partial answer, but perhaps it will be helpful to some folks. In your CSS font stack, you can include a mono-spaced font that does have good unicode coverage. For example, Courier New in OS X includes over 1200 glyphs which I'm guessing includes most of the useful unicode characters. If you list it after your primary font in your font stack, you'd at least have a consistent width for those characters absent from your primary font.

Of course, that doesn't really solve the problem if the width of the primary font differs from the width of the backup. If you're lucky, you may be able to find a backup font with the same width that has sufficient unicode coverage, in which case you can use it as is. Otherwise, I think you're out of simple solutions. In that case I can think of a couple of alternatives.

1. If the license permits it, you could modify the width of a backup font so that it matches your primary font.
2. If you know in advance which unicode characters you want to display, you could wrap them in a <span> tag and adjust the styles to match the primary font's width.

Not an easy solution in any case I'm afraid.

P.S. You might want to edit your title. I think you mean "mono-spaced" as "monotype" is a type foundry.