Proprietà CSS initial-letter
Scopri come la proprietà CSS initial-letter crea capilettera con sintassi, valori, supporto browser ed esempi pratici.
La proprietà CSS initial-letter crea un capolettera: ingrandisce la prima lettera di un blocco in modo che si estenda su più righe di testo e si allinei ordinatamente con il paragrafo circostante. È la lettera iniziale sovradimensionata che si vede spesso in libri, riviste e articoli di lungo formato.
Prima che questa proprietà esistesse, i capilettera venivano simulati con float e font-size e margini negativi regolati a mano — valori fragili che si rompevano ogni volta che cambiava il font o l'altezza di riga. initial-letter fa i calcoli al posto tuo: indichi quanto deve essere alta la lettera in righe, e il browser ne regola dimensioni e posizione automaticamente così che la baseline e l'altezza del maiuscolo si allineino con il testo del corpo.
Si applica allo pseudo-elemento ::first-letter (o al primo figlio inline di un contenitore a blocchi), non all'intero paragrafo.
| Valore iniziale | normal |
|---|---|
| Si applica a | Pseudo-elementi ::first-letter e al primo figlio a livello inline di un contenitore a blocchi. |
| Ereditato | No |
| Animabile | No |
| Versione | CSS3 |
| Sintassi DOM | element.style.initialLetter = "2 1"; |
Sintassi
initial-letter: normal | <integer> | <integer> <integer>;La proprietà accetta la parola chiave normal oppure uno o due interi positivi separati da uno spazio.
Come funziona
- Il primo valore (
size) controlla quante righe di altezza occupa la lettera.3significa che il glifo occupa la stessa altezza di tre righe di testo — il browser regola ilfont-sizeautomaticamente per ottenere questo risultato. - Il secondo valore (
sink) è opzionale e controlla di quante righe la lettera scende sotto la prima baseline del testo. Se omesso, il sink è uguale alla dimensione, producendo il classico capolettera a caduta. Un sink di1mantiene la lettera in cima alla prima riga e produce un capolettera rialzato.
/* 3 lines tall, sunk 3 lines (classic dropped cap — sink defaults to size) */
initial-letter: 3;
/* 3 lines tall, sunk only 1 line — letter rises above the paragraph */
initial-letter: 3 1;
/* Reset to no effect */
initial-letter: normal;Entrambi gli interi devono essere positivi — i valori zero e negativi non sono validi. Il valore sink non deve superare il valore size.
Valori
| Valore | Descrizione |
|---|---|
normal | Nessun effetto initial-letter. Questo è il valore predefinito. |
<integer> | Un singolo intero positivo imposta la dimensione in righe; il sink assume lo stesso valore, creando un capolettera a caduta. |
<integer> <integer> | Il primo valore è la dimensione (altezza in righe). Il secondo è il sink (righe di discesa della lettera). Usa 1 per il sink per ottenere un capolettera rialzato. |
initial | Reimposta la proprietà al suo valore predefinito (normal). |
inherit | Eredita il valore calcolato dall'elemento genitore. |
Esempio di initial-letter
Questo esempio dimensiona la prima lettera a due righe di altezza con un sink di 1 (la lettera si posiziona in cima alla prima riga, in parte rialzata e in parte affondata). Il margin-right evita che il testo seguente sia troppo vicino al capolettera.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Slabo 27px';
font-size: 1.5em;
line-height: 1.5;
padding: 40px 0;
}
article {
width: 80%;
}
.example::first-letter {
-webkit-initial-letter: 2 1;
initial-letter: 2 1;
color: #8ebf42;
font-weight: bold;
margin-right: .60em;
}
</style>
</head>
<body>
<article class="example">
Lorem Ipsum is 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</article>
</body>
</html>
Esempio di capolettera rialzato
Imposta il sink (secondo valore) a 1 in modo che la lettera ingrandita si posizioni in cima alla prima riga e si elevi sopra il paragrafo anziché scendere al suo interno:
.example::first-letter {
-webkit-initial-letter: 3 1;
initial-letter: 3 1;
color: #8ebf42;
font-weight: bold;
margin-right: 0.1em;
}Un sink di 1 con una dimensione di 3 significa che la lettera è alta tre righe ma solo il suo bordo inferiore scende fino alla prima baseline — il resto si erge sopra la riga iniziale.
Stilizzare la lettera iniziale
Puoi applicare qualsiasi proprietà che funzioni anche su ::first-letter per abbellire il capolettera. Gli approcci comuni includono:
color— usa un colore del brand o un colore accentuato per far risaltare il capolettera.font-size— evita di impostarlo nella stessa regola;initial-lettergestisce il dimensionamento del font.font-family— abbina un font decorativo display al capolettera mentre il corpo usa un diverso carattere tipografico.font-weight— i capilettera in grassetto sono tradizionali nella tipografia editoriale.margin-right— aggiungi un piccolo spazio (0,1–0,6 em) tra il capolettera e il testo seguente.padding— aggiungi spazio tra il glifo e qualsiasibackground-coloroborder.color— imposta un colore del testo contrastante.
p::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
font-family: Georgia, serif;
color: #b5451b;
font-weight: bold;
margin-right: 0.15em;
padding: 0.05em 0.1em;
background-color: #fdf3ee;
}Supporto browser e fallback
initial-letter ha ampio supporto in Safari e Chrome/Edge (Blink), ma Firefox non lo implementa ancora. Fornisci sempre un fallback affinché la pagina abbia un aspetto ragionevole nei browser non supportati.
Usa il prefisso -webkit-initial-letter accanto alla proprietà senza prefisso per coprire le versioni più vecchie di WebKit/Blink.
Fallback con progressive enhancement
La regola @supports consente di applicare la proprietà moderna solo dove funziona, e un layout più semplice basato su float ovunque:
/* Fallback for Firefox and older browsers */
p::first-letter {
font-size: 3.5em;
font-weight: bold;
float: left;
line-height: 0.65;
margin: 0.05em 0.1em 0 0;
}
/* Override with the proper property where supported */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
p::first-letter {
font-size: unset;
float: unset;
line-height: unset;
margin: unset;
-webkit-initial-letter: 3;
initial-letter: 3;
}
}L'approccio con float richiede la regolazione manuale di line-height e margin per allineare visivamente la lettera — che è esattamente la configurazione fragile che initial-letter sostituisce. Il blocco @supports reimposta ordinatamente quei valori manuali e applica la proprietà standard.
Quando usare initial-letter
Usa initial-letter quando:
- Vuoi capilettera editoriali che rimangano allineati anche se il lettore cambia le dimensioni del font del browser.
- Stai realizzando layout in stile magazine, articoli di lungo formato o pagine di capitoli di libri.
- Puoi tollerare il mancato supporto di Firefox con un fallback float.
Evitalo quando:
- La prima "lettera" è in realtà un numero, un emoji o un segno di punteggiatura — l'allineamento visivo potrebbe risultare imprevisto.
- Hai bisogno di un controllo pixel-perfect sulla posizione in tutti i browser oggi, senza un fallback float.
Proprietà correlate
::first-letter— lo pseudo-elemento a cuiinitial-lettersi applica.::first-line— stilizza la riga iniziale di un blocco.float— il metodo classico (pre-CSS3) per simulare un capolettera.font-size— dimensiona il testo manualmente quandoinitial-letternon è supportato.line-height— determina la griglia di righe a cui il capolettera si aggancia.text-indent— un altro strumento tipografico per la prima riga, spesso usato insieme ai capilettera.