Testo-sottolineatura-offset - Trucchi CSS

La text-underline-offsetproprietà in CSS imposta la distanza delle sottolineature del testo dalla loro posizione iniziale.

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

Dopo aver applicato una sottolineatura per un elemento utilizzando text-decorationcon il valore di sottolineatura , puoi dire quanto deve essere lontana quella riga dal tuo testo utilizzando la text-underline-offsetproprietà.

Valori

• auto: (Impostazione predefinita) il browser specificherà un offset appropriato per le sottolineature.
• : Qualsiasi lunghezza valida con un'unità specificata (compresi i valori negativi). Questo sostituisce qualsiasi informazione nel carattere e l'impostazione predefinita del browser.
• percentage: Specifica l'offset delle sottolineature come percentuale di 1em nel carattere dell'elemento.
• initial: L'impostazione predefinita della proprietà, che è auto.
• inherit: Adotta il valore di offset di sottolineatura del genitore.
• unset: Rimuove l'offset corrente dall'elemento.

Demo

Nella seguente demo è possibile modificare il valore di text-underline-offsetper vedere come influisce sulla decorazione del testo dell'elemento:

Appunti

• text-underline-offset non fa parte della stenografia di text-decoration.
• Non funziona su altre text-decorationlinee, come line-througho overline.
• Sono accettati valori negativi, che sfalsano la sottolineatura verso l'interno.

È costante per i discendenti

Una volta impostata una decorazione per un elemento, anche tutti i suoi figli avranno quella decorazione. Ora immagina di voler cambiare l'offset della sottolineatura per uno dei bambini:

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

Questo non funziona perché non puoi sovrascrivere un offset di una sottolineatura specificata dagli elementi antenati. Affinché funzioni, è necessario impostare una specificità di sottolineatura per l'elemento stesso:

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

Si consiglia di utilizzare em

Il vantaggio di utilizzare un valore relativo come em è che l'offset si ridimensionerà con la modifica del font-sizevalore. D'altra parte, se utilizzi un'unità di lunghezza fissa (es. Pixel), l'offset non si adatterà alle modifiche e potrebbe non essere la distanza che vorresti avere per il tuo testo:

Percentuale e cascata

Per questa proprietà, una lunghezza erediterà come valore fisso e non verrà scalata con il carattere. D'altra parte, una percentuale erediterà come valore relativo e, quindi, ridimensionerà con le modifiche nel carattere mentre eredita.

La seguente demo mostra il confronto tra l'utilizzo di em e i valori percentuali nel caso di ereditarietà e, come puoi vedere, sul lato sinistro (in cui stiamo usando em) il valore ereditato è una lunghezza fissa. Puoi controllare il valore calcolato nel tuo DevTools. Ciò significa che non si ridimensiona con la modifica del carattere. Sul lato destro, invece, i testi ereditano un valore relativo (in questo caso 100%); quindi l'offset si ridimensiona con il cambio del font:

Modalità di scrittura e posizione del testo sottolineato

Avere una modalità di scrittura verticale ha un effetto sulla posizione della sottolineatura. Ciò cambierà la direzione dell'offset applicato sull'elemento. Gioca con i valori nella seguente demo:

Relazionato

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

Maggiori informazioni

Modulo di decorazione del testo CSS livello 4 (bozza del redattore)

Supporto del browser

Al momento della stesura di questo articolo, Firefox è l'unico browser con il pieno supporto. Safari non supporta i valori percentuali.

testo-sottolineatura-offset

IE	Bordo	Firefox	Cromo	Safari	musica lirica
No	No	70+	No	12.1+	Tutti

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mini
No	No	No	12.2+	sì

text-underline-offset: percentuale

IE	Bordo	Firefox	Cromo	Safari	musica lirica
No	No	74+	No	No	No

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mini
No	No	No	No	sì