Le specifiche CSS affermano che lo pseudo-elemento :first-letter può essere usato solo se la prima lettera non è preceduta da altro contenuto. Quindi se in un paragrafo abbiamo un'immagine flottata, l'effetto tipografico dei drop caps non può essere creato usando questo pseudo-elemento. Possiamo invece usare jQuery per questo scopo. Vediamo come.
Abbiamo un paragrafo con un'immagine flottata a destra:
<p id="first"><img src="image.png" alt="" class="alignright" />...</p>
L'immagine precede il testo, quindi non possiamo usare :first-letter. Creeremo un elemento con classe apposita usando come contenuto la prima lettera del testo:
.cap {
float: left;
font: 5em Georgia, serif;
color: #545454;
padding: 5px 10px 5px 0;
line-height: 0.8;
}
Ecco il codice jQuery:
$(function() {
var $p = $('#first');
var text = $p.text();
var firstLetter = text.charAt(0);
var html = $p.html();
$p.html(html.replace(firstLetter, '<span class="cap">' + firstLetter + '</span>'));
});
Abbiamo selezionato la prima lettera del contenuto testuale del paragrafo utilizzando il metodo charAt() e quindi abbiamo sfruttato il metodo replace() per modificare il contenuto HTML del paragrafo inserendo il nuovo elemento.
Potete visionare l'esempio finale in questa pagina.