Here’s an easy way to translate your web site using PHP. The idea is to have several files for each language you want to provide. Each one of these files have the name of the ISO code and the txt extension. For this demo I only use the german language as an alternative to the default language of the site – english. The content of these files are the words / sentences with their translation in the form:

word=translation

The PHP class provided will parse this file, create an array which maps both word and it’s translation pair. You just need to insert the following in your php code :

$translate = new Translator($outputlanguage);//$outputlanguage: ISO code (example: de,en,...) --> these are the names of each file

$translate->__('word to translate');

An example:

<h2><?php $translate->__('Registration'); ?></h2>

and in your de.txt file we would have:

Registration=Registrierung

View demoDownload source

The double-click functionality in the New York Times was somehow fascinating but also highly discussed because it boldly used the browser functionality to get the definitions of words. Fortunately, the double click now causes not an immediate popout to appear but lets the user confirm by showing an interrogation mark.

This inspired me to create a new jQuery plugin for translating text. Imagine, how users that don’t have English as their first language could profit from an integrated functionality to translate e.g. an article.

The plugin works with the Google Language API and can be used to translate a text in all the languages provided by the API.

You can call the plugin like this:

$(element).translate()

And you can configure the plugin in the following way:

1. original: the language shortage of the initial language (default is “en”)
2. notfound: the message shown when no translation was found
3. title: The title of the translation overlay
4. firstOptionText: the text shown as first option in the languages drop down

Try the demoDownload jTextTranslate

The API of Google has a lot of useful usage examples. This showcase demonstrates how we can use the Google AJAX Language API to build a live translator that allows us to translate text from one language into the other – and that almost on the fly.

Check out the demo here: DEMO

Here is the jQuery part:

(function($) {
  $.fn.translate = function(options) {
		 var opts = $.extend({}, $.fn.translate.defaults, options);
		 return this.each(function() {
			$this = $(this);
			$("select#_from option[selected]").removeAttr("selected");
			$("select#_from option[value='en']").attr("selected", "selected");
			$("select#_to option[selected]").removeAttr("selected");
			$("select#_to option[value='es']").attr("selected", "selected");
			$('#content',$this).val("");

			$(document).keypress(function(e){
				if(e.which == 13){
					$.fn.translate.initialize();
					$("#content").val("");
				}
			});
			$('#_from',$this).change(function(e){
				$.fn.translate.defaults._from_lang = $(this).val();
			});
			$('#_to',$this).change(function(e){
				$.fn.translate.defaults._to_lang = $(this).val();
			});
		 });
  };
  $.fn.translate.initialize = function() {
	  var content = $('#content');
	  var text = $("#content").val();
	  google.language.translate(text, $.fn.translate.defaults._from_lang, $.fn.translate.defaults._to_lang, function(result) {
	    var translated = $("#translation");
		var translated_original = $("#translation_original");
	    if (result.translation) {
	      (translated.html() != "")?translated.append("
"+result.translation):translated.append(result.translation);
		  (translated_original.html() != "")?translated_original.append("
"+text):translated_original.append(text);
	    }
		else{
		  (translated.html() != "")?translated.append("
"+text):translated.append(text);
		  (translated_original.html() != "")?translated_original.append("
"+text):translated_original.append(text);
		}
	  });
  }
  $.fn.translate.defaults = {
    _from_lang	: 'en',
    _to_lang	: 'es'
  };
})(jQuery);

Note that this is just a demo. Not all the languages that are supported by the Google AJAX Language API are included here.

Enjoy!