Brian Cray ··· Home > Blog > Javascript > Automatic translator built in javascript

Automatic translator built in javascript

When it comes to my blog, I'm always asking myself the same question: How can I make my content more engaging? I try to avoid so called "enhancements" like arbitrary visual embellishments or every-which-way navigation that distracts users from what they came for: a good read. I do my best to focus solely on making the content great.

I've done some playing in this area in the past, including estimated reading time and measuring simplicity. The other day, I thought I'd try something new. This is what I ended up with.

Javascript translation: How does it work?

  1. Detect the user's Country Code using google.loader.ClientLocation (I've written about this here)
  2. Translates the Country Code into a two digit language code
  3. If the user has a different native language, redirect the browser to a translated version of the page

A look at the source

(function () {
    var loaded = false;

    test_cc = window.test_cc ? test_cc : false;
    test_url = window.test_url ? test_url : false;

    var inject_jsapi = function () {
        var h = document.getElementsByTagName('head')[0];
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.onreadystatechange = function () {
            if (this.readyState === 'loaded' || this.readyState === 'complete') {
                translate(test_cc || (google.loader.ClientLocation && google.loader.ClientLocation.address.country_code), 'en');
            }
        };
        s.onload = function () {
            translate(test_cc || (google.loader.ClientLocation && google.loader.ClientLocation.address.country_code), 'en');
        };
        s.src = 'http://www.google.com/jsapi';
        h.appendChild(s);
    };

    var translate = function (cc, lang) {
        if (!cc || loaded) {
            return;
        }
        loaded = true;

        cc = cc.toLowerCase();

        // http://www.mobilefish.com/tutorials/country_language_codes/countrylanguagecodes.html
        var cc2lang = {
            af: 'fa', ax: 'sv', al: 'sq', dz: 'ar', as: 'sm', ad: 'ca',
            ao: 'pt', ai: 'en', aq: 'en', ag: 'en', ar: 'es', am: 'hy',
            aw: 'nl', ac: 'en', au: 'en', at: 'de', az: 'az', bs: 'en',
            bh: 'ar', bd: 'bn', bb: 'en', by: 'be', be: 'de', bz: 'en',
            bj: 'fr', bm: 'en', bt: 'dz', bo: 'es', ba: 'bs', bw: 'en',
            br: 'pt', io: 'en', bn: 'ms', bg: 'bg', bf: 'fr', bi: 'fr',
            kh: 'km', cm: 'en', ca: 'en', cv: 'pt', ky: 'en', cf: 'fr',
            td: 'fr', cl: 'es', cn: 'zh', cx: 'en', cc: 'ms', co: 'es',
            km: 'ar', cg: 'fr', cd: 'fr', ck: 'en', cr: 'es', ci: 'fr',
            hr: 'hr', cu: 'es', cy: 'el', cz: 'cs', dk: 'da', dj: 'fr',
            dm: 'en', do: 'es', ec: 'es', eg: 'ar', sv: 'es', gq: 'es',
            er: 'ti', ee: 'et', et: 'am', eu: 'en', fk: 'en', fo: 'fo',
            fj: 'en', fi: 'fi', fr: 'fr', gf: 'fr', pf: 'fr', tf: 'fr',
            ga: 'fr', gm: 'en', ge: 'ka', de: 'de', gh: 'en', gi: 'en',
            gr: 'el', gl: 'kl', gd: 'en', gp: 'fr', gu: 'en', gt: 'es',
            gg: 'en', gn: 'fr', gw: 'pt', gy: 'en', ht: 'fr', va: 'lt',
            hn: 'es', hk: 'zh', hu: 'hu', is: 'is', in: 'hi', id: 'id',
            ir: 'fa', iq: 'ar', ie: 'en', im: 'en', il: 'he', it: 'it',
            jm: 'en', jp: 'ja', je: 'en', jo: 'ar', kz: 'kk', ke: 'en',
            ki: 'en', kp: 'ko', kr: 'ko', kw: 'ar', kg: 'ky', la: 'lo',
            lv: 'lv', lb: 'ar', ls: 'en', lr: 'en', ly: 'ar', li: 'de',
            lt: 'lt', lu: 'de', mo: 'zh', mk: 'mk', mg: 'mg', mw: 'ny',
            my: 'ms', mv: 'dv', ml: 'fr', mt: 'mt', mh: 'mh', mq: 'fr',
            mr: 'ar', mu: 'en', yt: 'fr', mx: 'es', fm: 'en', md: 'mo',
            mc: 'fr', mn: 'mn', me: 'sr', ms: 'en', ma: 'ar', mz: 'pt',
            mm: 'my', na: 'en', nr: 'na', np: 'ne', nl: 'nl', an: 'nl',
            nc: 'fr', nz: 'en', ni: 'es', ne: 'fr', ng: 'en', nu: 'en',
            nf: 'en', mp: 'en', no: 'no', om: 'ar', pk: 'ur', pw: 'en',
            ps: 'ar', pa: 'es', pg: 'en', py: 'es', pe: 'es', ph: 'tl',
            pn: 'en', pl: 'pl', pt: 'pt', pr: 'es', qa: 'ar', re: 'fr',
            ro: 'ro', ru: 'ru', rw: 'rw', bl: 'fr', sh: 'en', kn: 'en',
            lc: 'en', pm: 'fr', vc: 'en', ws: 'sm', sm: 'it', st: 'pt',
            sa: 'ar', sn: 'fr', rs: 'sr', sc: 'en', sl: 'en', sg: 'en',
            sk: 'sk', si: 'sl', sb: 'en', so: 'so', za: 'en', gs: 'en',
            es: 'es', lk: 'si', sd: 'ar', sr: 'nl', sj: 'no', sz: 'en',
            se: 'sv', ch: 'de', sy: 'ar', tw: 'zh', tj: 'tg', tz: 'sw',
            th: 'th', tl: 'pt', tg: 'fr', tk: 'en', to: 'to', tt: 'en',
            tn: 'ar', tr: 'tr', tm: 'tk', tc: 'en', tv: 'tv', ug: 'en',
            ua: 'uk', ae: 'ar', gb: 'en', us: 'en', um: 'en', uy: 'es',
            vn: 'vi', vg: 'en', vi: 'en', wf: 'fr', eh: 'ar', ye: 'ar',
            yu: 'hr', zm: 'en', zw: 'en'
        };

        if (cc && cc2lang[cc] && cc2lang[cc] != lang) {
            (function (uri) {
                document.location.href = 'http://translate.google.com/translate?langpair=' + lang + '|' + cc2lang[cc] + '&u=' + uri;
            })(test_url || document.location.href);
        }
    };

    inject_jsapi();
})();

More on GitHub

If you're a GitHub fan, feel free to follow, fork, or play with the source on GitHub.