Offset podtržení textu - Triky CSS

text-underline-offsetNemovitost v CSS určuje vzdálenost textu podtržení ze své výchozí polohy.

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

Jakmile na prvek použijete podtržení text-decorations hodnotou podtržení , můžete pomocí vlastnosti říci, jak daleko by měl být tento řádek od vašeho textu text-underline-offset.

Hodnoty

• auto: (Výchozí) Prohlížeč určí vhodné odsazení podtržení.
• : Jakákoli platná délka se zadanou jednotkou (včetně záporných hodnot). Tím se nahradí veškeré informace v písmu a ve výchozím nastavení prohlížeče.
• percentage: Určuje odsazení podtržení jako procento 1em v písmu prvku.
• initial: Výchozí nastavení vlastnosti, která je automatická.
• inherit: Přijme hodnotu posunutí podtržení nadřazeného objektu.
• unset: Odstraní aktuální posunutí od prvku.

Ukázka

V následující ukázce můžete změnit hodnotu, text-underline-offsetabyste viděli, jak to ovlivní textovou výzdobu prvku:

Poznámky

• text-underline-offset není součástí zkratky text-decoration.
• Na jiných linkách, jako například nebo, to nefunguje .text-decorationline-throughoverline
• Jsou přijímány záporné hodnoty, což kompenzuje podtržení směrem dovnitř.

Pro potomky je konstantní

Jakmile nastavíte dekoraci prvku, budou mít tuto dekoraci také všechny jeho děti. Nyní si představte, že chcete změnit posunutí podtržení pro jedno z podřízených:

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

To nefunguje, protože nemůžete přepsat posun podtržení určený prvky předků. Aby to fungovalo, musíte nastavit specifičnost podtržení pro samotný prvek:

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

Doporučuje se používat em

Výhodou použití relativní hodnoty, jako je em, je to, že offset se bude měnit se změnou font-sizehodnoty. Na druhou stranu, pokud používáte jednotku s pevnou délkou (např. Pixely), offset se nepřizpůsobí změnám a nemusí to být vzdálenost, kterou byste chtěli mít pro svůj text:

Procento a kaskáda

U této vlastnosti bude délka zděděna jako pevná hodnota a nebude se měnit podle velikosti písma. Na druhou stranu procento zdědí jako relativní hodnotu, a proto se při dědění změní měřítko se změnami písma.

Následující ukázka ukazuje srovnání mezi použitím em a procentuálních hodnot v případě dědičnosti a, jak vidíte, na levé straně (ve které používáme em) je zděděná hodnota pevná délka. Vypočítanou hodnotu můžete zkontrolovat ve svých DevTools. To znamená, že se nezmění se změnou písma. Na pravé straně však texty zdědí relativní hodnotu (v tomto případě 100%); proto ofsetové měřítko se změnou písma:

Režimy psaní a umístění podtržení textu

Režim svislého psaní má vliv na polohu podtržení. Tím se změní směr odsazení aplikovaného na prvek. Hrajte s hodnotami v následující ukázce:

Příbuzný

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

Více informací

CSS Textový dekorační modul úrovně 4 (návrh redakce)

Podpora prohlížeče

V době psaní tohoto článku je Firefox jediným prohlížečem s plnou podporou. Safari nepodporuje procentní hodnoty.

odsazení textu podtržení

TJ	Okraj	Firefox	Chrome	Safari	Opera
Ne	Ne	70+	Ne	12,1+	Všechno

Android Chrome	Android Firefox	Prohlížeč Android	iOS Safari	Opera Mini
Ne	Ne	Ne	12,2+	Ano

text-underline-offset: procenta

TJ	Okraj	Firefox	Chrome	Safari	Opera
Ne	Ne	74+	Ne	Ne	Ne

Android Chrome	Android Firefox	Prohlížeč Android	iOS Safari	Opera Mini
Ne	Ne	Ne	Ne	Ano