Яке значення одиниці css 'ex'?

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

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

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

width: 22ex;

Спочатку мене тупили ("що таке" колишній "?"), Потім це повернулося до мене: я, здається, пам'ятаю щось із років тому, коли вперше вивчав CSS. З специфікації CSS3 :

[ Колишня одиниця ] дорівнює використаній висоті x першого доступного шрифту . Висота x називається так, оскільки вона часто дорівнює висоті нижнього регістру "x". Однак "ex" визначено навіть для шрифтів, які не містять "x".

Ну і добре. Але я ніколи раніше не бачив, щоб він використовувався (і тим більше не використовував сам). Я використовую ems досить часто і ціную їх цінність, але чому "колишній"? Це здається набагато менш стандартним вимірюванням, ніж EM, і набагато менш корисним.

Однією з небагатьох сторінок, на якій я обговорював цю тему, є http://www.xs4all.nl/~sbpoley/webmatters/emex.html Стівена Полі . Стівен висловлює добрі думки, проте його обговорення видається мені безрезультатним.

Отже, моє запитання: яке значення одиниця "колишня" надає веб-дизайну?

(Це питання можна позначити як суб'єктивне, але я залишу це рішення більш досвідченим СО, ніж я.)

Це корисно, коли ви хочете розмір чогось щодо висоти малих літер вашого тексту. Наприклад, уявіть, що працюєте над таким дизайном:

У типографському вимірі дизайну висота літер має важливе просторове відношення до решти елементів. Рядки на вихідному зображенні вище призначені допомогти вказати висоту x тексту, але вони також показують, де були би орієнтири, коли б ви проектували навколо цього тексту.

Як зазначив Джонатан у коментарях, ex - це просто висотна версія em (width).

Щоб відповісти на запитання, один із варіантів - верхній та нижній індекси. Приклад:

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

Тут слід також врахувати, як масштабується ваша сторінка, коли користувач збільшує або зменшує розмір шрифту (можливо, використовуючи ctrl + коліщатко миші (windows)).

Я використовував em з .. padding-left: 2 em; відступ праворуч: 2 ем;

та колишній із заповненням дна: 2 колишній; підкладка: 2 колишні;

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

Значення його в специфікації CSS, якщо це те, про що ви насправді питаєте, точно таке ж, як значення наявності одиниці em.

Це дозволяє встановити шрифти до відносних розмірів.

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

Зверніть увагу, що такі терміни, як "одинарний / подвійний міжрядковий інтервал", насправді означають зміщення між двома сусідніми рядками, виміряне за допомогою em . Отже, "подвійний інтервал між рядками" означає, що кожен рядок має висоту 2 em .

Тому, якщо ви хочете вказати вертикальну відстань, пропорційну "лініям", використовуйте em. Використовуйте ex, лише якщо ви хочете дійсну висоту малих літер, яка, смію стверджувати, набагато рідше.

ОНОВЛЕННЯ: Веб-стандарт дозволяє браузеру використовувати 0.5em як ex або похідне від шрифту.

Однак неможливо надійно вбудувати будь-яку інформацію "x-height" у шрифт (OpenType або webfont).

Отже, перша можливість робить колишню одиницю зайвою, а другій не вистачає будь-яких надійних засобів. А той факт, що це можливо, робить його ще менш надійним.

Таким чином, я аргументую відсутність вартості колишньої одиниці.