Підкреслення тексту-зміщення - CSS-хитрощі

text-underline-offsetВластивість в CSS встановлює відстань тексту підкреслення від їх початкового положення.

.text ( text-underline-offset: 0.5em; )

Після того, як ви застосуєте підкреслення для елемента, що використовує text-decorationзі значенням підкреслення , ви можете сказати, наскільки цей рядок повинен знаходитися від вашого тексту, використовуючи text-underline-offsetвластивість.

Цінності

• auto: (За замовчуванням) Браузер вкаже відповідне зміщення для підкреслення.
• : Будь-яка допустима довжина із зазначеною одиницею (включаючи від’ємні значення). Це замінює будь-яку інформацію у шрифті та браузер за замовчуванням.
• percentage: Визначає зміщення підкреслення як відсоток 1em у шрифті елемента.
• initial: За замовчуванням налаштування властивості, яке є автоматичним.
• inherit: Приймає значення зміщення підкреслення батьківського елемента.
• unset: Видаляє поточне зміщення з елемента.

Демо

У наступній демонстрації ви можете змінити значення, text-underline-offsetщоб побачити, як це впливає на текстове оформлення елемента:

Примітки

• text-underline-offset не є частиною стенографії text-decoration.
• Це не працює на інших text-decorationлініях, таких як line-throughабо overline.
• Приймаються негативні значення, що компенсує підкреслення всередину.

Для нащадків це постійно

Після того, як ви встановите прикрасу для елемента, це прикраса буде також у всіх його дітей. А тепер уявіть, що ви хочете змінити зміщення підкреслення для одного з дітей:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Це не працює, оскільки ви не можете перевизначити зміщення підкреслення, зазначеного елементами-предками. Щоб це працювало, вам потрібно встановити специфіку підкреслення для самого елемента:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Рекомендується використовувати em

Перевага використання відносного значення, такого як em, полягає в тому, що зсув буде масштабуватися зі зміною font-sizeзначення. З іншого боку, якщо ви використовуєте фіксовану одиницю довжини (наприклад, пікселі), зсув не буде пристосовуватися до змін, і це може бути не відстань, яку ви хотіли б мати для свого тексту:

Відсоток і каскад

Для цієї властивості довжина успадковуватиметься як фіксоване значення і не буде масштабуватися за допомогою шрифту. З іншого боку, відсоток успадковуватиметься як відносне значення і, отже, масштабуватиметься зі змінами шрифту в міру успадкування.

Наступна демонстрація демонструє порівняння використання em та процентних значень у випадку успадкування, і, як бачите, зліва (у якому ми використовуємо em) успадковане значення має фіксовану довжину. Ви можете перевірити обчислене значення у своїх DevTools. Це означає, що він не масштабується зі зміною шрифту. Праворуч, однак, тексти успадковують відносне значення (в даному випадку 100%); тому зміщення масштабується зі зміною шрифту:

Режими написання та підкреслення тексту

Наявність вертикального режиму письма впливає на положення підкреслення. Це змінить напрямок зміщення, застосованого до елемента. Пограйте зі значеннями в наступній демонстрації:

Пов’язані

• text-decoration
• text-underline-position
• text-decoration-thickness

Більше інформації

Модуль оформлення тексту CSS рівень 4 (проект редактора)

Підтримка браузера

На момент написання цієї статті Firefox - єдиний браузер з повною підтримкою. Safari не підтримує відсоткові значення.

підкреслення тексту-зміщення

IE	Край	Firefox	Chrome	Сафарі	Опера
Ні	Ні	70+	Ні	12,1+	Всі

Android Chrome	Android Firefox	Браузер Android	iOS Safari	Opera Mini
Ні	Ні	Ні	12,2+	Так

підкреслення тексту-зміщення: відсоток

IE	Край	Firefox	Chrome	Сафарі	Опера
Ні	Ні	74+	Ні	Ні	Ні

Android Chrome	Android Firefox	Браузер Android	iOS Safari	Opera Mini
Ні	Ні	Ні	Ні	Так