Google AJAX API Language e Prototype.js

Dopo aver visto il funzionamento delle Google AJAX API mi è venuto in mente un modo alternativo per tradurre realtime le nostre pagine Web. Sfruttando prototype.js è possibile marcare i TAG HTML che desideriamo tradurre, invece di sottoporre l’intero documento alla traduzione. Per marcare i TAG HTML da tradurre ho usato l’attributo rel, impostandolo a translate:

1
<p rel="translate">Questo testo deve essere tradotto</p>

Con una semplice funzione, poi, possiamo sfruttare prototype.js per elaborare tutti i  TAG HTML con rel='translate':

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @name         : translate()
 * @description  : translate  
 */

function translate() {
    $$('[rel="translate"]').each(
        function(e) {
            google.language.translate(e.innerHTML, 'it', 'en',
                function(result) {
                    if (result.translation) {
                        e.innerHTML = result.translation;
                    } else {
                        alert( 'Translate Error!\n\n' + result.error.message );
                    }
                }
            );                                          
        }
    );
}

Potete vedere questa funzione in azione su e-lementi.com

Ovviamente lo script può (e/o deve) essere perfezionato a seconda dei casi. È interessante notare, tuttavia, che è possibile specializzarlo in modo tale da sostituire delle immagini (nel caso di bottoni in grafica che contengono testo) o fargli elaborare TAG particolari come INPUT o TEXTAREA.

Uno dei limiti che ho riscontrato, e che vorrei approfondire, riguarda il numero di caratteri che possono essere tradotti. In caso di testi importanti, infatti, non è difficile ottenere un errore: che infatti ho gestito nello script con un alert().