Vertically align html-entity characters in monospace font?

Question

Sometimes, I need to type text where the character-columns are aligned vertically, and the simplest way of course is to use font-family "monospace", "Courier", etc.

What I noticed, though, is that many of the html entity-code characters (emojis, etc) do not always comply with this fixed font-width, but will still be wider than normal characters and "push" subsequent characters on the same line to the right, despite using monospace.

Examples of such are:

♡ = ♡ --- slightly too wide in monospace.

♛ = ♛ --- much too wide in monospace.

♥ = ♥ --- this follows monospace width on my windows laptop, but much too wide when viewing with android/chrome.

Is there any fix/workaround available to prevent this anomalous behaviour?

I'm thinking, if there is a way to "compress" the width of such characters, to ensure they all align with the fixed character-width, and preferably that works uniformly across different devices?

Or other feasible solution?

Answer 1

I believe that's happening because your monospace font (e.g. Courier) doesn't have those unicode glyphs. The system will then use a fall-back font to render the emojis, and that font is not monospaced.

Thus, the best solution would be to use a monospaced font that supports the emojis you want to use.

Alternatively, you can put in a span around those characters and force the width.

.monospace {
  font-family: monospace;
  font-size: 20px;
}
.monospace > span {
  display: inline-block;
  width: 12px;
}

<div class="monospace">
  foo<br>
  <span>♡</span><span>♛</span><span>♥</span>
</div>

(Notice that you can use the unicode chars directly in the source code if your editor is set up correctly.)

Answer 2

[Edit] I edited my answer to make it possible to equally space letters without having to add a span tag or use a class on each paragraph per my previous answer. Now, just type the paragraphs and the letters will align.

This will align letters of any font in columns, however I used monospaced since this is what you are interested in using.

Note, I added a border in the example to show alignment, just remove this style.

Run code snippet to see.

window.onload = function() {
    numRows = document.getElementById("spacingcontainer").children;
    for (i=0; i<numRows.length; i++) {
        temp = "";
        for (j=0; j<numRows[i].innerHTML.length; j++) {
            letter = numRows[i].innerHTML[j];
            temp += "<span>" + letter + "</span>";
        }
        numRows[i].innerHTML = temp;
    }
}

	#spacingcontainer {
	    display:table;
	    font:18px monospace;
	}
	#spacingcontainer p {
	    display:table-row;
	}
	#spacingcontainer p span {
	    display:table-cell;
	    width:12px;
	    text-align:center;
	    border:1px solid silver; /* remove border */
	}

<div id="spacingcontainer">
<p>Align letters in columns.</p>
<p>&#9825;a&#9819;&hearts; &#174;q f&#174; h&#8364;j&#9825;i&#165; &hearts;&#163;&#162;&#9820;&#9826;&#9825;&hearts;</p>
<p>This is monospaced font</p>
</div>