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

87

(Не путать с 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» для веб-дизайна?

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

css  specifications  units-of-measurement 
— Джоэл
источник

Ответы:

124

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

альтернативный текст


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

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

— Рекс М
источник
29
просто чтобы добавить, это эквивалент высоты использования единицы 'em' для ширины
— Джонатан Фингланд
3
@Joel Каково соотношение между шириной m и высотой x для данного шрифта? Несмотря на то, что он фиксирован, его потенциально может быть очень сложно вычислить, потому что каждый шрифт имеет различное и произвольное соотношение между его m и его x. Таким образом, при разработке элементов, которые должны соответствовать типу, вместо того, чтобы определять соотношение самостоятельно, вы можете полагаться на высоту x, чтобы сохранить пропорции.
— Rex M
2
Еще один довольно эзотерический момент заключается в том, что согласно Mozilla Gecko может масштабировать элементы с помощью exes немного точнее, чем те, которые используют em. По умолчанию размер em без стиля составляет 10,06667 пикселей, а размер ex - 6 пикселей. Это означает, что при масштабировании ems Firefox приходится округлять частичные пиксели чаще, чем при масштабировании exes.
— benrifkah 05
1
Хотя в целом это не правильно, можно предположить, что 2ex примерно того же размера, что и 1em (хотя высота заглавной буквы обычно несколько меньше 1em). В спецификации CSS даже указано, что «если невозможно или непрактично определить высоту по оси x, следует использовать значение 0,5em».
— natevw 03
20
@JonathanFingland @RexM В отличие от печати типографии, в CSS, то emустройство никак не измерить ширину - он измеряет высоту шрифта. 1 em- вычисленное font-sizeзначение , font-sizeуказывающее «желаемую высоту глифов» . Так что emи exрост измерьте. ( chоднако измеряет ширину.)
— Рори О'Кейн,
20

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

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
— jbs
источник
1
Я не думаю, что это действительно помогает объяснить, что такое «бывший».
— duskwuff -inactive-
12
Вопрос в том, «Какое значение имеет« бывший »элемент для веб-дизайна?». Не "что такое бывшая единица?" Джоэл очень хорошо определяет бывшую единицу в исходном вопросе. Я даю практический пример того, как вы можете использовать его для размещения надстрочного индекса.
— jbs
1
Хороший практический пример, прямо отвечающий на вопрос. Отлично сработано.
— Basil Bourque
2

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

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

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

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

5
И em, и ex являются вертикальными единицами, поскольку они определяются как высота верхнего регистра «M» и нижнего регистра «x» соответственно. Их можно использовать как для вертикальной, так и для горизонтальной длины.
— JacquesB,
В дополнение к этому, chэто горизонтальная единица измерения ширины нулевой цифры («0»).
— Мэтт Ф.
1

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

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

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

— АмвросийЧасовня
источник
Я согласен с этим. Но разве спецификации em не достаточно для этого и более надежны?
— Joel
@JoelPotter да, но только для ширины; для высоты exкажется эквивалентным.
— Аневс считает SE злом
5
@ANeves Неправильно. В CSS em - это высота шрифта (приблизительно), а не ширина . В печатной типографии идея em возникла из ширины верхнего регистра M. Но CSS доработан em. См. Википедию .
— Basil Bourque
2
Если вам нужна ширина, используйте chединицы измерения, указанные в другом ответе.
— Basil Bourque
1

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

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

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

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

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

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

— Йи Ян
источник
Этот вопрос конкретно касается его значения, а не его значения.
— Мэтт Ф.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.