How to display special unicode characters using monospace font in HTML with preserved character width

Question

I'm using pre element to display some text including special unicode characters (⚡ ⚑ ▶ ◀ ⁋). I noticed that browsers render these special characters wider than regular ones, occupying more space horizontally.

This can be easily seen here: https://gist.github.com/968b5c22cce14909cf27 Both lines have 20 characters but notice that first one is longer (screen pixels).

Is there a way (CSS) to force pre elements (or other element with monospace font applied) to have really fixed character width?

I checked on Chrome and Firefox and they both expand the width of special characters.

Answer 1

The reason is that some of the characters are missing from the first font listed in the font-family declaration being applied. They will thus be displayed some other font(s) in the system, or some indicator of unrepresentable character is shown.

For example, the first character is present in a handful of fonts only, see http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm (which does not cover all fonts but most fonts that people probably have on their computers).

Even if the other fonts used are monospace font, they may have different advance widths for characters. For example, Everson Mono has a slightly smaller width than DejaVu Sans Mono. Being monospace means just that within the font, all characters have the same advance width.

So you would need to use a single font that contains all the characters you need. For this collection of characters, the two above-mentioned fonts are probably the only publicly distributed monospace fonts that contain them all. Well, there is unifont, but it is a bitmap font with very coarse design; it might look tolerable in 12pt size or somewhat larger.

Answer 2

Add a span around each special character and set a fixed width for all span elements.

Example CSS:

pre .specialchar {
   display:inline-block;
   width: 8.7px;  /* Find the right value */
}

Example HTML:

<pre>Test 123 AAA 123
Test 123 <span class="specialchar">▶</span><span class="specialchar">▶</span><span class="specialchar">▶</span> 123</pre>

Results in same width for each character:

Answer 3

It's not the browser that's expanding the characters, it's the font definition itself. I doubt that there exists a truly monospace font that includes all these characters and defines them all at the same width, but that's what you should be looking for. See this question for more details about why this is probably not available.