{"id":6185,"date":"2013-06-24T00:00:00","date_gmt":"2013-06-24T00:00:00","guid":{"rendered":"https:\/\/www.globalizationpartners.com\/2013\/06\/24\/javascript-internationalization-and-localization\/"},"modified":"2021-01-05T12:38:17","modified_gmt":"2021-01-05T12:38:17","slug":"javascript-internationalization-and-localization","status":"publish","type":"post","link":"https:\/\/www.globalizationpartners.com\/2013\/06\/24\/javascript-internationalization-and-localization\/","title":{"rendered":"JavaScript Internationalization and Localization"},"content":{"rendered":"

Internationalization (I18n) and localization (L10n) are two of the most important phases in software’s engineering
\nlife cycle in order to create worldwide applications that function for different cultures, languages and locations.
\nI18n and L10n are usually controlled server side by managed programming languages such as Microsoft ASP.NET, where
\nresource files (*.resx) \u00a0provide the foundation of the process and by using the Microsoft .net
\nframework<\/a> the application can display the correct language and locale based on the user choice, IP
\naddresses, domains etc\u2026<\/p>\n

\"Javascript-localization\"<\/p>\n

JavaScript, JSON, JQuery<\/h5>\n

Due to the steady increase of services provided by the Internet worldwide and the new technology tools and concepts,
\nthe client side languages have become more complex. Software internationalization (I18n) and localization<\/a> (L10n) have become very important criteria to address with the
\noverall globalization of an application. JavaScript<\/a>, JSON, JQuery
\nare currently playing a major role in any website user interface (UI) layer. Let’s examine a very simple case that
\nshows the necessity of internationalization and localization of client-side routines:\u00a0 A multilingual application
\nready to display and to handle any number of languages developed using ASP.NET and .NET framework. This website
\nuses JavaScript to validate users input and display warning or error messages in some cases such as “Email format
\nnot valid”, “Only digits allowed”. Usually web applications use the client-side approach to validate user inputs
\ninstead of server-side validation for performance reasons and to avoid non-necessary rounds between client and
\nserver-sides.<\/p>\n

In the above case, if the website UI displays Arabic, normally all client-side alerts should be displayed using the
\nsame language. Based on this, the L18n\/l10n becomes a must in order to ensure the application overall integrity.
\nThe following approach describes one of the ways suggested to internationalize client-side languages:<\/p>\n

First step is to create a JavaScript file that will be used to store the strings values in source language (English
\nfor example). The internal key \/ value structure of the JavaScript file will be as following:<\/p>\n[code]var key=”value” ; \u00a0(i.e.\u00a0 var EmailError= “Invalid Email Format!”)[\/code]\n

Once all messages are added to the English JavaScript file, the file can be multiplied per language. For example if
\nthe English file name is Resources.js, we can have Resource.ar-EG.js for the Arabic language with Egyptian locale,
\nResources.fr-FR for French France, etc\u2026 And then we can change the values of the keys to the corresponding message
\nbut in the new target language. The above Email error message will be displayed in Arabic as following:<\/p>\n[code]var EmailError=”\u0628\u0631\u064a\u062f\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062e\u0637\u0623!”;[\/code]\n

By now we have JavaScript resource files for each target language ready to be used. How can we select the correct
\nresource file based on the currently displayed language for the application?<\/p>\n

For demo purpose, we can create a simple asp.net page with a language selector to switch between English and Arabic
\nto monitor the JavaScript language change based on the current language.<\/p>\n

Also we can add a simple input field and a submit button.<\/p>\n

\"software<\/p>\n

The expected behavior should be receiving client-side messages in same language as the webpage overall UI : For
\nEnglish UI Wrong email address will raise the error warning in English<\/p>\n

\"localization\"<\/p>\n

For Arabic<\/p>\n

\"JavaScript<\/p>\n

Behind the scene, there are a few easy and quick steps to enable the above localization approach:<\/p>\n

First, add a script manager control to the page and enable script localization attribute:<\/p>\n[code]<asp:ScriptManager
\nID=”spManager”
\nrunat=”server”
\nEnableScriptLocalization=”true”>[\/code]\n

Add a reference to each JavaScript resource file created per language along with each resource UI Culture:<\/p>\n[code]<asp:ScriptReference Path=”\/Scripts\/StringResources.js” ResourceUICultures=”ar-EG” \/>[\/code]\n

To retrieve the correct localized Message based on the user input a simple routine can be coded to validate the data
\nentered and raise the correct error or warning message accordingly<\/p>\n[code][JavaScript routine to validate Email Format]\nAlert([key]) ; Example: alert(“wrongFormat”);
\n[JavaScript routine to validate empty string for mandatory field]\nAlert([key]) ; Example: alert(“required”);[\/code]\n

The above method calls the appropriate JavaScript resource file (i.e. Resources.ar-EG.js),\u00a0 selects the key inserted
\nin the alert and displays the key value. As mentioned above the application was able to select the correct resource
\nfile by the help of Script Manager where we have a reference to all resources files registered by language \/
\nlocale. For demo purposes the list box used above is used to select between different languages just as en-US,
\nar-EG etc..<\/p>\n

The above simple demo shows one of the ways to internationalize and localize client-side programming languages and
\nhighlights the importance of this process for multilingual applications.<\/p>\n

SIDENOTE:<\/strong> GPI has developed a very strong Globalization Tool Suite – “G11Tool<\/a>” which is able to identify areas inside server or
\nclient-side programming languages that require localization and also externalizes the content from almost any file
\nformat or programming language and exports them in ready to translate format such as ttx, *.resx and others. This
\napplication saves our engineers and yours a lot of time, effort and money when globalizing your websites and
\nweb-applications.<\/p>\n","protected":false},"excerpt":{"rendered":"

Internationalization (I18n) and localization (L10n) are two of the most important phases in software’s engineering life cycle in order to create worldwide applications that function for different cultures, languages and locations. I18n and L10n are usually controlled server side by managed programming languages such as Microsoft ASP.NET, where resource files (*.resx) \u00a0provide the foundation of […]<\/p>\n","protected":false},"author":2,"featured_media":6186,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[1425,1444],"_links":{"self":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/6185"}],"collection":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/comments?post=6185"}],"version-history":[{"count":8,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/6185\/revisions"}],"predecessor-version":[{"id":29493,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/6185\/revisions\/29493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media\/6186"}],"wp:attachment":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media?parent=6185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/categories?post=6185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/tags?post=6185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}