Единицы измерения значений свойств

Требования к единицам измерения

Для измерения объектов киберпространства отсутствуют система измерения и соответствующие абсолютные единицы измерения. Существующие относительные единицы измерения привязаны к абсолютным единицам предметной области, расположенной за пределами киберпространства (реальности).

Для снижения гетерогенности измерителей необходимо:

1. Максимально снизить зависимость киберпространства от реальности. Использовать только относительные единицы измерения, привязанные к одному единственному корневому элементу (html).
2. Создавать макеты вебстраниц, адаптируемые для различных устройств.
3. Предоставить пользователю возможность:

• изменять масштаб отображения на экране корневой единицы измерения и тем самым всего — вебсайта;
• изменять макет вебстраниц, подгоняя интерфейс и конструкции вебсайта под комфортное чтение на доступном устройстве.

Рассмотрим значения и единицы измерения свойств элементов гипертекста.

Абсолютные единицы измерения

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

Пиксел (Pixel) — абсолютная единица измерения длины. Наименьший логический элемент двумерного цифрового изображения в растровой графике. Нормативно определён как 1⁄96 дюйма.

Значение в пикселях (px) статическое, независимое от операционной системы и браузера. Результат отображения различен для разных браузеров, поскольку они используют разные алгоритмы отображения.

Список абсолютных единиц измерения:

• in (Inches) — 1 дюйм равен 96px, 2,54 сантиметра, 25,4 миллиметра;
• cm (Centimeters) — 1 сантиметр равен 37,7952755906px или 0,3937007874 дюйма;
• mm (Millimeters) — 1 миллиметр равен 3,77952755906px или 0,03937007874 дюйма;
• Q (Quarter-millimeters) — 1 четверть миллиметра равна 0.94488188976px;
• pc (Picas) — 1 пика равна 0,16666666666 дюйма, 0,42333333331 сантиметра, 4,2333333331 миллиметра;
• pt (point) — 1 пункт равен 0,01388888888 дюйма, 0.03527777775 сантиметра, 0.3527777775 миллиметра, 1.3333333333333333px;
• px (pixel) — 1 пиксел равен 0,2645833333 миллиметра, 0,75pt, 1,0583333332 четверти миллиметра.

Если значение 0, идентификатор единицы измерения не нужен. В остальных случаях идентификатор единицы измерения обязателен. Он нечувствителен к регистру. Располагать следует сразу после числовой части значения без пробела.

Абсолютные единицы измерения углов

Список единиц измерения углов для типа данных angle:

• deg (Degrees) — в полном круге 360 градусов;
• grad (Gradians) — в полном обороте 400 градов;
• rad (Radians) — в полном круге 2π радиан;
• turn (Turns) — в полном круге 1 оборот.

Градус (Degre) — единица измерения плоских углов. Используют для определения координат точки земной поверхности, а также определения азимута.

В CSS 0deg расположен на пересечении окружности с осью Y (на 12 часов), а градусы отсчитывают по часовой стрелке.

Град, метрический градус (Gradian) — единица измерения плоских углов. По аналогии с градусом град разбивают на метрические минуты (1 град=100 минутам) и метрические секунды (1 минута=100 секунд).

Радиан (Radian) — единица измерения плоских углов в Международной системе единиц (СИ). Центральный угол, соответствующий дуге окружности, длина которой равна радиусу.

Абсолютные единицы измерения времени

Список единиц измерения времени для типа данных time:

• ms (Milliseconds) — миллисекунда;
• s (Seconds) — в 1 секунде 1 000 миллисекунд.

Абсолютные единицы измерения частоты

Список единиц измерения для типа данных frequency:

• Hz (Hertz) — количество событий в секунду;
• kHz (KiloHertz) — 1 килогерц это 1000 герц.

Абсолютные единицы измерения типа Flex

Флекс (Flex) — адаптивная длина контейнера сетки макета.

Обозначение единицы измерения: fr.

Абсолютные единицы измерения разрешения

Список единиц измерения времени для типа данных resolution:

• dpcm (Dots per centimeter) — точек на сантиметр;
• dpi (Dots per inch) — точек на дюйм;
• dppx, x (Dots per px unit) — точек на пиксел.

Относительные единицы измерения

При написании правил стиля CSS используют относительные величины от размера шрифта. Для относительных единиц измерения необходимо указывать относительно чего рассчитывать значение.

Существует два типа относительной длины: длина относительно шрифта и длина относительно области просмотра. В свою очередь единицы измерения относительно шрифта классифицируют по видам: на локальные и корневые. Рассмотрим локальные и корневые виды подробнее.

Единицы измерения относительно шрифта

Локальную высоту глифов рассчитывают по размерам шрифта или высоте строки. Нижеследующие значения применяют для задания свойств шрифта font-size и line-height. Например, значение em определяют относительно размера шрифта, а значение ex — относительно высоты x шрифта.

Список локальных единиц измерения относительно локального шрифта:

• cap (Cap height) — номинальная высота глифов верхнего регистра;
• ch (Character height) — средний размер (горизонтальный сдвиг) узкого глифа в шрифте, представленный глифом «0» (НОЛЬ, U+0030);
• em (Element M) — размер глифа М;
• ex (x-height) — высота глифа нижнего регистра;
• lh (Line height) — высота локальной строки.

Значение свойства, выраженного единицей измерения em, вычисляют относительно свойства font-size. Например, указание на то, что высота строки элемента h1 на 20% больше размера шрифта элемента h1:

h1 { line-height: 1.2em }

Другой пример, размер шрифта элемента h1 на 20% больше наследуемого размера шрифта элемента h1.

h1 { font-size: 1.2em }

Единицы измерения относительно корневого элемента

Существуют единицы измерения относительно шрифта корневого элемента. Например, от тегов <HTML> или <SVG>.

Список локальных единиц измерения относительно корневого шрифта:

• rcap (Root cap height) — высота глифов верхнего регистра;
• rch (Root character height) — средний размер (горизонтальный сдвиг) узкого глифа в шрифте, представленный глифом «0» (НОЛЬ, U+0030);
• rem (Root element M) — (root em) размер шрифта корневого элемента;
• rex (Root x-height) — высота шрифта корневого элемента;
• rlh (Root line height) — высота строки корневого элемента.

В отличие от em, разного для каждого элемента гипертекста, rem постоянен во всём контексте гипертекста.

Единицы измерения области просмотра

Единица измерения области просмотра (Viewport unit) — определяет относительные размеры (ширину и высоту) просматриваемой пользователем области (элемента viewport).

Список локальных единиц измерения области просмотра:

• dvh (dynamic viewport height) — высота динамической области просмотра в процентах (%);
• dvw (dynamic viewport width) — ширина динамической области просмотра в процентах (%);
• lvh (large viewport height) — высота большой области просмотра в процентах (%);
• lvw (large viewport width) — ширина большой области просмотра в процентах (%);
• svh (small viewport height) — высота малой области просмотра в процентах (%);
• svw (small viewport width) — ширина малой области просмотра в процентах (%);
• vb (viewport block axis) — размер области просмотра по блочной оси корневого элемента в процентах (%); = vh (viewport height) — высота области просмотра в процентах (%);
• vi (viewport inline axis) — размер области просмотра по строчной оси корневого элемента в процентах (%);
• vmax (viewport larger dimension) — больший размер области просмотра в процентах (%);
• vmin (iewport smaller dimension) — наименьший размер области просмотра в процентах (%);
• vw (viewport width) — ширина области просмотра в процентах (%).

Единицы измерения контейнера

Единица измерения контейнера (Container units) — определяет размеры относительно контейнера запроса (элемента query container).

Список единиц измерения контейнера:

• cqb (Container’s block size) — размер блока контейнера запроса в процентах (%);
• cqh (Container’s height) — высот контейнера запроса в процентах (%);
• cqi (Container’s inline size) — размер строки контейнера запроса в процентах (%);
• cqmax (Container’s max) — большее значение cqi или cqbж
• cqmin (Container’s min) — меньшее значение cqi или cqbж
• cqw (container’s width) — ширина контейнера запроса в процентах (%).