Единицы длины ch vs em в IE
У меня есть текст с font-family: monospace; и white-space: pre;, где я также хочу установить максимальную ширину, чтобы она соответствовала тексту (чтобы цвет фона не перемещался дальше вправо от текста, чем требуется).
Текст имеет ширину не более 80 моноширинных символов, поэтому я установил max-width :82ch;. Это работает точно так, как ожидалось в Firefox и Chrome, но в IE он вообще не играет в мяч и занимает около 60 символов. При проверке мне кажется, что мне нужно настроить max-width: 95ch;, чтобы не было обертывания в IE, но тогда это расширяет отображение для Firefox и Chrome.
Исследуя это, я наткнулся на Длина CSS, в котором указывается единица длины ch: -
Notable browser support issues: IE 9+, no Android default browser
с чем я согласен!
Я попытался использовать em в качестве единицы длины вместо этого, поскольку в моноширинном шрифте моя интерпретация такова, что em и ch будут похожими (если не одинаковыми).
От Википедия: Эм (типографика): -
The name em was originally a reference to the width of the capital M in the typeface and size being used
Я предполагаю, что заглавная буква M имеет тот же размер, что и все символы в моноширинном шрифте (это точка моноширинного шрифта), и поэтому em и ch будут одинаковыми.
Я также наткнулся на Единицы CSS, в котором есть таблица, показывающая, что поддержка ch была только в IE9, тогда как поддержка em была в IE3, поэтому я подумал, что это может означать, что у них было больше шансов заставить ее работать!
Я обнаружил, что они, по крайней мере, согласованы во всех браузерах, но max-width: 82em; был WAAAY шире, чем мои 80 моноширинных символов. При осмотре мне кажется, что для правильной установки мне нужен max-width: 51em;.
Я проверил "вычисленные" значения font-size и max-width в трех основных браузерах и обнаружил, что все они идентичны. Все они вычислили font-size:13px; и max-width:663px;. Поскольку для max-width установлено значение 51em, это делает 1em = 13px;.
Я не понимаю, почему 80 символов моноширинного шрифта не занимают ширину 80 x 13 пикселей?
Есть ли какая-то причина, которую я не понял, или три основных браузера, которые, кажется, не могут договориться ни о чем, на самом деле постоянно делают что-то не так?
Вопрос: Как правильно установить ширину в количестве символов, которое будет работать во всех браузерах?
Боюсь, что на мой вопрос может не быть хорошего ответа. Я только что нашел этот вопрос, который точно описывает, что я хочу делать еще в 2009 году, и ответ (добавленный недавно) - использовать ch. К сожалению, ch не работает должным образом в IE, даже в IE11.
Ответы 2
em относится к em-квадрат шрифта, ch - к ширина продвижения символа 0 шрифта. Для любого данного шрифта это будет фиксированное соотношение, но обычно оно не равно 1. Например, Courier New в Windows имеет соотношение 1229/2048.
Обратите внимание, что когда вы указываете семейство шрифтов как «моноширинный», разные браузеры в разных операционных системах будут использовать разные шрифты для «моноширинного», которые могут иметь различную ширину продвижения по отношению к отношениям em-квадрат.
Я думал, что em был шириной M в шрифте. Не могли бы вы объяснить, что означает em-квадрат. У вас есть ссылка? Есть ли способ узнать соотношение, чтобы использовать ширину?
Эм-квадрат на самом деле ничего не размер. Он определяет масштаб, относительно которого устанавливаются другие метрики шрифта. Когда вы говорите font-size:16px, это означает, что размер em-квадрата составляет 16 пикселей. Шрифт и его глифы имеют различные метрики. подъем, спуск, высота шапки x высота, ширина продвижения и т. д., каждая из которых пропорциональна em-квадрату.
Итак, если размер шрифта установлен, скажем, 13 пикселей - сколько пикселей в ширину будет 80 символов? Мое предположение было 80 умножить на 13 пикселей. Однако, похоже, это не так. Какой должен быть расчет вместо этого?
Если бы шрифт был Courier New в Windows, это было бы 80 * 13 * 1229/2048.
Но как вы с этим справились? Что, если это какой-то другой моноширинный шрифт? Есть ли какой-нибудь атрибут, который можно использовать для расчета?
К сожалению нет. Соотношение является внутренним для файла шрифта. Вы должны иметь возможность проверять метрики шрифта, чтобы знать, каково соотношение. Для этого я использую Тип Light 3.2.
Любое решение, которое уходит от использования единицы длины ch, разрушает некоторые совершенно хорошие CSS для Firefox и Chrome только в пользу IE.
Следующее решение кажется хорошим компромиссом, поскольку оно работает для IE10 + с некоторым альтернативным CSS. IE9 исключен из поддержки Microsoft, поэтому мы не будем слишком долго его поддерживать, хотя это было бы возможно с помощью условных комментариев или других хаков.
.mybox {
font-family:monospace;
white-space:pre;
max-width:82ch;
width:82ch;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.mybox {
max-width:95ch;
width:95ch;
}
}
Так как же использовать
emдля установки ширины в виде количества символов?