Как центрировать символ в поле с помощью CSS?
Другими словами, как игнорировать глубину символов и восхождение вместо центрировать по вертикали в окружающем поле, основанном только на его ограничивающей рамке?
Вот минимальный пример html:
.box {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1em;
border: 1px solid black;
text-align: center;
}
<span class="box">?</span>
<span class="box">,</span>
<span class="box">`</span>
Ответы
Ответ 1
Вы не можете сделать это с помощью современного CSS. Вы также можете сделать это из коробки с JavaScript в браузерах.
По существу: вам нужно получить контуры глифов как пути от шрифтов. Используя эту информацию, вы можете получить поле контура маршрута и визуализировать/выровнять так, как вам нужно.
Для получения очертаний глифа проверьте это Как получить глиф-контуры буквы как пути bézier, используя JavaScript?, например.
Имея пути контура глифа, вы можете визуализировать их в <canvas>.
Ответ 2
В теории вы можете сделать это, совместив символ каждый.
Практически вы не можете, так как каждый символ имеет свою собственную глубину и восхождение на карте символов, особенно с использованием только CSS.
