jQuery for multilingual web development

I have (nearly) finished developing a mini-website in 6 languages (Arabic, Chinese, English, French, Russian, Spanish). The layout was the same, so ideally it would have been driven by a content management system. Not in this case unfortunately, as I was not given enough time to setup the infrastructure.

As I know nearly nothing of at least two of the languages above (Arabic and Chinese), I had to keep rechecking the content provided to ensure the right text ends up in the right place on a page. Google Translate helped with that by back-translating from another language back into English and making sure I got right sentence boundaries, etc.

However, even with content in the right place, I still needed to visually verify that things are correct. Also, some of the late arriving changes needed to be implemented for all 6 sets of files. For example, some of the URLs changed, some classes for javascript enhancements were added or removed, and so on.

Initially, I tried to check things in the editor by using regular expressions. This worked for basic things, but as the project progressed and markup (and javascript enhancements) became more complex, the regular expressions became not sufficient. I needed something that understood HTML structure and could easy to run interactively.

I already was using jQuery for progressive enhancement and my Firefox always has Firebug setup. And I have been poking at random web-pages with jQuerify bookmarklet for ages. But with this project, jQuery+Firebug combination of tools has now graduated to a 1st class development and troubleshooting toolkit specifically for multi-lingual content.

Here is a couple of basic queries I run in Firebug console window:

  • I had most of the links going to a new window and needed to check I did not miss a target attribute: _$(“a[target != ‘blank’]")
  • When comparing languages side-by-side, I needed to see whether URL links were the same. The easiest way to do that was by looking at where those links were actually pointing out. I could of course select an element with Firebug to see all of its content, but it was easier to print a particular attribute automatically, when I hovered over it with a mouse: $(“a”).mouseenter(function(){console.log( $(this).attr(‘href’));})
  • If I quickly needed to check which elements were affected by a particular class, I would just highlight them: $(".NYOnly”).css(“background-color”, “red”)

None of these are hidden secrets, however it may not always be obvious what can be done and how far a couple of lines of jQuery code can go. Here is an example that gets pasted right into Firebug window. It uses jQuery-translate extension to hook into Google Translate API and prints out translated content of a table cell that is clicked on:

$.getScript('http://jquery-translate.googlecode.com/files/jquery.translate-1.3.9.min.js');

$(“td”).click(function(){

$(this).translate(‘ar’, ‘en’, {

replace: false,

each: function(i){console.log( this.translation[i] ) }

})

});