Свойство CSS `text-underline-position`

Свойство text-underline-position CSS задаёт положение подчёркивания, установленного с помощью значения underline свойства text-decoration.

Попробуйте

text-underline-position: auto;

text-underline-position: under;

<section id="default-example">
  <p>
    <span class="transition-all" id="example-element"
      >C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></span
    >
    is the chemical formula for caffeine.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

Синтаксис

/* Single keyword */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Multiple keywords */
text-underline-position: under left;
text-underline-position: right under;

/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto

Пользовательский агент user agent использует собственный алгоритм, чтобы расположить линию на алфавитной базовой линии или ниже неё.

from-font

Если файл шрифта содержит информацию о предпочтительном положении, используется это значение. Если файл шрифта не содержит такой информации, свойство ведёт себя так, как если бы было задано auto, а браузер выбирает подходящее положение.

under

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

left

В режимах вертикального письма это ключевое слово принудительно размещает линию с левой стороны текста. В режимах горизонтального письма оно является синонимом auto.

right

В режимах вертикального письма это ключевое слово принудительно размещает линию с правой стороны текста. В режимах горизонтального письма оно является синонимом auto.

Формальное определение

Формальный синтаксис

text-underline-position = 
  auto |
  from-font |
  [ under || [ left | right ] ]

Примеры

Простой пример

Создадим два абзаца в качестве примера:

<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

<p class="vertical">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

Наш CSS выглядит так:

p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

В этом примере для обоих абзацев задаётся толстое подчёркивание. В горизонтальном тексте мы используем text-underline-position: under;, чтобы разместить подчёркивание ниже всех выносных элементов.

Для текста с вертикальным режимом writing-mode можно использовать значения left или right, чтобы при необходимости разместить подчёркивание слева или справа от текста.

Пример будет выглядеть так:

Глобальная установка text-underline-position

Поскольку свойство text-underline-position наследуется и не сбрасывается сокращённым свойством text-decoration, может быть уместно задать его значение глобально. Например, значение under может подойти для документа с большим количеством химических и математических формул, в которых часто используются нижние индексы.

:root {
  text-underline-position: under;
}

Спецификации

Совместимость с браузерами

См. также

• Свойство text-decoration является сокращённой записью для задания большинства свойств оформления текста, включая text-decoration-line, text-decoration-color и text-decoration-style. Однако оно не задаёт text-underline-position.