Lo pseudo-elemento :first-letter serve a formattare la prima lettera di un blocco di testo. Per quanto possa sembrare utile a prima vista, in realtà questo selettore pone alcuni problemi pratici di non semplice risoluzione. In questo articolo vedremo un problema che si presenta quando questo selettore viene combinato con altre regole CSS o in presenza di determinati elementi HTML.
In un layout avevo deciso di usare la pseudo-classe :first-letter, dopo essere passato in una serie di dubbi e di ripensamenti. Per esempio:
.post>h2+p:first-letter {
font: bold italic 1.3em/0.25 Georgia, serif;
color: #666;
background: transparent;
padding-right: 0.1em;
}
Il codice scritto in quel modo e con quei selettori (figlio e adiacente) serve unicamente allo scopo di non far leggere le dichiarazioni a Internet Explorer 6, ma solo ad Explorer 7 e agli altri browser.
C'è da dire che l'effetto tipografico funziona solo nel caso in cui (malaugurato caso) non decidiamo di applicare uno sfondo allo pseudo-elemento e del padding. A questo punto scopriremo che la difformità di visualizzazione tra i browser è enorme, anche tra quelli standard compliant: Firefox ed Explorer 6 (incredibile auditu) sono concordi, mentre c'è totale disaccordo tra gli altri. Opera , ad esempio, mostra il box dello pseudo-elemento incredibilmente allungato verso il basso, e non c'è modo di modificare il suo comportamento.
Partiamo dalle specifiche stesse, che affermano:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
Lo pseudo-elemento :first-letter deve selezionare la prima lettera della prima riga di un blocco, se questa non viene preceduta da qualsiasi altro contenuto (come le immagini o le tabelle inline) sulla sua riga.
Opera viola completamente quanto sancito dalle specifiche, selezionando la prima lettera di un paragrafo anche quando questa viene preceduta da altro contenuto, come un'immagine. Firefox, correttamente, non la seleziona. In altre parole, se voi applicate il codice sopra riportato, ed all'inizio di un paragrafo inserite un'immagine, per esempio flottata, Opera formatterà la prima lettera del testo che segue l'immagine. Questo ad alcuni potrà sembrare comodo (ad essere brutalmente sinceri lo è), ma è pur sempre una violazione delle specifiche. Per uniformare le opinioni dei browser occorre usare uno stratagemma alquanto goffo:
.post>h2+p.no:first-letter {
font: normal normal 1em/1.5
Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
padding: 0;
}
Una semplice classe, come potete vedere. Gli stili applicati non fanno altro che riportare la prima lettera del blocco al suo stato normale anche su Opera (per restare conformi alle specifiche).
Continuando la lettura delle specifiche scopriamo che:
To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter, unlike for normal elements.
Per consentire ai programmi utente di rendere un capolettera o una lettera maiuscola iniziale in modo tipograficamente corretto, il programma utente può scegliere un'interlinea, una larghezza ed un'altezza sulla base della forma della lettera, diversamente che per gli altri elementi.
Ossia ogni browser è libero di scegliere quello che secondo lui più si addice al "tipographically correct" (cosa vi ricorda questa espressione?). Risultato: il caos totale.
A voler essere pratici, la soluzione consiste nell'usare un'elemento span entro cui racchiudere la prima lettera del blocco. Oltre alla maggiore semplicità (e coerenza) di formattazione, questa soluzione ci permette di avere anche una retrocompatibilità maggiore.