Make substitution characters from non-width fonts appear with the correct width when used as a monospace font

Question

Web browsers replace a missing character in a font (usually an arrow, a graphic character, and in my specific use case, a Unicode character "" (U + 226B)) with a character in a different font. If you use a monospace font, the replacement character comes (most of the time) from the proportional font and spoils the strict grid pattern, which in many cases is required when using monospace fonts.

For example, in my browser this is corrupted:

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

The pipe symbol after "" is not consistent with others (with fonts installed on my machine).

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

A JavaScript solution would also be great if necessary.

Answer 1

This is the best answer only partially, but it may be useful for some people. In the CSS font stack, you can add a monolayer font that has good Unicode coverage. For example, Courier New in OS X includes over 1200 glyphs, which I assume includes most of the useful Unicode characters. If you list it after the main font in the font stack, you should at least have a consistent width for those characters that are not in your main font.

Of course, this really does not solve the problem if the width of the main font is different from the width of the backup. If you're lucky, you can find a fallback font with the same width that has enough Unicode coverage, in which case you can use it as is. Otherwise, I think you have no easy solutions. In this case, I can come up with a couple of alternatives.

• If the license permits this, you can change the width of the backup font so that it matches your main font.
• If you know in advance which Unicode characters you want to display, you can wrap them with a <span> and adjust the styles to match the width of the main font.

Hard decision anyway, I'm afraid.

PS You might want to change your title. I think you mean "monolayers" because "monotype" is a casting type.

Answer 2

How hardcore are you ready to be?
Here's the code that wraps each letter of the text in a range 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 support IE8, etc.).

Answer 3

The preliminary character width in a monospaced font is fixed for a particular font, but may differ for different monospaced fonts. If you limit yourself to using a certain monospace font (on web pages this only makes sense when using @font-face , since all computers do not have a monospace font), you can find out its width (for example, using a font checker or with some testing ), and then scale the item to this width.

However, the font size does not depend on the width of the elements, except with some JavaScript programming, so the easiest way is to use an image if your problem is just one character. Write the character in some large font, take a screenshot, and then scale the image using the img element, for which you set only the width. Alternatively, you can only create the image in the correct size, but it will be less flexible if you later change the font (so the width can also change).