Proprietà CSS text-underline-position
Usa la proprietà CSS text-underline-position per specificare la posizione della sottolineatura di un elemento. Valori e esempi pratici.
La proprietà CSS text-underline-position controlla dove viene tracciata una sottolineatura rispetto al testo. Ha effetto solo quando esiste già una sottolineatura — cioè quando l'elemento ha text-decoration (o text-decoration-line) impostato su underline. Da sola, text-underline-position non disegna mai una sottolineatura; la riposiziona soltanto.
Per impostazione predefinita (auto), il browser colloca la sottolineatura vicino alla baseline alfabetica del testo. Ciò funziona bene per la maggior parte del testo in caratteri latini, ma la riga può collidere con i discendenti delle lettere come g, j, p, q e y. Impostando text-underline-position: under si sposta la riga al di sotto di tutti i discendenti in modo che non li attraversi mai — utile per listati di codice, formule matematiche o chimiche dove è importante avere un margine netto.
Questa pagina illustra la sintassi, tutti i valori, quando usare ciascuno di essi e degli esempi eseguibili.
Quando si usa?
- Sottolineature più pulite — usa
underin modo che la riga superi i discendenti (p,y,g) invece di attraversarli. - Annotazione di formule — sotto formule matematiche o chimiche dove sovrapporre la baseline risulterebbe ambiguo.
- Testo verticale —
lefterightscelgono su quale lato dei glifi si posiziona la riga quando lawriting-modeè verticale.
La proprietà text-underline-position è supportata da tutti i browser moderni.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditabile | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.textUnderlinePosition = "under"; |
Nota: in JavaScript, le proprietà CSS con trattini vengono convertite in camelCase (ad es., text-underline-position diventa textUnderlinePosition).
Sintassi
Valori CSS di text-underline-position
text-underline-position: auto | [ under || left || right ] | initial | inherit;La parola chiave auto non può essere combinata con nessun altro valore. Le parole chiave under, left e right possono essere combinate (ad esempio under left), ma left e right si escludono a vicenda — se ne può scegliere una sola, facoltativamente insieme a under.
Esempio della proprietà text-underline-position:
Esempio di codice CSS text-underline-position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-underline-position: under;
}
</style>
</head>
<body>
<h2>Text underline-position property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Risultato
Esempio della proprietà text-underline-position con il valore "under":
Esempio con il valore under di CSS text-underline-position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-underline-position: under;
text-decoration-color: #1c87c9;
font-size: 25px;
}
</style>
</head>
<body>
<h2>Text underline-position property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Esempio con writing-mode verticale e il valore "left":
Nel testo verticale, left e right determinano su quale lato dei caratteri scorre la sottolineatura.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-decoration: underline;
text-underline-position: left;
font-size: 25px;
}
</style>
</head>
<body>
<h2>Vertical text with text-underline-position: left</h2>
<p>Lorem Ipsum is simply dummy text.</p>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| auto | Predefinito. Il browser utilizza il proprio algoritmo per posizionare la riga alla baseline alfabetica o appena sotto di essa. |
| under | Forza la sottolineatura al di sotto del contenuto testuale in modo che superi i discendenti delle lettere come g, p e y. |
| left | In una writing-mode verticale, posiziona la sottolineatura sul lato sinistro del testo. Ignorato nel testo orizzontale. |
| right | In una writing-mode verticale, posiziona la sottolineatura sul lato destro del testo. Ignorato nel testo orizzontale. |
| initial | Imposta la proprietà al suo valore predefinito (auto). |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
- text-decoration — la proprietà shorthand che disegna effettivamente la riga (
text-underline-positionla riposiziona soltanto). - text-decoration-line — scegli tra
underline,overlineoline-through. - text-decoration-color — imposta il colore della sottolineatura.
- text-decoration-style — linee continue, tratteggiate, punteggiate, doppie o ondulate.