Negli ultimi giorni gli utenti che navigano con IE avranno notato il layout leggermente scombinato grazie ad una pagina senza titolo che punta al blog e compare nella sezione destra, ovvero quella dei link Technorati. Essendo i dati prodotti direttamente dalle API del servizio non è possibile intervenire con modifiche. Si tratta di un link con testo decisamente lungo e mentre in browser come Opera,Firefox e Safari questo sborda sulla destra della colonna senza influire sull'impaginazione, in IE ha il fastidioso effetto di allargare la colonna che occupa stravolgendo il layout.
Di fronte a un problema, realizzare e valutare diverse soluzioni è una buona strategia e allo stesso tempo un buon modo per allenare la creatività . La prima soluzione è senza dubbio l'uso dei CSS: basterebbe una
sola regola specificando la larghezza dei list-item che contengono i link "incriminati"
e usando la dichiarazione overflow:hidden.
C'è un'alternativa ai CSS: l'uso di Javascript. Si presenta senz'altro meno ortodossa dei CSS, ma è un buon esercizio di DOM scripting.
Ho scritto così la piccola funzione TrimLongLinks, ecco il codice:
function TrimLongLinks(){
var i,l,t;
l=document.getElementsByTagName("a");
for(i=0;i<l.length;i++){
t=l[i].firstChild.nodeValue;
if(t.length>15 && t.indexOf(" ")<0)
l[i].firstChild.nodeValue=t.substr(0,12)+"...";
}
}
La funzione si occupa di reperire tutti i link, per ciascuno di essi verifica se è il testo più lungo di 15 caratteri e non contiene spazi. In caso affermativo procede a tagliarlo, aggiungendo tre puntini alla fine. A pensarci non è un'idea così assurda: in effetti le parole della lingua italiana che sono composte da più di 15 lettere credo che siano davvero poche...