Tradurre un sito senza sforzo: Google Translate, uso avanzato

Google Translate sembra aver smesso di fornire il codice per l’integrazione del tool, come si legge qui.

Il codice che trovate qui funziona correttamente.

Chi non vorrebbe sul proprio sito una traduzione automatica dei propri testi? Google Translate offre la possibilità di effettuarla al volo senza dover investire ulteriore tempo che quello di inserire poche righe di codice.

Google Translate: un paio di precisazioni prima di procedere.

Le traduzioni non sempre sono fedeli all’originale, ma visto che l’implementazione prenderà in tutto al massimo 10 minuti e che si offre comunque un servizio utile, ci si può passare sopra.
Le traduzioni vengono fatte dall’utente mentre naviga sulla pagina e nessuna di queste sarà indicizzata: non aspettatevi quindi una crescita dal punto di vista seo o di traffico proveniente dall’estero.

Ecco le poche righe di codice da inserire nel punto in cui volete che appaia la select per cambiare lingua.

<div id="google_translate_element" style="margin: 10px 15px;"></div>
<scripts type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'it',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            includedLanguages: 'en,es,fr,de,ja,ru,zh-CN'}
        , 'google_translate_element');
    }
</scripts>
<scripts type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></scripts>

Il div con id google_translate_element è quello in cui sarà inserita la drop-down che ci consentirà di scegliere la lingua in cui tradurre la pagina. Il costruttore javascript ammette alcuni parametri che sono: 

• pageLanguage: la lingua di partenza della pagina che vogliamo far tradurre;
• layout: specifica come vogliamo che sia visualizzata la select. 
  • SIMPLE consente di visualizzare il campo
  • HORIZONTAL mostra una normale select ed un “powered by google” accanto
  • omettendo il valore si ottiene una select con sotto il “powered by”.
• includedLanguages: lo inserisco se voglio mostrare solo un certo numero di lingue tra cui poter scegliere. Per una lista completa dei codici delle lingue che si possono usare rimando a questa pagina: https://ctrlq.org/code/19899-google-translate-languages

Intercettare l’evento della traduzione di Google Translate

Quando Google Translate esegue una traduzione, ovviamente l’ingombro dei testi può variare, specialmente se si parla di alfabeti non latini. Come potrei intercettare l’azione del cambio di lingua ed eseguire qualche aggiustamento di stile?

Di seguito trovate il codice, che utilizza jQuery per snellire le chiamate:

var selector_to_check = '#menu > ul > li:nth-child(2) > a';
$( document ).ready(function() {
    $(selector_to_check).bind('DOMSubtreeModified', function() {
        imposta_carattere();
    });
});

function imposta_carattere()
{
    var lang = $(".goog-te-menu-value span:first").text();   
   
    if( lang == 'Russo' )
         $("body").css('font-size', '0.64em');         
    else if( lang == 'Cinese (semplificato)' )
         $("body").css('font-size', '1.65em');         
    else if( lang == 'Giapponese' )
         $("body").css('font-size', '1.15em');
    else
        $("body").css('font-size', '0.85em');        
}

Spiego le righe degne di nota:

Riga 1: imposto una variabile che utilizzerò per controllare la variazione del dom della pagina, che di attiverà quindi al momento della traduzione. Deve essere un elemento visibile above the fold e suscettibile di traduzione, quindi non un immagine, ad esempio.

Riga 3: lego l’evento DOMSubtreeModified del mio selettore alla funzione che si occuperà di modificare la grandezza del font: questo evento sarà attivato ad ogni traduzione. Ad essere precisi l’evento sarà attivato diverse volte ad ogni singola traduzione per i vari passaggi che Google Translate farà sulla pagina.

Riga 10: assegno alla variabile lang il testo attivo nella select di Google Translate, che equivale all’etichetta del linguaggio in cui è stata effettuata la traduzione. Di seguito assegno una grandezza a seconda del linguaggio, con una opzione else  finale che imposti la grandezza di base se sto tornando su un linguaggio non tra quelli per cui voglio effettuare la modifica.