Proprietà CSS text-transform
Usa la proprietà text-transform per controllare gli effetti di maiuscolo/minuscolo del testo di un elemento. Valori ed esempi.
La proprietà CSS text-transform controlla la capitalizzazione del testo di un elemento — può forzare il testo in MAIUSCOLO, tutto minuscolo, o Capitalizzare Ogni Parola, senza modificare l'HTML sottostante. Si tratta di una modifica puramente presentazionale: il testo sorgente rimane esattamente come lo hai scritto, quindi gli screen reader, il copia-incolla e i submit dei form vedono ancora le maiuscole originali.
Questa pagina illustra ogni valore di text-transform, le insidie del valore capitalize, la mappatura dei casi specifici per lingua ed esempi eseguibili per ciascun valore.
Perché usare text-transform invece di digitare le maiuscole?
Mantenere la capitalizzazione nel CSS anziché nel markup tiene i contenuti puliti e flessibili:
- Un'unica fonte di verità. Scrivi intestazioni ed etichette in normale maiuscola a inizio frase; lascia che CSS le trasformi in maiuscolo solo dove il design lo richiede. Modifica il design in un unico punto in seguito.
- Adatto alla localizzazione. I traduttori modificano testo leggibile, non lettere in maiuscolo.
- Accessibilità e SEO. I motori di ricerca e le tecnologie assistive leggono il testo reale, non i glifi stilizzati. Visualizzare in maiuscolo l'etichetta di un
<button>in questo modo espone comunque un nome accessibile in maiuscola normale.
Mappatura dei casi specifica per lingua
text-transform segue le regole di capitalizzazione della lingua del contenuto (l'attributo lang), non una semplice conversione ASCII. Alcuni casi degni di nota:
- Lingue turciche — turco (
tr), azerbaijano (az), tataro di Crimea (crh), tataro del Volga (tt) e bashkir (ba) hanno la i puntata e quella non puntata, che danno due coppie: i/İ e ı/I. - Tedesco (
de) — la ß diventa SS in maiuscolo. - Greco (
el) — quando un'intera parola viene resa in maiuscolo, l'accento sulle vocali viene eliminato (ά → Α), tranne per l'eta disgiuntivo (ή/Ή).
Il supporto dei browser per queste regole specifiche per lingua varia, quindi verifica se il tuo pubblico ne dipende.
I valori full-width e full-size-kana sono sperimentali. full-width ha supporto parziale su WebKit, mentre full-size-kana ha un supporto molto limitato.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.textTransform = "capitalize"; |
Sintassi
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;Il valore "uppercase"
uppercase converte ogni carattere nella sua forma maiuscola — l'uso più comune è per intestazioni, pulsanti ed etichette. Nell'esempio seguente il testo del paragrafo e del <div> viene forzato in maiuscolo mentre l'HTML mantiene la sua capitalizzazione normale:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Risultato
I valori "capitalize" e "lowercase"
capitalize trasforma in maiuscolo la prima lettera di ogni parola e lascia invariato il resto di ciascuna parola. Il confine tra "parole" è determinato da qualsiasi spazio, punteggiatura o simbolo, quindi anche le virgolette e i trattini iniziano nuove parole (ad es. mother-in-law diventa Mother-In-Law). Due insidie comuni:
- Tocca solo la prima lettera —
iPhonerimaneIPhone, nonIphone, perché le maiuscole delle lettere rimanenti vengono preservate. - Una cifra non conta come lettera, quindi la prima lettera dopo un numero non viene capitalizzata.
3rdrimane3rd, non diventa mai3Rd.
lowercase è l'opposto di uppercase: forza ogni carattere in minuscolo. Nell'esempio seguente il primo <div> usa capitalize e il secondo usa lowercase:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br />
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>Il valore "none"
none è il valore predefinito — il testo viene visualizzato esattamente come scritto, senza alcun effetto di capitalizzazione. Lo usi principalmente per annullare un text-transform che un elemento erediterebbe altrimenti, poiché la proprietà è ereditata per impostazione predefinita.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none" value:
</h2>
</body>
</html>Il valore "initial"
initial ripristina la proprietà al suo valore predefinito definito da CSS (none), indipendentemente da qualsiasi valore ereditato. L'esempio seguente ripristina text-transform su un paragrafo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial" value:
</p>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| none | Nessun effetto di capitalizzazione. Questo è il valore predefinito della proprietà. | Provalo » |
| capitalize | Rende maiuscolo il primo carattere di ogni parola. | Provalo » |
| uppercase | Rende maiuscoli tutti i caratteri di ogni parola. | Provalo » |
| lowercase | Rende minuscoli tutti i caratteri di ogni parola. | Provalo » |
| full-width | Inserisce la scrittura di un carattere (ideogrammi e scritture latine) all'interno di un quadrato, consentendone l'allineamento in cinese o giapponese. | Provalo » |
| full-size-kana | Converte tutti i piccoli caratteri Kana nel Kana a piena dimensione, per compensare i problemi di leggibilità alle piccole dimensioni del carattere tipicamente utilizzate in ruby. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
text-transform è uno dei vari strumenti CSS per modellare l'aspetto del testo. Combinala con queste proprietà correlate:
- text-decoration — sottolinea, sopralinea o barra il testo.
- font-variant — visualizza il testo come small-caps (una vera variante tipografica, a differenza di un maiuscolo visivo).
- letter-spacing e word-spacing — si abbinano bene alle intestazioni in maiuscolo, che spesso risultano più leggibili con una spaziatura aggiuntiva.
- text-align — controlla l'allineamento orizzontale del testo trasformato.
- ::first-letter e ::first-line —
text-transformsi applica anche a questi pseudo-elementi, utile per effetti drop-cap.