当用作等宽字体时，使用非等宽字体的替换字符以正确的宽度显示

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.

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

Answer 2

How hardcore are you willing to be?
Here's a code that wraps every letter of a text in a span with a given width:

var container = document.getElementsByClassName('mymonotext');
if (!container.length) {
    throw new Error('.mymonotext is not found');
}

container = container[0];
container.normalize(); //Merge all the adjacent text nodes inside a container (see https://developer.mozilla.org/en-US/docs/Web/API/Node.normalize)

var currentNode = container.firstChild;
for (var i = 0, len = currentNode.textContent.length; i < len - 1; i++) {  
    var range = new Range(); //Create a range

    //Insert a first char into a range
    range.setStart(currentNode, 0); 
    range.setEnd(currentNode, 1);

    var wrapper = document.createElement('span');
    wrapper.className = 'letter';

    //Wrap the range with a span tag
    wrapper.appendChild(range.extractContents())
    range.insertNode(wrapper);

    //Detach the previous range and shift current node
    range.detach();
    currentNode = currentNode.nextSibling.nextSibling;
}

Styles for the wrapper tag:

.letter {
    width: .5rem;
    display: inline-block;
    overflow: hidden;
}

Same thing on jsfiddle: http://jsfiddle.net/enwyoy4y/
(use at your own risk, yada-yada, does not supports IE8 and such).

Answer 3

The advance width of characters in a monospace font is fixed for a specific font but may be different for different monospace fonts. If you limit yourself to using a particular monospace font (on web pages, this is meaningful only when using @font-face , since there is no monospace font that is available in all computers), you can find out its advance width (eg using a font inspector program, or with some testing) and then scale an element to that width.

However, you cannot make font size depend on an element's width, except with some JavaScript programming, so it is simplest to use an image, if your problem is just one character. Write the character in some font in large size, take a screenshot, and then scale the image using an img element for which you set the width only. Alternatively you could create the image in just the right size, but this would be less flexible if you later change the font (so that the width may change too).