Chrome 154 добавил text-decoration-inset для управления длиной подчёркивания

Подчёркивание получает собственные границы

В Chrome 154, выпущенном 22 сентября, появилась поддержка text-decoration-inset. Свойство регулирует, насколько линия подчёркивания, надчёркивания или зачёркивания сокращается либо выходит за границы текста. Оно позволяет выразить часть оформления штатным механизмом текста вместо дополнительного элемента. Это особенно интересно для динамического содержимого: длина строки меняется вместе со шрифтом и шириной колонки. При этом свойство управляет геометрией линии, а не превращает обычный текст в ссылку и не добавляет ему интерактивности.

Положительное и отрицательное значение дают разные эффекты

Черновик CSS Text Decoration Level 4 описывает одно или два значения длины либо процента и auto. Положительный отступ перемещает край внутрь, отрицательный расширяет линию наружу. При двух значениях задаются начало и конец по направлению текста. Такой подход важен для языков с другим порядком письма: логическое начало не всегда совпадает с левым краем. Значение auto оставляет выбор браузеру, в том числе для различения соседних подчёркнутых элементов. Это типографическое правило, а не команда объединить оформление произвольных соседних ссылок.

Начало и конец линии определяются направлением текста, поэтому два значения свойства не следует понимать исключительно как левый и правый отступ. При переносе появляются фрагменты, а box-decoration-break определяет отношение оформления к ним. Толщина линии и её расстояние от букв задаются другими свойствами. Inset изменяет только концевые границы, сохраняя остальные аспекты декорации. Это позволяет сочетать длину, стиль и положение независимо, без необходимости превращать каждую визуальную вариацию подчёркивания в отдельный структурный элемент документа.

Перенос строки меняет область расчёта

Проценты связаны с размером оформляющего блока либо его отдельных фрагментов в зависимости от box-decoration-break. Поэтому пример на коротком однострочном заголовке может иначе выглядеть в длинной ссылке, перенесённой на несколько строк. В спецификации приведены отдельные иллюстрации для общего и фрагментного расчёта. Проверять нужно реальный текст, включая длинные названия, локализацию и масштабирование. Увеличение шрифта может изменить число строк, а значит и итоговый визуальный ритм даже без изменения самого значения inset.

Декорация не должна мешать чтению и распознаванию

Сильное сокращение линии способно сделать ссылку менее заметной. Геометрическая свобода не отменяет других признаков состояния: фокуса клавиатуры, посещения и наведения. Текстовая декорация также может приходить от предка; свойство регулирует линии соответствующего оформляющего блока, поэтому каскад следует разбирать в контексте. Для сложного заголовка с вложенными элементами важно понять, какой узел создаёт линию. Иначе изменение дочернего правила не даст ожидаемого результата, хотя синтаксис будет корректным и браузер поддерживает само свойство.

Каскад сохраняет значение оформляющего блока

Линия декорации относится к элементу, который её создаёт, и может распространяться на вложенное текстовое содержимое. Свойство inset регулирует соответствующие линии этого блока, но не все линии, пришедшие от предков. Поэтому вложенный фрагмент и общий заголовок способны иметь разные уровни оформления. Спецификация отдельно показывает, как проценты взаимодействуют с box-decoration-break и несколькими строками. Эти правила действуют независимо от того, воспринимается ли текст как интерактивная ссылка. Новое свойство не создаёт роль, обработчик действия или фокус: оно уточняет внешний вид уже существующей текстовой декорации и может дополнять её толщину, стиль и положение.