![\"accenti\"](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/03\/accenti.png\" "\\"accenti\\"")
<\/p>\n<\/p>\n
E’ appena passata un’altra generazione di tecnologie e Unicode \u00e8 ormai supportato praticamente ovunque. Il prossimo passo \u00e8 quindi quello di scrivere software che non sia solo \u201cinternazionalizzato\u201d ma veramente multi-lingua. In questo articolo passeremo rapidamente in rassegna un po’ di storia e di teoria, per poi illustrare un hack efficace chiamato accent-folding. L’accent-folding ha i suoi limiti ma pu\u00f2 comunque aiutare a rendere migliori alcuni aspetti dell’interazione utente, importanti sebbene spesso sottovalutati.<\/p>\n
Nel processo di internazionalizzazione si d\u00e0 per assunto che qualunque utente rientri perfettamente in una singola locale<\/a>, come ad esempio \u201cEnglish, United States\u201d o \u201cFrench, France.\u201d. Si tratta di un retaggio del passato, quando per il PC era gi\u00e0 parecchio riuscire a mostrare i giusti bit. Un byte equivaleva ad un carattere solo, senza eccezioni, e si poteva caricare un solo alfabeto alla volta. Questo andava bene perch\u00e9 era meglio che niente e perch\u00e9 gli utenti passavano la maggior parte del loro tempo con dei documenti che avevano creato essi stessi o i loro collaboratori.<\/p>\n Oggi gli utenti hanno a che fare ogni giorno con dati provenienti da tutto il mondo, in pi\u00f9 lingue e locali. La locale che io in quanto utente preferisco<\/em> \u00e8 solo debolmente correlata con le locali che le applicazioni mi aspetto processino<\/em>.<\/p>\n Prendete per esempio questa rubrica:<\/p>\n Se compongo un nuovo messaggio ed inserisco \u201clo\u201d nel campo \u201cA:\u201d, cosa pu\u00f2 succedere? In molte applicazioni, solo il nome Lorena verr\u00e0 mostrato nell’elenco dei suggerimenti. Queste applicazioni \u201csupportano Unicode,\u201d nel senso che non lo sporcano e non vi pasticciano, ma questo \u00e8 tutto.<\/p>\n Fig 1. Ehi Entourage, dove sono i miei contatti?<\/p>\n<\/div>\n Questo problema non si trova esclusivamente nelle rubriche indirizzi. Pensate alle inbox, ai social bookmark, ai feed dei commenti, agli utenti che parlano pi\u00f9 lingue, agli internet caf\u00e9 in paesi stranieri, perfino agli URLs. Provate a cercare il giornalista Ryszard Kapu\u015bci\u0144ski e guardate come differenti siti web trattino il suo nome:<\/p>\n Non ci sono scuse: il vostro software non pu\u00f2 comportarsi in modo cos\u00ec ottuso quando l’utente digita \u201ccaffe<\/strong>\u201d invece di \u201ccaff\u00e9<\/strong>.\u201d<\/p>\n<\/div>\n In specifiche applicazioni di ricerca che preferiscono richiamare un maggior numero di risultati piuttosto che essere pi\u00f9 precisi, come nel nostro esempio della rubrica indirizzi, \u00e1<\/strong>, a<\/strong>, \u00e5<\/strong>, e \u00e2<\/strong> possono essere trattate come equivalenti. Gli accenti (altres\u00ec noti come segni diacritici<\/a>) sono suggerimenti di come deve essere la pronuncia, ma non influenzano il significato della parola. Digitare le lettere accentate pu\u00f2 rivelarsi complicato, soprattutto sui dispositivi mobili.<\/p>\n Fig 2. Accent-folding nella widget di suggerimento automatico.<\/p>\n<\/div>\n Una funzione accent-folding sostanzialmente mappa i caratteri Unicode al loro equivalente ASCII. Ovunque applichiate il case-folding<\/a>, dovreste considerare di applicare anche l’accent-folding, esattamente per le stesse ragioni. Con l’accent-folding, non importa se l’utente cerca caffe<\/strong>, caff\u00e9<\/strong> o perfino \u00e7\u00e5FF\u00e9<\/strong>;: i risultati saranno gli stessi.<\/p>\n Attenzione, per\u00f2! Ci sono milioni di problemi nelle regole degli accenti. Quasi sicuramente sbaglierete qualcosa da qualche parte.<\/strong> Quasi tutti gli alfabeti hanno dei segni super-speciali che influiscono anche sul significato e ovviamente tutti gli alfabeti non Occidentali hanno regole totalmente diverse da quelle a cui siamo abituati.<\/p>\n Un problema minore \u00e8 l’alfabeto Unicode “fullwidth” Roman<\/a>: si tratta di un insieme semplici caratteri ASCII di larghezza fissa pensati per allinearsi con i caratteri Cinesi\/Giapponesi\/Koreani (e.g., “\uff11\uff19\uff17\uff19\u5e74\uff18\u6708\uff11\uff15\u65e5”). Si trovano tra Ho messo su GitHub degli esempi pi\u00f9 completi<\/a>, ma per illustrare la tecnica, ecco un esempio base di accent-folding utilizzando Javascript:<\/p>\n (Il codice che prosegue su una nuova riga \u00e8 segnato con \u00bb \u2014ndr<\/em>)<\/p>\n Le espressioni regolari sono difficili da gestire se si vuole che si \u201crendano conto degli accenti\u201d. Notate come in Fig. 2 solo i caratteri non accentati siano in grassetto. Il problema \u00e8 che il layout dei caratteri Unicode non si presta ai pattern trasversali alle lingue. L’espressione regolare appropriata per \u201clo<\/strong>\u201d sarebbe qualcosa di pazzesco come:<\/p>\n Non fate mai una cosa del genere! Mai! Al momento in cui scriviamo, ci sono pochi motori per espressioni regolari che supportano shortcuts per le classi di caratteri Unicode. I pi\u00f9 avanzati sembrano essere PCRE<\/a> e Java. Probabilmente non dovreste forzare questo meccanismo, ma al contrario cercare di evidenziare una versione accent-folded [indipendente dagli accenti, ndr<\/em>] della stringa e poi usare la posizione del carattere per sottolineare l’originale, come in questo esempio:<\/p>\n L’esempio precedente \u00e8 probabilmente troppo semplificato per poter essere usato nel codice in produzione. Ad esempio, non si possono sottolineare termini multipli. Alcuni caratteri speciali potrebbero espandersi su due caratteri, come \u201c\u00e6<\/strong>\u201d –> \u201cae<\/strong>\u201d con la conseguenza di mandare a gambe all’aria La libreria Autocomplete di YUI<\/a> [Yahoo! User Interface, ndr<\/em>] ha molti spunti ed opzioni con cui giocare. Oggi vedremo due metodi riscrivibili: (Il codice che prosegue su una nuova riga \u00e8 segnato con \u00bb ndr<\/em>)<\/p>\n La soluzione dell’accent-folding funziona principalmente per le lingue dell’Europa occidentale, ma non va bene per tutte. Sfrutta le peculiarit\u00e0 di questa famiglia di lingue ed i problemi limitati al dominio dei nostri esempi, dove \u00e8 meglio avere qualche risultato piuttosto che nessun risultato. In Germania, sarebbe pi\u00f9 corretto che \u00dc<\/strong> venisse mappato con Ue<\/strong> invece che solo a U<\/strong>. Un francese che cerchi sul web la parola th\u00e9<\/strong> (tea) sarebbe infastidito da tutti i risultati irrilevanti in inglese che darebbe la ricerca.<\/p>\n Fino ad ora, si pu\u00f2 solo mappare un singolo carattere. Sarebbe molto complicato ricondurre \u201cMarc Chagall<\/strong>\u201d scritto con caratteri latini all’equivalente in alfabeto cirillico \u201c\u041c\u0430\u0440\u043a \u0428\u0430\u0433\u0430\u043b<\/strong>\u201d o in Yiddish \u201c\u05de\u05d0\u05b7\u05e8\u05e7 \u05e9\u05d0\u05b7\u05d2\u05d0\u05b7\u05dc<\/strong>.\u201d Ci sono molte interessanti analogie tra i caratteri, ma un mapping bidirezionale svincolato dal contesto \u00e8 probabilmente impossibile.<\/p>\n In capo a ci\u00f2 c’\u00e8 un altro problema: una lingua pu\u00f2 avere pi\u00f9 di un sistema di scrittura. La translitterazione<\/a> consiste nello scrivere una lingua in un diverso alfabeto. Non \u00e8 esattamente come la trascrizione<\/a>, che mappa i suoni<\/em> come in \u201chola, que paso<\/strong>\u201d in \u201coh-la, keh pah-so<\/strong>.\u201d. La translitterazione cerca di mappare i simboli scritti<\/em> in un altro alfabeto, idealmente in maniera reversibile.<\/p>\n Queste quattro frasi dicono tutte \u201cAi bambini piace guardare la televisione\u201d in Giapponese:<\/p>\n Per secoli le persone si sono inventate modi per scrivere diverse lingue con qualunque tastiera o con qualsiasi sistema tipografico avessero a disposizione. Cos\u00ec, anche se l’utente legge solo una lingua, pu\u00f2 leggerla in schemi di translitterazione multipli. Alcuni schemi sono logici ed accademici, ma spesso sono sistemi organici disordinati che dipendono da accenti regionali o da codice di scarsa qualit\u00e0 utilizzato da molto tempo. L’era del computer ha favorito una nuova esplosione di sistemi dovuta al fatto che le persone hanno imparato a chattare e mandare email con il semplice ASCII.<\/p>\n Molto lavoro \u00e8 gi\u00e0 stato fatto su questo problema e ci sono due strade gi\u00e0 delineate tra cui scegliere: la strada giusta e quella che forse potrebbe essere una buona strada. Nessuna di queste ha la semplicit\u00e0 e l’ingenuit\u00e0 delle nostre hash tables, ma saranno meno fastidiose per i vostri utenti nelle applicazioni in generale.<\/p>\n La prima strada \u00e8 la International Components for Unicode<\/a> (ICU), un progetto che ha avuto inizio nei primi anni ’90 nell’Unione Europea. Ha come scopo quello di essere una libreria per translitterazioni completa, che riconosce la lingua, che utilizza Unicode e con capacit\u00e0 di formattazione… Insomma, fa tutto. E’ enorme ed \u00e8 scritta in C++\/Java; richiede una conoscenza contestuale degli input e degli output per poter lavorare.<\/p>\n La seconda strada \u00e8 Unidecode<\/a>, una libreria per translitterazione libera dal contesto disponibile per Perl e per Python<\/a>. Cerca di fare la translitterazione di tutti i caratteri Unicode verso un alfabeto latino di base. Non cerca di essere reversibile, per uno specifico linguaggio e nemmeno generalmente corretta: \u00e8 un hack rapido e sporco ma ci\u00f2 nonostante piuttosto comprensibile.<\/p>\n L’accent-folding messo nei posti giusti risparmia agli utenti un po’ di tempo e rende il vostro software pi\u00f9 intelligente ed elegante. La stretta segregazione delle lingue e delle locali \u00e8 parzialmente un artefatto delle limitazioni della tecnologia che non ha pi\u00f9 ragion d’essere. Dipende da voi quanto far avanzare le cose, ma anche un minimo sforzo pu\u00f2 farvi fare molta strada. Buona fortuna!<\/p>\n<\/div>\n\n
![\"Screenshot](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/03\/fig1.png\" "\\"Ehi,")
<\/p>\n\n
\n\u00c1\u00e7\u010d\u1ec1\u00f1\u1e6d-\u1e1e\u00f8\u0142\u0256\u01d0\u1e45g<\/h2>\n
![\"Esempio](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/03\/fig2.png\" "\\"L'accent-folding")
<\/p>\n0xff00<\/code> e 0xff5e<\/code> e dovrebbero essere trattati come equivalenti dei loro corrispettivi ASCII.<\/p>\n<\/div>\n\nEhi, sono qui solo per fare copia\/incolla!<\/h2>\n
var accentMap = {
'\u00e1':'a', '\u00e9':'e', '\u00ed':'i','\u00f3':'o','\u00fa':'u'
};
function accent_fold (s) {
if (!s) { return ''; }
var ret = '';
for (var i = 0; i < s.length; i++) {
ret += accentMap[s.charAt(i)] || s.charAt(i);
}
return ret;
};
<\/code>
<\/pre>\n<\/div>\n\nEspressioni regolari<\/h2>\n
[Ll\u0139\u013a\u013d\u013e\u013b\u013c\u1e36\u1e37\u1e38\u1e39\u1e3c\u1e3d\u1e3a\u1e3b\u0141\u0142\u0141\u0142\u013f\u0140\u023d\u019a\u026b][Oo\u00d3\u00f3\u00d2\u00f2\u014e\u014f\u00d4\u00f4\u1ed0\u1ed1\u1ed2\u1ed3\u1ed6\u00f6\u022a\u022b\u0150\u0151\u00d5\u00f5\u1e4c\u022d\u022e\u022f\u01fe\u01ff...\u01ec\u01ed\u014c]<\/code>
<\/pre>\n
\/\/ accent_folded_hilite(\"Fulanilo L\u00f3pez\", 'lo')
\/\/ --> \"Fulanilo<\/strong> L\u00f3<\/strong>pez\"
\/\/<\/strong>
function accent_folded_hilite(str, q) {
var str_folded = accent_fold(str).toLowerCase() \u00bb
.replace(\/[]+\/g, '');
var q_folded = accent_fold(q).toLowerCase() \u00bb
.replace(\/[]+\/g, '');
\/\/ Creazione di una stinga intermedia con i suggerimenti evidenziati
\/\/ Esempio: fulani pez<\/strong>
var re = new RegExp(q_folded, 'g');
var hilite_hints = str_folded.replace(re, \u00bb
'');
\/\/ Puntatore all'indice della stringa originale<\/strong>
var spos = 0;
\/\/ Accumulatore per la nostra stringa finale<\/strong>
var highlighted = '';
\/\/ Scorriamo in parallelo la stringa originale e la stringa
\/\/ con i suggerimenti evidenziati.
\/\/ Quando nella stringa con i suggerimenti incontriamo un
\/\/ appendiamo nella stringa finale un carattere
\/\/ di tag aperto o chiuso e incrementiamo il contatore della
\/\/ stringa con i suggerimenti. Se incontriamo un carattere che
\/\/ non \u00e8 un simbolo di suggerimento appendiamo il carattere
\/\/ della stringa originale nella stringa finale e incrementiamo
\/\/ entrambe i contatori.<\/strong>
\t\t\t
for (var i = 0; i< hilite_hints.length; i++) {
var c = str.charAt(spos);
var h = hilite_hints.charAt(i);
if (h === '<') {
highlighted += '';
} else if (h === '>') {
highlighted += '<\/strong>';
} else {
spos += 1;
highlighted += c;
}
}
return highlighted;
}
<\/code>
<\/pre>\nspos<\/code>. Inoltre, elimina i segni di maggiore e minore () presenti nella stringa originale. Ma va comunque bene come primo passo.<\/p>\n<\/div>\n\nAccent-folding nella libreria Autocomplete di YUI<\/h2>\n
filterResults()<\/code> e formatMatch()<\/code>. Il metodo filterResults<\/code> ci permette di scrivere la nostra funzione di confronto. Il metodo formatMatch<\/code> ci permette di cambiare l’HTML di una entry nella lista di accoppiamenti suggeriti. Potete inoltre scaricare un esempio completo su cui lavorare<\/a>, compreso tutto il codice sorgente.<\/p>\n
<!-- questo \u00e8 importante per dire a javascript di trattare le stringhe
come UTF-8 -->
<\/strong>
<meta http-equiv=\"content-type\" content=\"text\/html;charset=utf-8\" \/>
<!-- YUI stylesheets -->
<\/strong>
<link rel=\"stylesheet\" type=\"text\/css\"
href=\"http:\/\/yui.yahooapis.com\/2.7.0\/build\/fonts\/fonts-min.css\" \/>
<link rel=\"stylesheet\" type=\"text\/css\"
href=\"http:\/\/yui.yahooapis.com\/2.7.0\/build\/autocomplete\/assets \u00bb
\/skins\/sam\/autocomplete.css\" \/>
<!-- librerie YUI: eventi, sorgenti e completamento automatico -->
<\/strong>
<script type=\"text\/javascript\"
src=\"http:\/\/yui.yahooapis.com\/2.7.0\/build\/yahoo-dom-event \u00bb
\/yahoo-dom-event.js\"><\/script>
<script type=\"text\/javascript\"
src=\"http:\/\/yui.yahooapis.com\/2.7.0\/build\/datasource \u00bb
\/datasource-min.js\"><\/script>
<script type=\"text\/javascript\"
src=\"http:\/\/yui.yahooapis.com\/2.7.0\/build\/autocomplete \u00bb
\/autocomplete-min.js\"><\/script>
<!-- contiene accent_fold() e accent_folded_hilite() -->
<\/strong>
<script type=\"text\/javascript\" src=\"accent-fold.js\"><\/script>
<!-- Assegna a <body> la \"skin\" YUI -->
<\/strong>
<body class=\"yui-skin-sam\">
<b>To:<\/b>
<div style=\"width:25em\">
<!-- il nostro campo \"to\" -->
<\/strong>
<input id=\"to\" type=\"text\" \/>
<!-- Un <div> vuoto per contenere l'autocomplete -->
<\/strong>
<div id=\"ac\"><\/div>
<\/div>
<\/body>
<script>
\/\/ La nostra rubrica indirizzi statica resa come lista
di hash tables
<\/strong><\/code>{emailcloak=off}var addressBook = [
{name:'Fulanito L\u00f3pez', email:'fulanito@example.com'},
{name:'Erik L\u00f8rgensen', email:'erik@example.com'},
{name:'Lorena Smith', email:'lorena@example.com'},
{name:'James L\u00f6', email:'james@example.com'}
];
<\/code>{emailcloak=on}\/*
Cicla sulla nostra rubrica indirizzi e aggiunge un nuovo campo ad ogni
riga chiamato \"search.\" Questo contiene una versione accent-folded del
campo \"name\".
*\/<\/strong>
for (var i = 0; i< addressBook.length; i++) {
addressBook[i]['search'] = accent_fold(addressBook[i]['name']);
}
\/\/ Creazione di un oggetto datasource YUI dalla nostra rubrica grezza<\/strong>
var datasource = new YAHOO.util.LocalDataSource(addressBook);
\/*
Un datasource \u00e8 una tabella, ma il nostro array di hash tables non ho il
concetto dell'ordinamento in colonna. Quindi bisogna dire al datasource
come ordinare le colonne
*\/<\/strong>
datasource.responseSchema = {fields : [\"email\", \"name\", \"search\"]};
\/*
Istanziare la widget di autocompletamento con il riferimento al campo di
input, al div vuoto e all'oggetto datasource.
*\/<\/strong>
var autocomp = new YAHOO.widget.AutoComplete(\"to\", \"ac\", datasource);
\/\/ Permette l'inserimento di pi\u00f9 entri specificando come delimitatori
\/\/lo spazio e la virgola<\/strong>
autocomp.delimChar = [\",\",\" \"];
\/*
Aggiunge un nuovo metodo filterResults() all'oggetto \"autocomplete\":
cicla sul datasource e cerca \"q\" all'interno del campo \"search\".
Questo metodo viene richiamato ogni volta che l'utente inserisce un
nuovo carattere nel campo di input.
*\/<\/strong>
autocomp.filterResults = function(q, entries, resultObj, cb) {
var matches = [];
var re = new RegExp('\\\\b'+accent_fold(q), 'i');
for (var i = 0; i < entries.length; i++) {
if (re.test(entries[i]['search'])) {
matches.push(entries[i]);
}
}
resultObj.results = matches;
return resultObj;
};
\/*
Aggiunge un metodo formatResult(). Viene richiamato su
ciascun risultato ritornato da formatResult(). Ritorna
una buona rappresentazione HTML del confronto.
In questo metodo abbiamo eseguito la funzione di evidenziazione
accent-folded sul nome e sull'e-mail.
*\/<\/strong>
autocomp.formatResult = function (entry, q, match) {
var name = accent_folded_hilite(entry[1], q);
var email = accent_folded_hilite(entry[0], q);
return name + ' ';
};
\/\/fine<\/strong>
<\/code>
<\/pre>\n<\/div>\n\nMigliaia di complicazioni…<\/h2>\n
\n