Каково значение модуля css 'ex'?

(Не путать с Xunit , популярной библиотекой модульного тестирования .Net.)

Сегодня в порыве скуки я начал инспектировать Gmails DOM (да, мне было очень скучно).

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

width: 22ex;

Сначала я был в тупике («что такое« бывший »?»), Потом он вспомнил: я, кажется, припоминаю кое-что из того, что было много лет назад, когда я впервые изучал CSS. Из спецификации CSS3 :

[ Единица ex ] равна используемой высоте по оси x первого доступного шрифта . Высота по оси x называется так потому, что она часто равна высоте строчной буквы «x». Однако "ex" определено даже для шрифтов, не содержащих "x".

Ну и хорошо. Но я никогда раньше не видел, чтобы он использовался (а тем более сам). Я довольно часто использую em и ценю их ценность, но почему именно "ex"? Это кажется гораздо менее стандартным измерением, чем em, и гораздо менее полезным.

Одна из немногих страниц, на которых я нашел обсуждение этой темы, - это http://www.xs4all.nl/~sbpoley/webmatters/emex.html Стивена Поли . Стивен высказывает хорошие замечания, однако его обсуждение кажется мне безрезультатным.

Итак, мой вопрос: какое значение имеет «ex» для веб-дизайна?

(Этот вопрос можно назвать субъективным, но я оставлю это решение более опытным сотрудникам службы поддержки, чем я.)

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

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

Как отметил Джонатан в комментариях, ex - это просто версия высоты em (ширина).

Чтобы ответить на этот вопрос, можно использовать верхний и нижний индекс. Пример:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Еще одна вещь, которую следует учитывать, - это то, как ваша страница масштабируется, когда пользователь увеличивает или уменьшает размер шрифта (возможно, используя Ctrl + колесо мыши (Windows)).

Я использовал их с .. padding-left: 2 em; отступ справа: 2 см;

и ex с padding-bottom: 2 ex; обивка-верх: 2 отл;

Таким образом, используется вертикальная единица измерения для свойства вертикального масштабирования и горизонтальная единица измерения для свойства горизонтального масштабирования.

Ценность наличия этого параметра в спецификации CSS, если вы действительно об этом спрашиваете, точно такая же, как и значение единицы em.

Это позволяет вам установить относительные размеры шрифтов .

Вы не знаете, какой у меня базовый размер шрифта. Итак, одна хорошая стратегия для веб-дизайна - установить относительные, а не абсолютные размеры шрифта; эквивалент «вдвое больше обычного» или «немного меньше обычного», а не фиксированного размера, например «десять пикселей».

Обратите внимание, что такие термины, как «одинарный / двойной межстрочный интервал» на самом деле означают смещение между двумя соседними линиями, измеренное в em . Так значит «разделительные двойная линия» каждая строка имеет высоту 2 эм .

Поэтому, если вы хотите указать расстояние по вертикали, пропорциональное «линиям», используйте em. Используйте ex только в том случае, если вам нужна фактическая высота строчной буквы, что, осмелюсь сказать, встречается гораздо реже.

ОБНОВЛЕНИЕ: веб-стандарт позволяет браузеру использовать 0.5em как ex или производный от шрифта.

Однако нет никакого способа надежно встроить любую информацию «x-height» в шрифт (OpenType или webfont).

Следовательно, первая возможность делает экс-блок избыточным, а вторая не имеет надежных средств для этого. И тот факт, что это возможно, делает его еще менее надежным.

Таким образом, я утверждаю, что бывшая единица не имеет ценности.