In jQuery è semplice creare un capolettera dinamicamente.
La soluzione è la seguente:
(function( $ ) {
$.fn.cap = function( options ) {
options = $.extend({
cssClass: "cap"
}, options);
return this.each(function() {
var element = this,
$element = $( element );
if( element.firstChild && element.firstChild.nodeType === 3 ) {
var text = element.firstChild.nodeValue;
var firstLetter = text.charAt( 0 );
var html = $element.html();
$element.html( html.replace( firstLetter, '<span class="' + options.cssClass + '">' + firstLetter + '</span>' ) );
}
});
};
})( jQuery );
Questa soluzione è necessaria nel caso in cui lo pseudo-elemento CSS :first-letter
non è sufficiente a livello di proprietà supportate.