Drop cap a margine con jQuery e CSS

I capolettera (drop cap) a margine sono un'eredità della tradizione medievale. Questo effetto tipografico prevede che la prima lettera di un blocco di testo venga posizionata fuori dal blocco e sul suo margine esterno sinistro (nelle scritture da sinistra verso destra). Vediamo come implementare questo effetto con jQuery e CSS.

Il capolettera verrà posizionato in modo assoluto. Per questo motivo dobbiamo creare un posizionamento contestuale nel blocco di testo di riferimento, il quale avrà un padding sinistro impostato su un valore che consenta la corretta visualizzazione del capolettera:

p {
    margin-bottom: 1em;
    padding-left: 2em;
}

.indent {
    position: relative;
}

.marginal-dropcap {
    font: 2em/0.8 Georgia, serif;
    position: absolute;
    top: 0;
    left: 0;
}

Con jQuery dobbiamo estrarre la prima lettera del testo, racchiuderla in un elemento span con classe marginal-dropcap ed operare infine una sostituzione nel testo:

var createMarginalDropCaps = function() {
    if ($('p.indent').length) {

        $('p.indent').each(function() {

            var $p = $(this);
            var text = $.trim($p.text());
            var firstLetter = text[0];
            var marginalDropCap = '<span class="marginal-dropcap">' + firstLetter + '</span>';

            $p.html(text.replace(firstLetter, marginalDropCap));

        });

    }
};

createMarginalDropCaps();
​