Drop caps con i CSS

Le drop caps sono uno di quelli elementi che vengono usati molto
spesso nella tipografia tradizionale, un po' meno sul web. Vedremo
in questo appuntamento una semplice soluzione per implementarle, insieme ad alcune
varianti per poterle rendere al meglio, soprattutto senza l'uso di markup e/o classi
aggiuntive. Ecco l'esempio e il suo screenshot:

Prima di procedere con il CSS, è neccessaria
una piccola premessa. Alcune soluzioni presenti in rete usano
uno span aggiuntivo per racchiudere la lettera da rendere come
drop caps. Un approccio simile si rivela però potenzialmente dannoso per
questioni di accessibilità, dato che la parola in cui viene usata la drop
cap è letteralmente "spezzata" e può causare problemi su screen reader,
browser testuali e dispositivi alternativi in genere.

Lo pseudo-elemento :first-letter d'altra parte si presta
benissimo a fornire un'appoggio per la presentazione delle drop caps, senza
la necessità di markup aggiuntivo e senza compromettere contenuti e struttura.

Detto ciò, siamo pronti a procedere con il CSS dell'esempio,
che è davvero semplice. In sostanza, si tratta solo di rendere la prima lettera
dei paragrafi float, in grassetto e serif e sufficientemente grande. Ecco l'unica
regola usata:

Da notare che, pur avendo dichiarato un carattere di 100px per le drop caps,
l'altezza di linea è minore (85 px) in modo da evitare spaziatura verticale indesiderata.
La compatibilità dell'esempio è buona: è perfetto sulle versioni di Internet Explorer
dalla 5.5 alla 7 e le ultime versioni di Opera, Firefox e Safari; mentre su IE5
semplicemente le prime lettere dei paragrafi vengono mostrate come il resto del testo.

Una nota pratica per Internet Explorer 6: com'è possibile notare nel
CSS incorporato dell'esempio e dal codice sopra
riportato, c'è uno spazio prima dell'apertura della parentesi graffa.
Questo spazio è necessario affinché la tecnica funzioni: se viene rimosso,
per qualche strano motivo, la regola non ha alcuno effetto.

Tornando all'esempio: quello che vorremo è non avere le drop caps su tutti i paragrafi di una pagina,
ma limitarne e controllarne la presenza. Ci sono due possibili approcci, vediamoli da vicino.

Drop caps su classe determinata

La prima, e forse più immediata soluzione, che si potrebbe adottare per controllare
le drop caps è l'uso delle classi. Una buona norma, che abbiamo anche visto di recente nell'articolo
Un markup pronto per i fogli di stile è quella di non tradire la presentazione di un elemento attraverso le
classi, che dovrebbero essere invece indicative di una caratteristica funzionale o strutturale
degli elementi a cui vengono attribuite.

Scelte adeguate potrebbero essere ad esempio <p class="first-p">
se intendiamo applicare le drop caps solo ai primi paragrafi, oppure più in generale
<p class="special"> se vogliamo sentirci più liberi di
adottare le drop caps sui paragrafi a piacimento. Insomma, un nome che non vincoli
il markup alla presentazione nel momento in cui decidiamo, ad esempio, di abbandonare
le dropcaps dal nostro foglio di stile: in sostanza quindi classi del tipo <p class="dropcaps">
o <p class="drop"> sarebbero da evitare.

Eccoci quindi al secondo esempio in cui ho attribuito
la classe "special" al primo e all'ultimo paragrafo. Il blocco dichiarativo di questo secondo
esempio è identico al primo: a cambiare in effetti è solamente il selettore, che combinerà
quindi la classe "special" con lo pseudo-elemento :first-letter per ottenere l'effetto
desiderato:

Drop Caps con selettori avanzati

La soluzione che abbiamo appena visto è semplice ed efficace, ma ha un piccolo difetto: su
pagine esistenti richiede la modifica dell'HTML per aggiungere le classi necessarie.
Quello che vorremmo è poter avere una sorta di drop caps automatiche, potendo assegnare
le drop caps sui paragrafi a seconda del loro contesto di pagina.

Un'approccio simile è da preferire, ma presenta un limite intrinseco: usa selettori
"avanzati" che non sono supportati da Internet Explorer nelle versioni 5.x e 6.
D'altra parte, le drop caps sono una soluzione accessoria, e su questi browser le
regole CSS che vedremo non avranno alcun effetto, mostrando quindi il testo normale.
I due esempi che vedremo qui hanno supporto su IE7, Opera, Firefox e Safari.

Ecco quindi il terzo esempio, in cui
il primo paragrafo all'interno del div id="content" si presenta con una drop
cap, senza la necessità di classi o id aggiuntivi. Vediamo l'unica regola
utilizzata:

La regola si presenta un po' complessa, per via del selettore, vediamola nel dettaglio.
Per prima cosa il child selector
(indicato con il simbolo di maggiore >) che consente di selezionare i paragrafi
figli diretti (ovvero direttamente contenuti all'interno) del div con id="content":

Ora, attraverso la pseudo-classe :first child
andremo a selezionare solo il primo paragrafo direttamente contenuto nel div id="content":

Infine definiremo una regola specifica per il primo carattere del paragrafo così
individuato attraverso lo pseudo elemento first-child:

Le drop caps si potrebbero usare ad esempio sul primo paragrafo che segue
un titolo, anche in questo caso senza la necessità di classi o modifiche
nell'HTML. Ecco quindi il quarto esempio,
Vediamo l'unica regola utilizzata, che si serve
dell'adjacent sibling selectors,
(indicato attraverso il segno +) che permette di individuare il paragrafo che segue immediatamente il titolo h2:

Anche in questo caso, la sezione dichiarativa di regole e proprietà non è cambiata: è
bastato intervenire sul selettore.

Conclusioni

In questo articolo abbiamo visto un semplice modo di ottenere le drop caps con i CSS, e
soprattutto come adottarle attraverso l'uso di classi e selettori. Si tratta una di quelle
soluzioni in cui è possibile "osare" e limitare volendo il supporto ai browser,
dato che si tratta di un abbellimento grafico non indispensabile. In particolare,
gli ultimi due esempi visti potrebbero costituire un buono spunto ed essere adattati
ed estesi a seconda delle situazioni. Gli esempi sono disponibili per il download. Alla prossima.