Using the Google Translation Gadget on a Dynamic Website

Update (Oct 22, 2013): a short demo of the latest version of the visualization is available on youtube

I recently learned of the google translation gadget for web sites.  Basically, you stick some javascript on your web site and it will translate the site to any of about 70 languages.  I have been playing with getting this to work with minimal flicker of changing of translated text for the d3 World Births/Deaths visualization, as it seemed appropriate given the nature of the project.  A first cut is available here

https://googledrive.com/host/0B2GQktu-wcTicEI5VUZaYnM1emM/

The way the gadget works is (apparently) to translate anything it sees: static text as well as new text added to the DOM.  It uses a small flash component (from google) to help with this.

The Visualization translated to French
by the Google Translation Gadget

What the Gadget Does

Here's a before and after for some of the static text:

Original Contents of DOM:

What DOM Looks Like after Google Translator Plugin Has Translated to French:

I'm not sure why it inserts the extra font/font tags, but they seem harmless so far.

Just Using Google's Gadget Code is not Enough

The first thing I did was to just plop the plugin on the site, and see what happened.  It worked, but the flickering because of the dynamic translation of the country names and various other text in popups was distracting.

So, I modified things so that when it loads the countries on page load, it appends the country names to the DOM in a hidden div. These elements are then used whenever the country name is needed.  This seems to work when the language is changed because the plugin churns through that whole static list in one fell swoop when that happens, and then when you grab the contents of a specific element, you get the translated text.

Similarly, I predefined some other static text used in the javascript to prevent similar flickering on popups, etc.

What I haven't dealt with yet are the city names.  They could probably be cached in the DOM, too, as they occur (and cleared when the language changes - which you can detect based on contents of the plugin html itself).  Right now, it will translate the cities as they appear, but this is not as distracting as the other things were.

Use of the Gadget is Free

I was confused about the relationship between this plugin and google's translate api.  The translate api costs money.  However, using the plugin is free (https://developers.google.com/translate/v2/faq):

(Referring to the Google Translate API):
Is there any free quota?

No, the Google Translate API is only available as a paid service. Please see Pricing and Support for more details. However we do offer the Google Website Translator gadget, which will translate your website without charge.

Cool.

Preventing Translation on Certain Elements

If you add the css class "notranslate" to an element, then the gadget will not try to translate whatever is inside.  For now, I used this for some abbreviations, numbers, and dates.  I also added this class to the text it gets from the static lists.  This is because otherwise the gadget seemed to want to untranslate it and then translate it back, which resulted in flickering.

How Good are the Translations?

I have no idea how good the translations are.  They might come out goofy.  However, another cool thing is that the gadget allows the user to submit suggested improvements, and you can view these on your personal gadget manager page.



Please feel free to let me know of quirks, etc.  I don't have a computer with IE with me, so I don't know how well it works with that browser.