Tekst-onderstrepen-offset - CSS-trucs

De text-underline-offseteigenschap in CSS stelt de afstand van tekstonderstreepingen in vanaf hun oorspronkelijke positie.

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

Zodra u een onderstreping toepast voor een element text-decorationmet de waarde van onderstrepen , kunt u met de text-underline-offseteigenschap aangeven hoe ver die regel van uw tekst moet zijn .

Waarden

• auto: (Standaard) De browser specificeert een geschikte verschuiving voor onderstrepingen.
• : Elke geldige lengte met een opgegeven eenheid (inclusief negatieve waarden). Dit vervangt alle informatie in het lettertype en de standaardbrowser.
• percentage: Specificeert de offset van onderstrepingen als een percentage van 1em in het lettertype van het element.
• initial: De standaardinstelling van de eigenschap, die auto is.
• inherit: Neemt de onderstreepte offsetwaarde van de ouder over.
• unset: Verwijdert de huidige offset van het element.

Demo

In de volgende demo kunt u de waarde van wijzigen text-underline-offsetom te zien hoe dit de tekstversiering van het element beïnvloedt:

Opmerkingen

• text-underline-offset maakt geen deel uit van de afkorting van text-decoration.
• Het werkt niet op andere text-decorationlijnen, zoals line-throughof overline.
• Negatieve waarden worden geaccepteerd, waardoor de onderstreping naar binnen wordt gecompenseerd.

Het is constant voor de nakomelingen

Als je eenmaal een versiering voor een element hebt ingesteld, zullen al zijn kinderen die versiering ook hebben. Stel je nu voor dat je de offset van de onderstreping voor een van de kinderen wilt veranderen:

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

Dit werkt niet omdat u een offset van een onderstreping gespecificeerd door voorouderelementen niet kunt overschrijven. Om dit te laten werken, moet u een onderstreepte specificiteit instellen voor het element zelf:

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

Het gebruik van em wordt aanbevolen

Het voordeel van het gebruik van een relatieve waarde zoals em is dat de offset meegroeit met de verandering van de font-sizewaarde. Als u daarentegen een eenheid met een vaste lengte gebruikt (bijv. Pixels), wordt de offset niet aangepast aan de wijzigingen en is het mogelijk niet de afstand die u voor uw tekst zou willen hebben:

Percentage en de cascade

Voor deze eigenschap zal een lengte als vaste waarde erven en niet schalen met het lettertype. Aan de andere kant zal een percentage erven als een relatieve waarde en daarom schalen met veranderingen in het lettertype als het erft.

De volgende demo toont de vergelijking tussen het gebruik van em en percentagewaarden in het geval van overerving en, zoals je kunt zien, aan de linkerkant (waarin we em gebruiken) is de overgeërfde waarde een vaste lengte. U kunt de berekende waarde in uw DevTools controleren. Dat betekent dat het niet schaalt met de verandering in het lettertype. Aan de rechterkant erven de teksten echter een relatieve waarde (in dit geval 100%); daarom schaalt de offset mee met de verandering in het lettertype:

Schrijfmodi en tekst-onderstreeppositie

Het hebben van een verticale schrijfmodus heeft invloed op de positie van de onderstreping. Dat verandert de richting van de offset die op het element wordt toegepast. Speel met de waarden in de volgende demo:

Verwant

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

Meer informatie

CSS Text Decoration Module Level 4 (Editor's Draft)

Browser-ondersteuning

Op het moment van schrijven is Firefox de enige browser met volledige ondersteuning. Safari ondersteunt geen procentuele waarden.

text-underline-offset

D.W.Z	Rand	Firefox	Chrome	Safari	Opera
Nee	Nee	70+	Nee	12.1+	Alle

Android Chrome	Android Firefox	Android- browser	iOS Safari	Opera Mini
Nee	Nee	Nee	12.2+	Ja

text-underline-offset: percentage

D.W.Z	Rand	Firefox	Chrome	Safari	Opera
Nee	Nee	74+	Nee	Nee	Nee

Android Chrome	Android Firefox	Android- browser	iOS Safari	Opera Mini
Nee	Nee	Nee	Nee	Ja