Instant Web Page Translation with a Google Translate Widget

Google's work in the field of machine translation is certainly admirable. Whatever commercial motives it may have, the web search mogul invests huge resources into advancement of this very complex field. Admittedly, automatically translated phrases are still more of a source of fun than of improved understanding, but on the other hand, hardly anybody now needs dictionaries or human translators just to get a sense of an article, paragraph, or a word.

Google can help translating virtually any electronic texts - web pages, documents, e-mail messages, etc. One of the most fantastic tools so far certainly is the interface at https://translate.google.com/ that not only translates as you type, but it also recognizes the language which you are using.

Since several months, Google offers also translator widget that you can include in your website and then instantly translate any page to another language. You can find it here: https://translate.google.com/translate_tools

If you have a website in one language, things are indeed simple. You specify what is your source language, get the code and embed it in a constant part of your site (e.g. in a header, or in a side bar).

Troubles begin when your site or blog contains texts in more than one language. Say your browser's default language is English. As long as you stay on English pages of the website, things are OK. But if you, or your visitors, go to a page written in a language not matching the browser's language, at the top of your page will appear a large blue GoogleTranslate bar, nastily pushing down all the content on your page, trying to offer you a translation of that page to English. The bar is

1. intrusive (it pushes the whole content of your web page down)
2. uninvited (just like those pop-up windows before browsers started blocking them)
3. not needed (if someone wants a translation, they can choose it from the widget, from the Google Toolbar, or via another Google or other interface)

At first I thought this was a by-product of Google Toolbar, so I switched off all translation settings there. It did not help. Eventually I learned that this is caused by the code included in the Google Translate widget.

It is ironic -- why offer a widget providing a pull down menu of possible translations and at the same time aggressively distort the host web page to offer translation if another than default language is detected?

Many people have complained, but so far Google did not adapt their widget to correct this behaviour.

Failing to find a satisfactory solution for Drupal, or a generic solution, eventually I developed the following simple fix.

See the source code below.

First, you may want to detect the language of the page you are on. If the node has no language code, we will leave $langcode set to 'auto'. In that case Google _tries to detect the language and then proceed accordingly.

Next, let's take the widget JavaScript code from Google's translation tools page above and stick the language code where it belongs.

We can thus find and set the language, or have Google detect it automatically. But we still need to prevent the aggressive Google Translate bar from distoring our web pages. For a long time I could not figure out how the bar is generated, but ultimately I discovered it is the work of a JavaScript program that runs after the page is rendered. The solution lies in two stylesheet overrides -- one to suppress the generated iframe, and the other to close the vertical gap.

Enjoy ☺

<?php
// Detect language of the current node.
$nid = arg(1);
$lang_code = 'auto';
if (is_numeric($nid)){
  $node = node_load($nid);
  if ($node->language <> ''){
    $lang_code = $node->language;
  }
}

$result .= '<div id="google_translate_element">';
$result .= "</div>";
$result .= "<script>"."\n";
$result .= "function googleTranslateElementInit() {"."\n";
$result .= "  new google.translate.TranslateElement({"."\n";
// Suggest the current language, or set to have it auto-detected.
$result .= "    pageLanguage: '".$lang_code."'"."\n";
$result .= "  }, 'google_translate_element');"."\n";
$result .= "}"."\n";
$result .= "</script>";
$result .= '<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>';

// Some stylesheet overrides
$result .= '<style type="text/css">iframe.goog-te-banner-frame { display:none !important; }</style>';
$result .= '<style type="text/css">body {position: static !important; top: 0 !important;}</style>';

echo $result;
?>

Tomáš Fülöpp

Sint-Agatha-Berchem, Belgium

February 9, 2010

• https://translate.google.com/