Масштаб

Контракт

<html data-scale="16">               <!-- настройка человека, на корне -->
  <section data-density="compact">   <!-- плотная область внутри -->

Обычное расположение именно такое: масштаб выбирает человек и ставит на корень, плотность выбирает автор экрана и ставит на область. Обе оси складываются — сочетание описано отдельной ячейкой токенов.

Масштаб первичен

При одиночном совпадении токен забирает масштаб: блоки [data-scale] стоят в токенах после блоков плотности, а специфичность у них одинаковая. Плотность возвращает своё в двумерной ячейке [data-scale][data-density].

У ячейки два селектора, и второй обязателен: парный ловит только оба атрибута на одном элементе, а плотная панель внутри крупного корня — ровно потомковый случай. Без него панель взяла бы геометрию базы, оставив крупный кегль.

Доступность

Масштаб — ответ на увеличенный системный шрифт, но не замена ему. Высоты контролов применяются как min-block-size, поэтому текст, выросший от настройки браузера, раздвигает контрол, а не обрезается в нём.

Цели нажатия

Все пятнадцать сочетаний масштаба и плотности проходят WCAG 2.2 AA 2.5.8 — проверяет cmd/targets по сетке 5 × 3.

Шкала

Кегль

Значения объявлены в rem и точны при корне 16px. Ось масштаба умножается на настройку «размер шрифта по умолчанию» в браузере, а не заменяет её: человек, поднявший корень до 20px, получит от ступени ещё одну ступень сверху.

Радиусы и высоты

Лестница радиусов растёт ступенями, а не множителем: радиус обязан остаться чётным, иначе на плотности пикселей 1.5 дуга садится мимо устройственной сетки. Из-за этого соседние ступени местами делят одно значение — чётного числа между 8 и 10 не существует.

Отступы двигаются по шкале --space-*, а она разрежена нарочно, поэтому шаг у них крупнее, чем у кегля: соседние ступени масштаба часто берут одну и ту же ступень отступа.

Что НЕ масштабируется

Правила

Лестница начинается с 14 и не может начинаться ниже. Это не выбор, а арифметика двух правил кита, перемноженных друг на друга: пол кегля — 11px, минимальный шаг лестницы — 1.12, а под базой лежат две ступени, 2xs и xs. Отсюда

минимальная база = 11 × 1.12 × 1.12 = 13.8px

и 14 — первое целое, которое в это влезает. При базе 13 второй ступени вниз достаётся 10.36px, при базе 12 — 9.57px; обе ниже пола. Опустить лестницу можно, только сдвинув пол, шаг или число ступеней под базой — каждое из трёх отдельное решение. «Мельче» остаётся работой плотности.

Значения таблицы авторские, а не вычисленные. Пропорциональный пересчёт проваливает правило шага регулярно: при базе 16 честная доля даёт xs = 14.5, то есть шаг 1.103 при норме 1.12. Умножение ломает и чётность радиуса, и рост лестницы, и полосу отношения радиуса контрола к высоте.

Компонент, который ломается на ступени 18, содержит зашитый кегль или зашитую высоту — то и другое обязано быть ролью.

Что брать, а что нет

Тремя плотностями «крупнее» не выражалось. На 27″ 4K при системном масштабе 100% кит рисовался мелко, а единственная ручка, похожая на ответ, — просторная плотность — давала воздух, а не размер: строки разъезжались, буквы оставались теми же.

Проверка, отличающая ось от переименования, та же, что у атрибутных словарей: если две ручки дают один результат, это одна ручка с двумя именами. Здесь они расходятся, и это видно на числах.

Высота и отступ совпали почти точно, кегль — нет. Это два разных экрана, а не один и тот же с двух сторон.

API

Связанное

Плотность Типографика Ритм и форма Токены