Friday, August 24, 2012

Translate your website with Google Website Translator

Oftentimes we want to support multiple languages in our websites. One "easy" way is to keep one separate resource bundle for each language we support, but this isn't as simple as it seems. First you need a tag / mapping mechanism to match labels in your pages with tags in the property files (frameworks like JSF already provide it) but then you need to maintain multiple sets of labels. Any new field / screen etc will require changes all resource bundles, which can quickly become a burden. In many cases this burden may be  acceptable in exchange for full control and performance, but in other cases we can use Google's Website Translator tool.

Follow these steps to find out how to easily include a styled language selector into your website, and to remove the Google Website Translator toolbar. I recently applied these steps in Eventfy and the final result looks like this:

eventfyEnglish



First login with your Gmail account and sign your site up to Google Website Translator. Just click the “+ Add new website” button:

image

Select your site’s default language, and all other languages you want the GWT widget to list to your users. At the end it will give you a HTML code snippet like this:
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,es,fr,it,nl,pt', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Just add this code where you want the language selector to appear in your page. In Eventfy’s case I added it inside a <li style="padding-top:5px;"> block to get it aligned with the other menu items. This is all there is to get it to work, give it a try!

This is how Eventfy looked with this default code:

Default language selector with Google icon

Google translator toolbar hiding Eventfy's top menu and bad Portuguese translation

I like how easy it was to include it into Eventfy but I thought the language selector and the toolbar didn't look good with the rest of the site. The next step was then to override Google's default style with custom CSS so it looks as part of Eventfy's design. I removed the Google icon and the Google translator toolbar with the following style overrides:

1. Remove Google icon and "linky" behavior from language selector:
.goog-te-gadget-icon {display:none;}
.goog-te-gadget-simple a {text-decoration: none !important;}

2. Remove the Google translate toolbar:
.goog-te-banner-frame.skiptranslate {display: none !important;}
body { top: 0px !important; }

Note: you may want to add a <span class="notranslate"> anywhere you don't want translations (e.g. email addresses like “someone at somedomain dot com”).

Please note that while this is very easy to setup, since this is all computer-based some translations are way off. Thankfully we - site admins and users - can improve / override the automated translations with rules and suggestions (always managed by the website admin). More specifically, users can click on a translated phrase and suggest a better translation. Then, the website's admin can see and approve / reject suggestions from the Google Website Translator website.

Final result - no toolbar, no Google icon and improved Portuguese translation

I am still testing this service but if it works well it may be a simple (and cheap) approach to support multiple languages.

Happy translations to all! :)

16 comments:

  1. Nice post.The importance of a braille translation being accurate and efficient can indeed not be overstated. Especially in the ever faster moving world of globalized business, successful information and technology transfer within multinational businesses can make the difference between win or lose.

    ReplyDelete
  2. I can't see machines taking over the jobs of human translators in the near future, as they have done with so many other professions (remember telephone operators?).If you need a quick understanding of text that would be enough but in running business please use professional translation service .

    ReplyDelete
  3. Other option is to add it to Footer so it would take effect on all pages. You can edit html/css or wait for the new themes which come with flexible footer and you will be able to drag-and-drop. Once in footer or sidebar, that can get applied to the whole site.

    ReplyDelete
  4. Language translation is now a great area to consider for a career. In light of our growing global economy, an increasing variety of various languages are being used in business as well as in social settings. The need for individuals with the ability to translate languages is ever increasing and jobs can now be found in practically every industry imaginable for skilled translators and interpreters.

    ReplyDelete
  5. Thanks for the info. This is very helpful. Does anyone know how with php or javascript a default language can be selected without going to the drop-down? For example on a community site in member settings they could select their default language as Spanish. Then each time they log in it automatically selects and displays Spanish.

    ReplyDelete
  6. PLEASE
    someone in the whole internet is so kind to let me know WHERE THE HELL i have to put that code?
    Everything is easy when you know how to do.... but there are hundreds of website who show this code in order to remove that damned google bar.... but NOBODY says where the hell i have to copy it :)
    Ok, In the CSS, i understand... but there are many css file in my magento :(
    So is there a kind person who is so nice to give us a path to understand which file exactly we have to change?

    ReplyDelete
    Replies
    1. I never used Magento so I can't give you a very specific answer...

      However, it doesn't HAVE to be "in the CSS" - as long you add the CSS tags I listed above anywhere in your HTML the browser will pick it up and get rid of the google bar. You could include it in a header file that gets included in every page, for example. Or you could add it to some main CSS file that is used by every page (this is actually what I did when I wrote this article).

      You can see how I did it in Eventfy here: http://www.eventfy.com/css/style.css

      This CSS is used in every page of this site. You can find out how the CSS is included by going to http://www.eventfy.com and looking at the page's src code. Sorry, blogger isn't letting me paste HTML tags here.

      Hope that helps.

      Delete
    2. eheh ok thank you :-)
      Anyway i try and try and finally your code is working when you copy it in the style.css located in yoursite/skin/frontend/default/yourtheme/css
      I hope it help the magento community since it is really lacking of documentation :-)
      Thank you for the code.

      Delete
    3. If you are so frustrated with Magento, you should try Prestashop. It has multi-language already built in for 41 different languages. I have experience with both and Prestashop is, BY FAR, easier to learn, skin, and develop than Magento.

      Delete
  7. This was cool. I tried to use the service also but was not able to customize until i read your post. Thanks for the nice article.

    ReplyDelete
  8. You rock. Thanks m8

    ReplyDelete
  9. Hi,, how can I make the translator button smaller, only 145 X 25 pix,, is it possible?
    Thanks,

    ReplyDelete
    Replies
    1. what translator button? you mean the "Select Language" drop down?
      It has been long time since I wrote this article but looking at the CSS I think you may just need to override width / height for DIV "google_translate_element". The smaller component size may truncate the text, so you may also need to override the font size inside this component. I didn't test this though.

      Delete
    2. I did a quick test with Chrome dev tools and found that just changing style for DIV "google_translate_element" isn't enough to shrink the translator drop down. I did get it smaller after I set width and height for CSS class ".goog-te-gadget-simple", but as I suspected you will need to override additional classes / elements to get the content to fit in the smaller dropdown.
      One thing you could try is open the page with Chrome, open Developer Tools, inspect the dropdown and you will find all the elements / classes you can change. There you can quickly add / change width / height dynamically until you find all the changes you need to make it work properly.

      Delete