E commerciali ornamentali con jQuery

Nei libri tradizionali le E commerciali sono un'antica tradizione su cui i tipografi si sono esercitati nel corso dei secoli a creare soluzioni stilisticamente avanzate ed ornamentali. Vediamo come sfruttare jQuery in tal senso.

Possiamo creare un plugin minimale che racchiuda le E commerciali in elementi HTML:

(function($) {
    $.fn.ampersand = function() {
        return this.each(function() {
            var element = $(this);
            var html = element.html();
            element.html(html.replace(/&amp;/gi, '<span class="ampersand">&amp;</span>'));
        });
    };
})(jQuery);

$('p').ampersand();

A questo punto aggiungiamo semplicemente gli stili CSS:

.ampersand {
    font: italic 1.3em Baskerville, Georgia, serif;
    color: #666;
    padding-right: 5px;
}