Что такое единица CSS «ch»?

Что такое единица CSS ch?

От автора: я продолжаю наблюдать ситуацию, когда авторы и докладчики описывают единицу ch CSS как значение «ширины символа». Это приводит к утверждениям, что вы можете «сделать столбец контента шириной в 60 символов для максимальной читаемости» или «указать размеры изображения в определенном количестве символов!».

Что ж… и да, и нет. В частности, да, если вы используете шрифты с фиксированной шириной. В противном случае, в основном нет.

Это связано с тем, что, несмотря на то, с чем ассоциируются буквы «ch», единицы «ch» не являются единицами «символов». Они определяются как:

Равна расширенной мере глифа «0» (ноль, U + 0030), найденного в шрифте, используемом для его рендеринга. (Расширенная мера глифа — это его ширина или высота, в зависимости от того, выполняется ли написание в направлении оси аксис.)

Таким образом, ширина символа «0″ в заданном шрифте и является мерой одного «ch». В моноширинных шрифтах (с фиксированной ширине), где все символы имеют одинаковую ширину, 1ch равен одному символу. В пропорциональных шрифтах (с переменной шириной) любой заданный символ может быть шире или уже, чем символ «0».

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Чтобы проиллюстрировать это, вот несколько примеров элементов, которые заданы равными по ширине 20ch, а также содержат ровно 20 символов.

Что такое единица CSS ch?

Не удивительно, что в Courier все элементы имеют ту же ширину, что и их текстовое содержимое. В отличие от этого, в Helvetica это, в основном, не так, за исключением чисел, которые, как представляется, имеют фиксированную ширину. В Georgia, напротив, ни одна из строк не соответствует полям элемента, различаются по ширине даже цифры.

При случайных экспериментах я обнаружил, что в пропорциональных шрифтах 1ch обычно шире средней ширины символа, обычно примерно на 20-30%. Но есть, по крайней мере, несколько шрифтов, где символ «0″ тоньше отношению к другим символам; в этом случае 1ch уже, чем средняя ширина символа. Trajan Pro — один из примеров таких шрифтов, в которых ноль немного уже, чем средняя ширина символа, но я уверен, что есть другие. И наоборот, я уверен, что есть шрифты с большими толстыми нулями, и в этом случае разница между ch и средней шириной символа может составлять около 50%.

Так что в общем случае, если вы хотите получить ширину столбца в 80 символов, и собираетесь использовать для указания его размера ch, ориентируйтесь на 60ch, если вы специально не работаете с шрифтом с тонким нолем. И если вы работаете с несколькими шрифтами, скажем, один для заголовков, а другой для тела, будьте осторожны при настройке мер ch и учитывайте, что они могут не быть эквивалентны для двух шрифтов. Шансы очень, очень высоки на то, что это будет не так.

Было бы интересно увидеть, как Рабочая группа рассмотрит идею средней ширины символа как единицы измерения — например, 1acw или, возможно, 1cw, — которая фактически использует все буквы в шрифте для вычисления среднего значения. Это будет намного ближе к тому, чтобы «сделать столбцы шириной в 60 символов!» В гораздо большем количестве случаев это будет точнее, чем ch.

Автор: Eric A. Meyer

Источник: https://meyerweb.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree