How to display Unicode special characters using a monospace font in HTML with character widths preserved

Question

I use the pre element to display some text, including special Unicode characters (⚡ ⚑ ▶ ◀ ⁋). I noticed that browsers make these special characters wider than usual, taking up more horizontal space.

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

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

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

Answer 1

The reason is that some of the characters are missing in the first font specified in the font-family declaration. Thus, they will display some other fonts in the system or some kind of indicator of an unpredictable character will be displayed.

For example, the first character is present in only a few fonts, 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 a monospace font, they may have different widths for characters. For example, Everson Mono has a slightly smaller width than DejaVu Sans Mono . As monospaced means only that inside the font all characters have the same width.

Thus, you will need to use one font containing all the characters you need. For this collection of characters, the two above-mentioned fonts are probably the only widespread monospace fonts that contain all of them. Well, there is unifont , but it is a bitmap font with a very crude design; it may look tolerable at 12pt or more.

Answer 2

This is not a browser that extends characters; it is the very definition of a font. I doubt that there is a truly monospaced font that includes all of these characters and defines them all of the same width, but this is what you should be looking for. See this question for more details on why this is probably not available.