I CSS non possono controllare il layout delle singole lettere che compongono una parola nel testo. Una pseudo-classe strutturale come :nth-letter() non è mai stata proposta agli sviluppatori delle specifiche. Per questo motivo possiamo usare jQuery per scomporre il testo di una parola in singole lettere e applicare stili diversi a ognuna di queste. Vediamo come.
Abbiamo il seguente elemento HTML:
<h1>Test</h1>
Creiamo il seguente plugin jQuery:
(function($) {
$.fn.letters = function(cssClass) {
cssClass = cssClass || 'letter';
var text = this.text();
if(!/^[a-z]+$/i.test(text)) {
throw new Error(text + ' non contiene lettere');
}
var counter = 0, html = '', i;
for(i = 0; len = text.length, i < len; i += 1) {
counter += 1;
html += '<span class="' + cssClass + counter + '">' + text[i] + '</span>';
}
this.html(html);
return this;
};
})(jQuery)
Il plugin crea una stringa HTML contenente tanti elementi span quante sono le lettere del testo. Ciascuno di questi elementi ha una classe CSS progressiva (letter1, letter2 eccetera) e ha come contenuto la lettera corrente. Viene sfruttata una particolarità delle stringhe JavaScript, ossia il fatto di poter essere considerate come array.
Definiamo quindi delle classi CSS:
span.chunk1 {
color: #d34545;
font-family: Impact, sans-serif;
}
span.chunk2 {
color: #c30;
font-family: Impact, sans-serif;
text-transform: uppercase;
}
span.chunk3 {
text-transform: uppercase;
background: #000;
color: #fff;
text-shadow: 1px 1px 1px #aaa;
font-size: 1.2em;
}
span.chunk4 {
background: #000;
color: #fff;
text-transform: uppercase;
text-shadow: 1px 1px 1px #aaa;
}
Poi usiamo il nostro plugin:
$(document).ready(function() {
$('h1').letters('chunk');
});
Potete visionare l'esempio finale in questa pagina.