Логические свойства размеров и отступов
У привычных слов «левый», «правый», «ширина» и «высота» есть физический смысл на экране. Однако интерфейс может читаться справа налево, а некоторые языки используют другое направление строк. Логические свойства связывают размер и отступ с направлением письма: начало строки, её конец и движение между строками. Это позволяет описать смысл отступа один раз, не привязывая его к левой стороне.
Продолжим каталог после переноса в слои. В нём уже встречались inline-size, margin-inline и padding-block, поэтому новая тема уточнит существующую модель, а не введёт другой макет. Результат урока — выделенное начало вводного текста и согласованные отступы компонентов. Основной снимок остаётся русскоязычным документом с обычным направлением слева направо.
Две оси относительно письма
В обычной русской горизонтальной записи строчная ось идёт вдоль текста, а блочная — в направлении следующей строки. Поэтому inline-size обычно наблюдается как ширина, block-size — как высота. Это соответствие зависит от writing-mode; оно не является постоянным переводом имён в физические свойства. Направление direction дополнительно определяет начало и конец строчной оси.
В слое components найдите правило .course-card. Замените одно объявление padding: 1.25rem двумя объявлениями из первого блока. Остальные свойства карточки сохраняются. Затем в правиле полей и кнопки формы замените прежнее padding: .6rem .75rem вторым блоком. Не оставляйте старый shorthand рядом с заменой: его поздняя запись могла бы снова задать все стороны.
/* В существующем правиле карточки */
padding-block: 1.25rem;
padding-inline: 1.25rem;
/* В существующем правиле input, select и button формы */
padding-block: .6rem;
padding-inline: .75rem;Ожидается прежний визуальный размер отступов. Для каждой оси задано по одному симметричному значению, поэтому направление начала пока ничего не меняет. Преимущество записи проявится, когда стороны получат разный смысл. Сначала мы сделали перевод без неожиданной перестройки интерфейса, затем добавим направленный акцент.
В конец файла добавьте следующий полный блок, вновь открывающий существующий слой. Здесь вводятся новые свойства, а не второй случайный набор размеров всей страницы.
@layer components {
.layout-lab .lab-intro { border-inline-start: .25rem solid var(--lab-accent); padding-inline-start: 1rem; }
.layout-lab .course-title, .layout-lab .course-description { text-align: start; }
}Перед вводным текстом ожидается фиолетовая линия и свободное место между ней и содержимым. В исходном направлении линия окажется слева. Значения border-inline-start и padding-inline-start обозначают начало строки, поэтому они согласованы между собой. При изменении направления не понадобится отдельно переносить границу и отдельно вычислять противоположный отступ.
Направление как диагностическое условие
Для самостоятельного опыта временно добавьте dir="rtl" к body, сохраняя класс .layout-lab. Ожидается перенос линии к правой стороне и изменение начала выравнивания текста. Затем удалите атрибут, чтобы основной русский каталог снова использовал исходное направление. Этот опыт показывает сопоставление осей; он не превращает русские подписи в корректную локализацию другого языка.
text-align: start также следует направлению текста. Оно не требует пары правил left и right, зависящих от режима страницы. При этом отдельные цифры, латинские сокращения и ссылки могут участвовать в двунаправленном тексте по собственным правилам. Их чтение нужно проверять отдельно, если проект действительно получает перевод и смешанные строки.
Атрибут dir имеет семантическую роль HTML, поэтому для направления содержания предпочтителен именно он. CSS-свойство direction тоже влияет на оформление, но изменение только оформления не является полноценным описанием языка и направления документа. Атрибут lang="ru" сообщает язык; он сам по себе не задаёт правую или левую сторону. Эти сведения не следует смешивать в одну настройку.
Можно дополнительно посмотреть небольшой отдельный абзац с writing-mode: vertical-rl, не применяя этот режим ко всему каталогу. Тогда привычное соответствие строчной оси ширине изменится. Диагностический абзац после опыта удалите. Основной каталог и его форма рассчитаны на горизонтальное письмо; мы не обещаем поддержку вертикальной версии всех компонентов по одному изменению свойства.
Физические и логические объявления вместе
Физические свойства продолжают существовать. Изображение действительно может иметь физическую ширину исходного файла, а эффект небольшого нажатия кнопки через translateY относится к экранной вертикали. Логическая запись не делает каждую физическую координату ошибкой. Выбор зависит от обязанности: отступ в начале текста следует письму, а конкретное смещение по экрану может оставаться физическим.
Если одновременно задать margin-left и margin-inline-start, в исходном направлении они могут претендовать на одну наблюдаемую сторону. Тогда итог определяет обычный каскад. Переключение направления способно развести эти свойства по разным сторонам, и неожиданно возникнут два отступа. Поэтому при переходе компонента удаляем прежнее направленное объявление, а не просто дописываем логическое в надежде на универсальную замену.
Наше изменение сохраняет симметричные значения и переводит новый направленный акцент целиком. Для большого файла полезно разбирать не название каждого свойства отдельно, а смысл пары: откуда начинается текст, где находится рамка, какое место требуется для соседнего элемента. Автоматическая замена всех слов left на start не знает этого смысла и может изменить декоративную геометрию.
Логические свойства не изменяют порядок элементов в HTML. Заголовок остаётся перед описанием, описание перед количеством, ссылки сохраняют прежнюю последовательность. Порядок чтения также не исправляется перестановкой экранных сторон. В этой серии мы сохраняем исходную семантическую структуру и наблюдаем именно размеры и положение оформления. Модель осей описана в MDN о логических свойствах.
Проверяем связность компонента
Предскажите результат для двух разных объявлений: padding-inline: 1rem 2rem и padding-inline-start: 1rem. Первое задаёт начало и конец строчной оси раздельно; второе меняет только начало. Если целью было свободное место исключительно рядом с линией, симметричное объявление добавило бы лишнее место с противоположной стороны. В нашем вводном блоке выбран второй вариант по конкретной обязанности.
Не путайте логическое начало с началом контейнера прокрутки или положением курсора. Оно связано с направлением форматирования, а пользователь может прокрутить содержимое в произвольное место. В последующих уроках inset-inline-end поможет расположить метку карточки, тогда как прокрутку таблицы будем описывать с учётом горизонтальной структуры примера. Один и тот же проект может сознательно использовать обе системы.
При проверке размеров полезно временно увеличить текст и сузить окно. Линия должна продолжать обозначать начало вводного блока, а отступ не должен забирать у текста фиксированную большую полосу. Сама граница не сообщает новое содержание, поэтому пояснение остаётся читаемым без неё. Это ожидаемые свойства нашего выбора, а не отчёт о проведённой проверке браузеров.
После урока структура слоёв сохранена, визуальные размеры карточки прежние, а направленный акцент описан относительно письма. Дальше изменим уже не направление отступов, а связь внутренних рядов соседних карточек. Для этого понадобится вложенная сетка, использующая линии родителя.
Полное состояние этого шага находится в layout-lab/lesson-18 внутри исходников продолжения. Каждый снимок открывается отдельно; подключать CSS разных уроков одновременно не нужно.