Microsoft jQuery Globalization Plugin
with examples and interesting information about globalization
Last month, I talked in a blog about how Microsoft started delivering code in jQuery and about our first project we were working on - templates and data binding in jQuery (about binding on Habré ).
Today, we have released a prototype of a new plugin called jQuery Globalization, which allows you to add globalization support to your JavaScript applications. This plugin includes globalization information for over 350 cultures from Scottish Celtic, Friesian, Hungarian, Japanese to Canadian English. We will release this plugin for the open source community.
')
You can download our prototype jQuery Globalization plugin from the repository on Github: http://github.com/nje/jquery-glob
In addition, from here you can download a set of examples that demonstrate some simple user cases.
The jQuery Globalization plugin makes it easy for you to parse and format numbers, currencies and dates for diverse cultures in JavaScript. For example, you can use a plugin to display the correct currency symbol for different cultures:
We can also use the plugin to format dates, so that the day and month are displayed in the correct order and correctly translated:
Notice how the year is displayed in Arabic - 1431. This is because the year value is converted according to the Arabic calendar.
We are accustomed to some cultural differences, such as different currencies or different names of the months. Others may come as a surprise and surprise. For example, in some cultures, the grouping of numbers is represented unusually. In the te-IN culture (Telugu, India), the groups contain three numbers first, then two each. The value 1,000,000 (one million) should be written as "10,00,000." Some cultures do not group numbers at all. All of these inherent culture differences are supported by the jQuery Globalization plugin automatically.
Getting the right presentation of dates can be especially sophisticated. Different cultures have different calendars, such as the Gregorian calendar or the UmAlQura calendar. Some cultures may even have multiple calendars. For example, Japanese culture uses the Gregorian and Japanese calendars, which contain epochs named after Japanese emperors. The jQuery Globalization plugin includes methods for converting dates between a variety of calendars.
The jQuery Globalization plugin uses language tags defined in RFC 4646 and RFC 5646 to identify crops ( http://tools.ietf.org/html/rfc5646 ). A language tag consists of one or more subtags separated by a hyphen. For example:
Please note that one language, such as English, may have multiple language tags. English speakers in Canada use different conventions for writing numbers, currencies, and date formats from English speakers in Australia or in the United States. You can find a language tag for a specific culture using the Language Subtag Lookup utility , which is located here: http://rishida.net/utils/subtags/ .
The jQuery Globalization plug-in download package contains the globinfo folder, which contains information on each of the 350 crops. In fact, there are more than 700 files in the folder, since it contains minimized versions.
For example, the globinfo folder has files named jQuery.glob.en-AU.js (Australian English), jQuery.glob.id.js (Indonesia), and jQuery.glob.zh-CHS (Simplified Chinese).
Imagine a situation where you need to create a German website and you want to format all dates, currency and numbers using German format agreements directly in JavaScript on the client. The HTML markup for this page might look like this:
Notice the span tags. They define the areas on the page that we need to format using the jQuery Globalization plugin. We want to format the price of the product, the date of manufacture of the product and the number of units in stock.
To use the jQuery Globalization plugin, we need to add three JavaScript files to the page: the jQuery library, the jQuery Globalization plugin itself, and a file with information about a specific culture:
Here I statically added a jQuery.glob.de-DE.js javascript file that contains culture information for Germany. The language tag “de-DE” is used for German in Germany.
Now that I have all the necessary scripts, I can use the jQuery Globalization plugin to format product price values, production dates, and number of items in stock using the following client side JavaScript code:
The jQuery Globalization plugin extends the jQuery library by adding new methods called preferCulture () and format (). The preferCulture () method allows you to set the current culture to be used by other methods of the jQuery Globalization plugin by default. Notice that the preferCulture () method accepts a parameter with a language tag value. Method to determine the nearest suitable culture that corresponds to the language tag transmitted (the parameter may contain an enumeration of language tags - approx. Transl. ).
The $ .format () method is used to format currency values, dates, and numbers. The second parameter passed to $ .format () is a format pointer. For example, the transfer “c” means that the value should be formatted as monetary. In the ReadMe file on github, you can find a detailed description of the possible values of this parameter: http://github.com/nje/jquery-glob .
When we open the page in the browser, everything will be formatted as it should be according to the German language conventions. Euro symbol used as currency symbol. The date is formatted using German names for the day of the week and the month. Finally, a period instead of a comma is used as a separator:
You can look at this result using the 3_GermanSite.htm file in the examples .
In the previous example, we explicitly indicated that we wanted to globalize data for the German language (referring to the jQuery.glob.de-DE.js file). Let's now look at the first of several examples that demonstrate the ability to dynamically set a culture for globalization.
Imagine that you want to display a drop-down list with all 350 cultures per page. You would like that when someone selects a culture from the list, all values on the page are formatted using the selected culture.
Below is the HTML code for this page:
Please note that all our dates are placed on the <span> tag with the data-date attribute (the data- * attributes are a new HTML5 feature that also applies to older browsers). We will format the dates contained in the data-date attribute after the user has selected a culture from the list.
In order to display dates for all possible cultures, we will include a link to the jQuery.glob.all.js file in the page:
The jQuery Globalization plugin comes with a jQuery.glob.all.js file. This file contains globalization information for all of the more than 350 cultures that the plugin supports. In a minimized form, the plugin is rather big - 367KB. Because of the file size, unless you really need to use absolutely all cultures, we recommend that you add separate JavaScript files for specific cultures that you really need, rather than including all the jQuery.glob.all.js code on the page . In the following example, I will demonstrate how you can load language files dynamically as needed.
Next, we implement a drop-down list that contains all available cultures. We can use the $ .cultures property to get a list of all loaded crops:
And finally, we will write jQuery code that will bypass all span elements with data-date attributes and format dates:
The parseDate () method of the jQuery Globalization plugin is used to convert a string representation of a date into a JavaScript date object. The format () method is used to format the date. The format specifier “D” indicates that the date should be formatted in a long representation (long date format).
And now our content will be correctly globalized for each of the 350 languages when the user makes a selection on the page. You can see this example in the file 4_SelectCulture.htm.
As I mentioned earlier in the previous section, you should avoid using the jQuery.glob.all.js file on pages wherever possible due to its large size. The best alternative is to dynamically load the information you need about globalization.
For example, imagine that you need to create a drop-down list that displays the following list of languages:
The following jQuery code is executed when the user selects a new language from the list. The code checks if the globalization file for the selected language is already loaded. If the globalization file has not yet been loaded, it is dynamically loaded using the jQuery library’s $ .getScript () method.
The globalizePage () method is called after the globalization file has been loaded and contains the code for globalization.
The advantage of this approach is that it allows you to avoid loading the jQuery.glob.all.js file. Instead, you need to download only those files that are required and this download will occur only once.
File 5_Dynamic.htm from the examples demonstrates how this approach is implemented.
Many sites determine the user's preferred language based on browser settings and use automatically globalized content. The user can set the preferred language in his browser. Then, when he requests a page, his language setting will be included in the request using the Accept-Language header.
Using Internet Explorer, you can set your preferred language using the following steps:
Note that you can list several languages in the Language Preference window. All of these languages, in the proper order, will be sent using the Accept-Language header along with the request to the page:
Accept-Language: fr-FR, id-ID; q = 0.7, en-US; q = 0.3
Surprisingly, there is no way to get the value of the Accept-Language header through JavaScript on the client. Microsoft Internet Explorer and Mozilla Firefox support a set of language properties through a window.navigator object, such as windows.navigator.browserLanguage or window.navigator.language, but these properties are the language installed in the operating system or the language version of the browser. Such properties will not help you to get the preferred languages set by the user.
The only correct way to get preferred user languages (the value of the Accept-Language header) is to write server code. For example, the following ASP.NET page uses the Request.UserLanguages server property feature to set preferred languages for the acceptLanguage JavaScript variable (which then allows you to access the value through client-side JavaScript):
In order for this code to earn information about the culture associated with the value of acceptLanguage must be enabled on the page. For example, if someone’s preferred culture is fr-FR (French, France), then you need to include the jQuery.glob.fr-FR.js or jQuery.glob.all.js file on the page, otherwise the culture information will not be available. Example 6_AcceptLanguages.aspx demonstrates how to implement this behavior.
If the culture information of the user's preferred language is not included on the page, then the $ .preferCulture () method will use the neutral language culture (for example, jQuery.glob.fr.js will be used instead of jQuery.glob.fr-FR.js). If there is no information about a neutral culture, then the $ .preferCulture () method will use the default culture (English).
One of the goals of creating a jQuery Globalization plugin is to make it easier to build widgets based on jQuery that are used with different cultures.
We wanted to make sure that the jQuery Globalization plugin can work with existing jQuery UI plugins, such as the DatePicker plugin. To do this, we created a modified version of the DatePicker that takes full advantage of the jQuery Globalization plugin during calendar display. The following picture illustrates what happens when you add the jQuery Globalization plugin and the corrected jQuery UI DatePicker to the page and select the Indonesian preferred culture:
Note that the title with the day of the week is displayed using abbreviations of the days of the week in Indonesian. Moreover, the months are also displayed in Indonesian.
You can download the modified jQuery UI DatePicker from our page on github. Or you can use the version included in the example 7_DatePicker.htm.
I am very pleased that we continue to participate in the jQuery community. The globalization plugin is the third plugin we released.
We are very grateful for the huge amount of feedback and suggestions for our prototypes of jQuery templating and data-linking plug-ins, which we released earlier this year. We also want to thank the jQuery and jQuery UI teams for working with us on these plugins.
Last month, I talked in a blog about how Microsoft started delivering code in jQuery and about our first project we were working on - templates and data binding in jQuery (about binding on Habré ).
Today, we have released a prototype of a new plugin called jQuery Globalization, which allows you to add globalization support to your JavaScript applications. This plugin includes globalization information for over 350 cultures from Scottish Celtic, Friesian, Hungarian, Japanese to Canadian English. We will release this plugin for the open source community.
')
You can download our prototype jQuery Globalization plugin from the repository on Github: http://github.com/nje/jquery-glob
In addition, from here you can download a set of examples that demonstrate some simple user cases.
Globalization concept
The jQuery Globalization plugin makes it easy for you to parse and format numbers, currencies and dates for diverse cultures in JavaScript. For example, you can use a plugin to display the correct currency symbol for different cultures:
We can also use the plugin to format dates, so that the day and month are displayed in the correct order and correctly translated:
Notice how the year is displayed in Arabic - 1431. This is because the year value is converted according to the Arabic calendar.
We are accustomed to some cultural differences, such as different currencies or different names of the months. Others may come as a surprise and surprise. For example, in some cultures, the grouping of numbers is represented unusually. In the te-IN culture (Telugu, India), the groups contain three numbers first, then two each. The value 1,000,000 (one million) should be written as "10,00,000." Some cultures do not group numbers at all. All of these inherent culture differences are supported by the jQuery Globalization plugin automatically.
Getting the right presentation of dates can be especially sophisticated. Different cultures have different calendars, such as the Gregorian calendar or the UmAlQura calendar. Some cultures may even have multiple calendars. For example, Japanese culture uses the Gregorian and Japanese calendars, which contain epochs named after Japanese emperors. The jQuery Globalization plugin includes methods for converting dates between a variety of calendars.
Using language tags
The jQuery Globalization plugin uses language tags defined in RFC 4646 and RFC 5646 to identify crops ( http://tools.ietf.org/html/rfc5646 ). A language tag consists of one or more subtags separated by a hyphen. For example:
| Language tag | Tongue |
| en-AU | English (Australia) |
| en-bz | English (Belize) |
| en-ca | English (Canada) |
| Id | Indonesian |
| zh-chs | Simplified Chinese |
| Zu | Zulu |
The jQuery Globalization plug-in download package contains the globinfo folder, which contains information on each of the 350 crops. In fact, there are more than 700 files in the folder, since it contains minimized versions.
For example, the globinfo folder has files named jQuery.glob.en-AU.js (Australian English), jQuery.glob.id.js (Indonesia), and jQuery.glob.zh-CHS (Simplified Chinese).
Example: setting the desired culture
Imagine a situation where you need to create a German website and you want to format all dates, currency and numbers using German format agreements directly in JavaScript on the client. The HTML markup for this page might look like this:
Notice the span tags. They define the areas on the page that we need to format using the jQuery Globalization plugin. We want to format the price of the product, the date of manufacture of the product and the number of units in stock.
To use the jQuery Globalization plugin, we need to add three JavaScript files to the page: the jQuery library, the jQuery Globalization plugin itself, and a file with information about a specific culture:
Here I statically added a jQuery.glob.de-DE.js javascript file that contains culture information for Germany. The language tag “de-DE” is used for German in Germany.
Now that I have all the necessary scripts, I can use the jQuery Globalization plugin to format product price values, production dates, and number of items in stock using the following client side JavaScript code:
The jQuery Globalization plugin extends the jQuery library by adding new methods called preferCulture () and format (). The preferCulture () method allows you to set the current culture to be used by other methods of the jQuery Globalization plugin by default. Notice that the preferCulture () method accepts a parameter with a language tag value. Method to determine the nearest suitable culture that corresponds to the language tag transmitted (the parameter may contain an enumeration of language tags - approx. Transl. ).
The $ .format () method is used to format currency values, dates, and numbers. The second parameter passed to $ .format () is a format pointer. For example, the transfer “c” means that the value should be formatted as monetary. In the ReadMe file on github, you can find a detailed description of the possible values of this parameter: http://github.com/nje/jquery-glob .
When we open the page in the browser, everything will be formatted as it should be according to the German language conventions. Euro symbol used as currency symbol. The date is formatted using German names for the day of the week and the month. Finally, a period instead of a comma is used as a separator:
You can look at this result using the 3_GermanSite.htm file in the examples .
Example: dynamic user selection
In the previous example, we explicitly indicated that we wanted to globalize data for the German language (referring to the jQuery.glob.de-DE.js file). Let's now look at the first of several examples that demonstrate the ability to dynamically set a culture for globalization.
Imagine that you want to display a drop-down list with all 350 cultures per page. You would like that when someone selects a culture from the list, all values on the page are formatted using the selected culture.
Below is the HTML code for this page:
Please note that all our dates are placed on the <span> tag with the data-date attribute (the data- * attributes are a new HTML5 feature that also applies to older browsers). We will format the dates contained in the data-date attribute after the user has selected a culture from the list.
In order to display dates for all possible cultures, we will include a link to the jQuery.glob.all.js file in the page:
The jQuery Globalization plugin comes with a jQuery.glob.all.js file. This file contains globalization information for all of the more than 350 cultures that the plugin supports. In a minimized form, the plugin is rather big - 367KB. Because of the file size, unless you really need to use absolutely all cultures, we recommend that you add separate JavaScript files for specific cultures that you really need, rather than including all the jQuery.glob.all.js code on the page . In the following example, I will demonstrate how you can load language files dynamically as needed.
Next, we implement a drop-down list that contains all available cultures. We can use the $ .cultures property to get a list of all loaded crops:
And finally, we will write jQuery code that will bypass all span elements with data-date attributes and format dates:
The parseDate () method of the jQuery Globalization plugin is used to convert a string representation of a date into a JavaScript date object. The format () method is used to format the date. The format specifier “D” indicates that the date should be formatted in a long representation (long date format).
And now our content will be correctly globalized for each of the 350 languages when the user makes a selection on the page. You can see this example in the file 4_SelectCulture.htm.
Example: dynamic loading of globalization files
As I mentioned earlier in the previous section, you should avoid using the jQuery.glob.all.js file on pages wherever possible due to its large size. The best alternative is to dynamically load the information you need about globalization.
For example, imagine that you need to create a drop-down list that displays the following list of languages:
The following jQuery code is executed when the user selects a new language from the list. The code checks if the globalization file for the selected language is already loaded. If the globalization file has not yet been loaded, it is dynamically loaded using the jQuery library’s $ .getScript () method.
The globalizePage () method is called after the globalization file has been loaded and contains the code for globalization.
The advantage of this approach is that it allows you to avoid loading the jQuery.glob.all.js file. Instead, you need to download only those files that are required and this download will occur only once.
File 5_Dynamic.htm from the examples demonstrates how this approach is implemented.
Example: automatic installation of the user's preferred language
Many sites determine the user's preferred language based on browser settings and use automatically globalized content. The user can set the preferred language in his browser. Then, when he requests a page, his language setting will be included in the request using the Accept-Language header.
Using Internet Explorer, you can set your preferred language using the following steps:
- Tools menu option , Internet Options;
- General tab;
- The Languages button in the Appearance section;
- Add button to add a new language to the list;
- Move your preferred language up the list.
Note that you can list several languages in the Language Preference window. All of these languages, in the proper order, will be sent using the Accept-Language header along with the request to the page:
Accept-Language: fr-FR, id-ID; q = 0.7, en-US; q = 0.3
Surprisingly, there is no way to get the value of the Accept-Language header through JavaScript on the client. Microsoft Internet Explorer and Mozilla Firefox support a set of language properties through a window.navigator object, such as windows.navigator.browserLanguage or window.navigator.language, but these properties are the language installed in the operating system or the language version of the browser. Such properties will not help you to get the preferred languages set by the user.
The only correct way to get preferred user languages (the value of the Accept-Language header) is to write server code. For example, the following ASP.NET page uses the Request.UserLanguages server property feature to set preferred languages for the acceptLanguage JavaScript variable (which then allows you to access the value through client-side JavaScript):
In order for this code to earn information about the culture associated with the value of acceptLanguage must be enabled on the page. For example, if someone’s preferred culture is fr-FR (French, France), then you need to include the jQuery.glob.fr-FR.js or jQuery.glob.all.js file on the page, otherwise the culture information will not be available. Example 6_AcceptLanguages.aspx demonstrates how to implement this behavior.
If the culture information of the user's preferred language is not included on the page, then the $ .preferCulture () method will use the neutral language culture (for example, jQuery.glob.fr.js will be used instead of jQuery.glob.fr-FR.js). If there is no information about a neutral culture, then the $ .preferCulture () method will use the default culture (English).
Example: Using the jQuery Globalization Plugin with jQuery UI DatePicker
One of the goals of creating a jQuery Globalization plugin is to make it easier to build widgets based on jQuery that are used with different cultures.
We wanted to make sure that the jQuery Globalization plugin can work with existing jQuery UI plugins, such as the DatePicker plugin. To do this, we created a modified version of the DatePicker that takes full advantage of the jQuery Globalization plugin during calendar display. The following picture illustrates what happens when you add the jQuery Globalization plugin and the corrected jQuery UI DatePicker to the page and select the Indonesian preferred culture:
Note that the title with the day of the week is displayed using abbreviations of the days of the week in Indonesian. Moreover, the months are also displayed in Indonesian.
You can download the modified jQuery UI DatePicker from our page on github. Or you can use the version included in the example 7_DatePicker.htm.
Conclusion
I am very pleased that we continue to participate in the jQuery community. The globalization plugin is the third plugin we released.
We are very grateful for the huge amount of feedback and suggestions for our prototypes of jQuery templating and data-linking plug-ins, which we released earlier this year. We also want to thank the jQuery and jQuery UI teams for working with us on these plugins.
Source: https://habr.com/ru/post/96214/
All Articles