Вертикально выровнять символы html-сущности моноширинным шрифтом?

Question

Иногда мне нужно набирать текст там, где символьные столбцы выровнены по вертикали, и, конечно, самый простой способ - использовать семейство шрифтов "monospace", "Courier" и т. Д.

Что я заметилтем не менее, многие из символов html-кода сущности (эмодзи и т. д.) не всегда соответствуют этой фиксированной ширине шрифта, но все же будут шире, чем обычные символы, и "выталкивают" последующие символы в одну и ту же строку вправо, несмотря на использование моно-пространства.

Примеры таких:

♡ = ♡ --- немного слишком широк в моно-пространстве.

♛ = ♛ ---Слишком широкий в моноширинном пространстве.

♥ = follows --- это соответствует ширине моноширинного пространства на моем ноутбуке с Windows, но слишком широкий при просмотре с Android / Chrome.

Есть ли какое-то исправление?/ есть ли обходной путь, чтобы предотвратить это аномальное поведение?

Я думаю, есть ли способ «сжать» ширину таких символов, чтобы они все выровнялись с фиксированной шириной символа, и желательно, чтобыработает унифили на разных устройствах?

Или другое возможное решение?

Answer 1

Я полагаю, что это происходит потому, что ваш моноширинный шрифт (например, Courier) не имеет этих символов Юникода. Затем система будет использовать резервный шрифт для визуализации эмодзи, и этот шрифт не будет моноширинным.

Таким образом, наилучшим решением будет использование моноширинного шрифта, который поддерживает эмодзи, которые вы хотите использовать.

В качестве альтернативы, вы можете поставить интервал вокруг этих символов и увеличить ширину .

.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>

(Обратите внимание, что вы можете использовать символы Юникода непосредственно в исходном коде, если ваш редактор настроен правильно.)

Answer 2

[Изменить] Я отредактировал свой ответ, чтобы сделать возможным одинаковое расстояние между буквами без добавления тега span или использования класса в каждом абзаце для моего предыдущего ответа. Теперь просто введите абзацы и буквы будут выровнены.

Это выровняет буквы любого шрифта в столбцах, однако я использовал моноширинный интервал, так как это то, что вам интересно.

Обратите внимание, я добавил рамку в примере, чтобы показать выравнивание, просто удалите этот стиль.

Запустите фрагмент кода, чтобы увидеть.

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>