What Every Developer Ought To Know About JQuery I18n

What Every Developer
Ought to Know about JQuery I18n
phraseapp.com | sales@phraseapp.com | +49-40-357-187-76 | twitter.com/phraseapp | facebook.com/phraseapp | linkedin.com/company/phraseapp
What Every Developer Ought To Know About JQuery I18n
Table of Content
Features Of JQuery I18n
JQuery I18n Directory
JQuery I18n Message File Format
Usage
Translation
JQuery.I18n.Properties
Using Jquery.I18n.Properties
Features Of JQuery.I18n.Properties
Language Control
Example Using JQuery.I18n.Properties
Define .Properties Files
Loading Localized Strings From .Properties
Options
8
8
8
9
10
11
12
An important consideration when designing a website is internationalization. Each region and

country around the world have different expectations when it comes to how text, messages,
numbers, and dates should appear. Each user of a particular application expects that all text
and messages are displayed in a familiar format. JavaScript has an excellent
internationalization solution called jQuery.i18n. jQuery i18n is used for localization of
MediaWiki and many other international websites.
Features Of JQuery I18n

Keeps code separate from i18n content. This feature keeps the code modular and allows
developers to load the i18n functionalities they need.
Uses the JSON format.
It allows a change in a language without refreshing the web page.
Handles the plural form without using additional messages. Rule handling is done using
the Unicode Consortiums Common Locale Data Repository (CLDR).
Corrects sentences according to gender by passing the gender value.
Supports grammar forms.
JQuery I18n Directory

The conventional way of formatting your directory with jQuery i18n is to have an i18n folder
with the JSON file for each language code stored in this directory. An example directory is
displayed in Figure 1.
Figure 1. Directory with JSON files for each language code.
JQuery I18n Message File Format

jQuery i18n uses JSON files, which allow the user to store information in a lightweight format
for data exchange. JSON files are advantageous because:
1. They allow an easy way for translators to access text to be translated. This is very useful if
the JSON files need to be sent out for translation services.
2. They prevent direct access into the database.
The JSON file is comprised of a series of name-value pairs or an ordered list of values. In a JSON
file for internationalization, the messagekey-message pairs contain the names and values for
all language pairs. Every key is in lowercase letters with - separating the words, and is
associated with a value in the chosen language. The JSON file can include @metadata, which
stores non-message information about the file, such as copyright and author information. A
separate JSON file is often created for each language type; however, all of the translations can
also be put into a single file. The advantage of separate JSON files is that the files are less
complex. However, a single JSON file helps to insure that the fields are not duplicated while
embedding multilingual data. An example JSON file with a single language and @metadata is
provided below:
1
"@metadata": {
"author": "Colleen",
"description": "An example JSON file",
"last-updated": "2016-09-21",
"message-documentation": "qqq"
},
"greeting": "Hello",
"bye": "Goodbye"
10
An example JSON file with multiple languages and @metadata is provided below:
1
"@metadata": {
"author": "Fred",
"description": "An example JSON file",
"last-updated": "2016-09-21",
"message-documentation": "qqq",
"arrayGroups": {
"label": {
"en": "label_en",
10
"fr": "label_fr"
11
12
13
},
14
"en": {
15
"greeting": Hello,
16
"bye": "Goodbye"
17
18
"fr": {
19
"greeting": Bonjour,
20
"bye": "Au revoir"
21
22
}
}
Usage
Some of the ways that jquery.i18n can be used are shown in the table below.
Usage Area
Description
Switching
locale
The locale for the web page can be obtained using the locale
option:
$.i18n( {
locale: fr // Locale is French
} );
To switch to another locale after plugin is initialized:
$.i18n ().locale = ml;
Message
Loading
Messages can be loaded for a specific locale or more than one

locale.
$.i18n().load( {
} );
Data API
Localized messages can be displayed without JavaScript.

<li data-i18n=message-key></li>.
Message
Format
Placeholders
These parameters are represented by the $1, $2, $3 in the

messages, syntax {{PLURAL:$1|pluralform1|pluralform2|}} and
are replaced by run-time.
Message
Format
Plurals
In English, there are only two plural forms, but in many other
languages, there are more than two plural forms.
Message
Format
Gender
{{GENDER}} syntax
With the gender of placeholders, the syntax changes
dynamically.
Translation
There are several ways to translate a jquery.i18n application:
1. Editing the json files. This is suitable for small applications with a limited number of
languages.
2. Have a translation interface with the application. This option works for proprietary or
private applications with many translators.
JQuery.I18n.Properties
jQuery.i18n.properties is a jQuery plugin for internationalization. Similar to Java, jquery i18n
uses resource bundles (.properties files). Resource bundles are used to store locale-specific
information such as text messages. They allow an easy way of accessing locale-specific
information and adding locales easily by adding additional resource bundles. The .properties
files contain locale-specific key-value pairs and interprets these files based upon language and
country codes.
Using Jquery.I18n.Properties
The jquery.i18n.properties.js plugin can be downloaded from
https://github.com/jquery-i18n-properties/jquery-i18n-properties. The plug-in should be
included in the <head> section of your HTML page. The version of jquery that you use should be
specified in the source file as follows:
1
<HEAD>
<script type="text/JavaScript" src="js/jquery-1.10.2.js"></script>
<script type="text/JavaScript" src="js/jquery.i18n.properties.js"></script>
</HEAD>
Features Of JQuery.I18n.Properties
Works like Java i18n. Uses resource bundles (.properties files) for translations. Uses
ISO-639 for language codes and ISO-3166 for country codes.
If no language is specified, uses the default browser language. The default language in
the resource bundles is always used first. The user-specified language will be loaded next.
The resource bundle strings allow placeholder substitution, and there is support for
namespaces in the keys.
Language Control
To make your code more efficient with less 404 errors, a languages.json file should be used. A
languages.json file defines the languages and the properties files that can be used. The
languages.json should be placed into the same directory as the language properties files. An
example of a languages.json file is as follows:
1
2
{
"languages": [
"en_GB",
"es_ES",
"pt_BR",
"sv_SE"
7
8
]
}
Example Using JQuery.I18n.Properties

To create an HTML page using jquery.i18n.properties.js, the first step is to create a directory
with the desired folders for the JavaScript files and the properties files. For this example, we
will use the directory in Figure 2.
Figure 2. Directory using properties files.
Next, the HTML code will be created. The HTML contains a dropdown that allows the user to
select a language. The messages below the dropdown are localized based upon the language
chosen.
1
<HTML>
2
3
<HEAD>
<script src="js/jquery-3.1.0.js" ></script>
<script type="text/JavaScript" src="js/jquery.i18n.properties.js"></script>
</HEAD>
7
8
<BODY>
<h2>Internationalization Example Using jQuery.i18n.properties</h2>
10
<div id="langBox">
11
Language:
12
<select id="lang">
13
<option value="en" selected>English</option>
14
<option value="tr">Turkish</option>
15
<option value="fr">French</option>
16
</select>
17
</div><br>
18
<div id="lWelcome">Thank you for reading this example</div><br>
19
<div id="lSelLang">Your Selected Language is: en </div>
20
21
</BODY>
22
23
</HTML>
Define .Properties Files

The jquery.i18n.properties.js plugin uses .properties files for the translate text. There are three
properties files used in this example: (1) Messages.properties, (2) Messages_fr.properties, and
(3) Messages_tr.properties. The text in each properties files is shown below:
1
Messages.properties
lWelcome = Thank you for reading this example
lSelLang = Your Selected Language is: {0}
5
6
Messages_fr.properties
lWelcome = Merci d'avoir lu cet exemple
lSelLang = Votre langue slectionne est : {0}
9
10
11
Messages_tr.properties
12
lWelcome = Bu rnek okumak iin teekkr ederiz
13
lSelLang = Sizin Seili Dil geerli: {0}
Loading Localized Strings From .Properties

To load the messages from the properties files, save the jquery.i18n.properties.js file in the js
folder. The jquery.i18n.properties.js code below is a simple example of how the properties files
are loaded.
1
$(function() {
$.i18n.properties({
name: 'Messages',
path: 'bundle/',
mode: 'both',
language: lang,
callback: function() {
$("#lWelcome").text($.i18n.prop('lWelcome'));
$("#lSelLang").text($.i18n.prop('lSelLang', lang));
10
11
});
12
});
Options
Option
Description
Notes
name
File name or portion of the file name that represent a

resource bundle.
Optional
String or
String[]
language
The ISO-639 Language code (en, fr) and, optionally,

ISO-3166 country code (en_US, pt_BR). If not
specified, the default language reported by the browser
will be used.
Optional
String
path
Path to directory that contains .properties files to load.
Optional
String
mode
Option to have resource bundle keys available as

JavaScript vars/functions OR as a map.
Optional
String
cache
Bundles are cached by the browser or forcibly reloaded.

The default is to forcibly re-load.
Optional
boolean
encoding
Type of encoding for bundles. Property file resource

bundles are specified in ISO-8859-1 format. Defaults to
UTF-8 format.
Optional
String
callback
Callback function is called when script execution is

completed.
Optional
function()
phraseapp.com
sales@phraseapp.com
+49-40-357-187-76
Groe Theaterstrae 39
Hamburg, Germany

What Every Developer Ought To Know About JQuery I18n

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

What Every Developer Ought To Know About JQuery I18n

Încărcat de

Drepturi de autor:

Formate disponibile

What Every Developer

Ought to Know about JQuery I18n

phraseapp.com | sales@phraseapp.com | +49-40-357-187-76 | twitter.com/phraseapp | facebook.com/phraseapp | linkedin.com/company/phraseapp