Categories
Blog

jQuery I18N JavaScript Library in A Glimpse

This article is a portfolio of our project showcase on a JavaScript Library named jQuery I18n.

In the course Website Localization in Middlebury Institute of International Studies, students are required to carry out a group project to introduce a technology relative to website localization. This article is a portfolio of our project showcase on a JavaScript Library named jQuery I18n. Please feel free to see our project assets here.


 

JavaScript libraries

Libraries, in the field of programming, are useful tools. They contain precompiled routines that can be reused, so instead of directly typing the code every time we need it,  we can realize certain functions by referencing the libraries.

For example, a JavaScript library can:

  • Allow us to distribute one code for use on many pages.
  • Accelerate the loading of requests compared with repeating the code in every page
  • Be referenced even if it is on a distant domain

Referencing a JavaScript library that is on a distant domain

Referencing a JavaScript library that is on a distant domain

See some comments about JavaScript libraries.

jQuery is a special type of JavaScript library. A jQuery library makes lengthy code concise, because it can wrap several lines of code into one single line to accomplish a function. It is an extendable library that can work in all browsers, and many larger companies such as Google and Microsoft also use jQuery library. If you want to know more about the syntax and the functions of jQuery, you can browse the w3c tutorial and jQuery user interface for more information.

 

jQuery I18n

A library can be a grand and complicated one or it can just cover several lines of code. No matter how, using appropriate libraries can greatly improve efficiency. Therefore, our team would like to introduce a powerful library that is conducive to localization projects.

The library we introduce is a jQuery JavaScript library named jQuery I18n.  It a powerful jQuery-based library created by Wikimedia Foundation, the organization that manages the world-famous website Wikipedia. 

jQuery I18n itself deals with gender and pluralization issues in localization magically. Our group gain a lot of inspiration from Ilya Bodrov’s blog post The Advanced Guide To JQuery I18n, and our showcase is based on the source code provided in his post.

Ilya’s demo demonstrates 2 features of jQuery.I18n.

  • Translation is stored in JSON Files
  • Gender and pluralization information is employed in translation

From his post, I first learn about JSON (JavaScript Object Notation) file. It is a special type of file that can store information in an organized, easy-to-access manner. In the demo project, all the translation is stored in the JSON files.

Each language has an individual JSON file

    Strings inside a JSON file

JSON files can be identified by many CAT tools like SDL Trados. For example, we import a JSON file with content showed below to SDL Trados and plan to translate it into Spanish.

A JSON file is inputted into Trados

With the default filter being used, it turns out that the meta information and values are all extracted for translation. Indeed, it is a pity that the meta information, which shouldn’t be translated in most cases, is not filtered by mistake. However, since usually there isn’t a lot of meta information in a file, such segments can be blocked so that they wouldn’t be translated. We think that JSON file is a very file type that suits for localization.

Demo Project

The demo project functions like this: If we change the number of letters and gender of the people in the html file, when we open the html file in the browser, the single/plural form and the subject will change according to the actual situation.

This automatic switch happens because we reference the jQuery library in the html file and a customizable js file that calls the functions from the library in our project folder. The code written in the library is complex and advanced, but we can realize its functions by directly referencing the library and typing several lines of concise code, as what is shown below. That is the magic of libraries!