TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.

Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.

Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.

What can you customize in TranslateThis?

TranslateThis allows you to customize a variety of options including tracking with Google Analytics, styling options, callback functions, limiting supported languages, and the ability to confine the translation to a portion of the page.

To customize these settings, pass an array of options to the TranslateThis() function:

<script type="text/javascript">
TranslateThis({
    GA : true,
    scope : 'main'
});
</script>

In this example we are setting GA to true to enable Google Analytics tracking, as well as flagging the scope of the translation to cause TranslateThis to only translate content within the element with id main.

Be careful when defining this option array—one common mistake is to leave a trailing comma after the last element in the array (notice in my example how scope : 'main' doesn’t have a comma after it).

Callback functions

There are three callback functions in TranslateIt, which are called onLoad, onClick and onComplete. You can pass in either the function reference (the function without the parentheses) or define a function on the fly:

<script type="text/javascript">
function translateLoad() {
    alert('TranslateThis loaded');
}
function translateClick(lang) {
    alert('Translating into ' + lang);
}
TranslateThis({
    onLoad : translateLoad,
    onClick : translateClick,
    onComplete : function() {
        alert('Translation complete!');
    });
});
</script>

In this example, we defined the function translateLoad() to called when TranslateThis loads and another translateClick() for when the translation begins. Finally, we defined a function on the fly to be executed once the translation completes.

Changing dropdown languages

To change dropdown languages, simply pass an array of the Google Language codes in the option ddLangs:

<script type="text/javascript">
    TranslateThis({
        ddLangs : [
            'ar', // Arabic
            'fr', // French
            'de', // German
            'es', // Spanish
            'el', // Greek
            'zh-CN', // Chinese (simplified)
            'en', // English
            'is', // Icelandic
            'it', // Italian
            'ko', // Korean
            'ja', // Japanese
            'ru', // Russian
            'da', // Danish
            'nl', // Dutch
            'sv', // Swedish
            'th' // Thai
        ]
    });
</script>

These will fall in order down each column from left to right. For a complete list of the 52 language codes supported by TranslateThis see the allLangs array in the default options for TranslateThis.

Why does TranslateThis run on the front end?

Besides the ability to copy and paste the script, running on the front-end provides a couple advantages for TranslateThis. Mainly, the translation runs very quickly since it’s processed with a number of parallel Javascript calls to the Language API—the page not only doesn’t have to reload for the initial translation but the translation itself also comes in quickly. Finally as the translation calls are returned, TranslateThis switches out each bit as it is available making for a nice transition effect.

The disadvantages to running on the front-end is that TranslateThis doesn’t cache complete translated pages (although Google caches the translated chunks) and that it doesn’t translate subsequent pages on a site….yet (see below).

But TranslateThis can provide the perfect entryway to a backend system that also leverages the Google Language API, just use the onClick callback which returns the language slug.

Are there any planned enhancements for TranslateThis?

For this release I focused on improving performance of the core translation functions as well as providing a nice user interface. So there are certain enhancements I have planned to build and release in the near future.

First, I want to build in cookie functionality so that the script translates pages that are visited subsequent to the initial translation. My only concern is that it would be very invasive on shared computers—think of a college campus with users of various languages. So I need to build a “cancel translating” button as well as an “undo translation” button before I can do this. And of course I’ll build a switch to turn it on or off.

Initially this cookie functionality will be confined to any individual (sub)domain but I’m toying with different ways of making it internet wide. This seems like it could be pretty cool, but again I’m not sure if it’s too invasive (any thoughts would be appreciated in the comments).

Update – Cookie functionality with the cancel and undo buttons has been implemented

Next there are a couple different button styling options I will be rolling out soon, including a list of flag icons next to the button.

And in the long term there may be ‘bit.ly’-style tracking or a caching method for complete pages.

• Retweet
• Share

---

---

Tags: AJAX, analytics, cross-browser, customization, downloads, front-end, javascript, performance, plugins, translation, web design, webdev, widgets

This entry was posted on Tuesday, December 8th, 2009 at 4:16 pm in the category front-end, webdev.

---

You Might Also Like:

• Scrolling Parallax: A jQuery Plugin
• Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin
• Translate-It: Easy Translation for Multiple Languages
• QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler
• QuickFlip jQuery Plugin
• Huge Performance Improvements In Latest Translate This Button
• A million ways to embed custom fonts (and keep typography nerds off your back)

---