La proprietà CSS initial-letter semplifica molto le cose.
Supporto browser
Dove puoi provare initial-letter? È disponibile in Safari e da Chrome 110. In Safari, la proprietà richiede il prefisso -webkit-. Esiste un problema aperto per l'implementazione in Firefox.
Testa il supporto di initial-letter con:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Soluzioni attuali
Come potresti applicare uno stile a una lettera maiuscola iniziale in CSS oggi?
Lo pseudo-elemento ::first-letter ci aiuta a risolvere il problema.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Tuttavia, probabilmente dovrai utilizzare proprietà come "float" durante il calcolo di una dimensione per la prima lettera.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
L'introduzione di nuove unità CSS come lh potrebbe semplificare un po' la situazione. Tuttavia, anche queste hanno un'assistenza limitata (lh è attualmente supportato solo in Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Introduzione di iniziale-lettera
La proprietà initial-letter ti offre un controllo più preciso su questo stile di iniziali maiuscole. Richiede due valori separati da uno spazio:
p::first-letter {
initial-letter: 3.5 3;
}
- Il primo argomento definisce le dimensioni della lettera e quante righe occuperà. La lettera verrà ridimensionata mantenendo le proporzioni. Non puoi utilizzare un valore negativo, ma puoi utilizzare valori decimali.
- Il secondo argomento definisce l'output delle lettere. Questo può essere considerato l'offset per la posizione della lettera. Il secondo valore è facoltativo e non può essere negativo. Se non è presente, si assume il valore per il formato lettera arrotondato per difetto al numero intero più vicino. Questo è equivalente all'utilizzo della parola chiave "drop". Il sink accetta anche un altro valore della parola chiave, "raise", che è equivalente a un sink di 1.
Dai un'occhiata a questa demo in cui puoi modificare i valori per vedere in che modo influiscono sullo stile della lettera iniziale.
Se la combini con ::first-line, puoi ottenere qualcosa di simile
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
Oppure, dai un border. Nota come il seguente esempio utilizza la parola chiave "drop", che sarebbe il valore predefinito se omessa e corrisponde a 3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
Aggiungi un background o alcuni box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
In alternativa, ritaglia lo sfondo in base al testo:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
Hai a disposizione molte possibilità.
Ecco fatto, ora hai un maggiore controllo sullo stile delle lettere iniziali maiuscole con initial-letter. Aggiungi iniziali maiuscole alla tua tipografia? Come potresti acconciarli? Facci sapere.