Какова ценность единицы css 'ex'?

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

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

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

width: 22ex;

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

[ ex unit] равен используемой x-высоте первого доступного шрифта. Х-высота называется так потому, что она часто равна высоте нижнего регистра "x". Однако выражение ex определено даже для шрифтов, которые не содержат "x".

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

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

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

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

Ответ 1

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

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

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

Ответ 2

Чтобы ответить на вопрос, одно использование - с надстрочным индексом и индексом. Пример:

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

Ответ 3

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

Я использовал em с.. padding-left: 2 em; padding-right: 2 em;

и ex с padding-bottom: 2 ex; padding-top: 2 ex;

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

Ответ 4

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

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

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

Ответ 5

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

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