Свойство CSS text-decoration-skip-ink
Используйте свойство CSS text-decoration-skip-ink, чтобы задать поведение подчёркивания и надчёркивания. Смотрите значения и примеры.
Свойство text-decoration-skip-ink управляет поведением подчёркивания и надчёркивания в тех местах, где линия проходит через элементы буквы, опускающиеся ниже базовой линии (нижние выносные элементы, например хвостики букв «g», «y», «p»), или поднимающиеся выше неё (верхние выносные элементы). Вместо того чтобы линия просто пересекала эти штрихи, браузер может оставлять небольшие пробелы, «перепрыгивая» через контуры глифа — именно отсюда и происходит название свойства.
Это функция улучшения читаемости. Сплошное подчёркивание, пересекающее букву «g» или «j», затрудняет чтение; пропуск контуров глифов сохраняет чистый вид линии. Современные браузеры включают это поведение по умолчанию (auto), поэтому данное свойство чаще всего используется для отключения подобного поведения (none), когда нужна непрерывная линия.
text-decoration-skip-ink влияет только на значения underline и overline свойства text-decoration-line. Значение line-through располагается посередине текста, не пересекая выносные элементы, поэтому на него это свойство не действует.
Свойство text-decoration-skip-ink входит в состав сокращённого семейства свойств text-decoration наряду со свойствами text-decoration-line, text-decoration-color и text-decoration-style.
| Initial Value | auto |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS Text Decoration Module Level 4 |
| DOM Syntax | object.style.textDecorationSkipInk = "none"; |
Синтаксис
Значения CSS text-decoration-skip-ink
text-decoration-skip-ink: auto | none | initial | inherit;Сокращённая запись также принимает глобальные ключевые слова initial и inherit. Поскольку свойство наследуется и по умолчанию имеет значение auto, явно задавать его нужно редко — в основном для отключения пропуска контуров.
Пример свойства text-decoration-skip-ink
В примере ниже два состояния показаны рядом: первый абзац задаёт непрерывное подчёркивание (none), а второй позволяет браузеру пропускать контуры у нижних выносных элементов (auto). Сравните поведение линии под буквами типа «p».
Пример кода CSS text-decoration-skip-ink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ex1 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: none;
}
.ex2 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: auto;
}
</style>
</head>
<body>
<h2>
Text-decoration-skip-ink property example
</h2>
<h3>
Text-decoration-skip-ink: none;
</h3>
<p class="ex1">
Lorem ipsum is simply dummy text
</p>
<h3>
Text-decoration-skip-ink:auto;
</h3>
<p class="ex2">
Lorem ipsum is simply dummy text
</p>
</body>
</html>Результат
Значения
| Значение | Описание |
|---|---|
| auto | Подчёркивание и надчёркивание рисуются только там, где они не касаются глифа и не приближаются к нему вплотную. Это значение по умолчанию. |
| none | Подчёркивание и надчёркивание рисуются для всего текста, включая места пересечения с нижними и верхними выносными элементами глифов. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Когда использовать
- Оставляйте значение по умолчанию (
auto) для основного текста и ссылок. Оно обеспечивает более чистые и читаемые подчёркивания с автоматическими пробелами вокруг нижних выносных элементов. - Используйте
none, когда дизайн требует сплошной, непрерывной линии — например, намеренно жирного подчёркивания в качестве стилистического акцента, или когда небольшие пробелы выглядят как артефакты рендеринга при определённом размере шрифта.
Распространённый приём — явно задать известное значение, чтобы рендеринг был одинаковым в браузерах, которые ранее по умолчанию рисовали линию прямо через глифы:
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* explicitly opt in to skipping */
}Поддержка браузерами
text-decoration-skip-ink поддерживается всеми современными браузерами (Chrome, Edge, Firefox и Safari). Поскольку при отсутствии поддержки свойство просто деградирует до обычного подчёркивания, запасной вариант не нужен — старые браузеры просто рисуют линию прямо через глифы, что по-прежнему вполне читаемо.