Home

Awesome

JavaScript Globalization Overview

Overview page that shows what solutions exist for JavaScript globalization (internationalization and localization). What is missing. What overlaps. Why was each library created. What are their goals, strengths and weaknesses.

Summary

ECMA-402

The standard native implementation. It provides collation (string comparison), number formatting, and date and time formatting. The API was developed by a working group with members from Google, Microsoft, Mozilla (Norbert Lindenberg), Amazon, and IBM.

Strengths

Weaknesses

Links

Cldrpluralruleparser

Standalone library created by Santhosh Thottingal that provides CLDR plural rule parsing. Used by Wikimedia Foundation.

Strengths

Links:

FormatJS

FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people. It includes a set of core libraries that build on the JavaScript Intl built-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries.

Strengths:

Weaknesses:

Links:

Globalize

A jQuery project, initially created to fulfill jQuery UI (datepicker and spinner widgets). It provides number formatting and parsing, date and time formatting and parsing, message formatting, and plural support.

The design goals are (a) to leverage the official CLDR JSON data, (b) allow users to load as much or as little data as they need, (c) avoid duplicating data if using multiple i18n libraries that leverage CLDR, and (d) run in browsers or node.js.

Strengths

Links:

Google Closure i18n

Part of the larger Closure library, based on CLDR data. Provides number formatting and parsing, date and time formatting and parsing, message formatting (including plural and gender support), access to some of the CLDR data (like currency symbols).

Strengths

Weaknesses

Links

ibm-js/ecma402

JavaScript implementation of some of the ECMA-402 APIs as developed by IBM. It provides number formatting and date and time formatting, but not collation. The package was primarily developed by John Emmons (IBM), who is the chairman of the Unicode CLDR Technical Committee. Members of IBM's Dojo development team assisted with many of the resource loading issues.

Strengths

Weaknesses

Links

iLib

iLib is a library of JavaScript internationalization routines implemented in pure Javascript without many dependendencies on other libraries. It is the i18n library used in webOS, which is currently shipping on millions of LG SmartTVs.

Strengths:

Weaknesses:

Links:

jquery.i18n

jQuery based library port of MediaWiki's client side localization framework. Used by Wikimedia Foundation. Uses JSON based message file format (aka. "banana format"). Messages are in MediaWiki's own syntax. Supports Plural, Gender, Grammar, Number formatting. Also supports recursive nesting of plural, gender, grammar, etc.

Strenghts

Weaknesses

Links:

Messageformat.js

Standalone library created by Alex Sexton that provides ICU MessageFormat support, with built-in SelectFormat and pluggable PluralFormat.

Strengths

Links:

Grid

 ECMA-402<br><sub><sup>Native</sup></sub>Cldrpluralruleparser<br><sub><sup>santhoshtr/cldrpluralruleparser</sup></sub>Globalize<br><sub><sup>jquery/globalize</sup></sub>Messageformat.js<br><sub><sup>slexaxton/messageformat.js</sup></sub>FormatJS<br><sub><sup>formatjs.io</sup></sub>iLib<br><sub><sup>ilib</sup></sub>jquery.i18n<br><sub><sup>wikimedia/jquery.i18n</sup></sub>Closure<br><sub><sup>https://developers.google.com/closure/</sup></sub>
Functionality
 
Date Format<br><sub><sup>new Date() ⟹ Oct 23, 2014, 9:00:00 AM</sup></sub>:heavy_check_mark::heavy_check_mark::heavy_check_mark:<br><sub><sup>Via ECMA-402 or its polyfil</sup></sub>:heavy_check_mark::heavy_check_mark:
Date Parse<br><sub><sup>Oct 23, 2014, 9:00:00 AM ⟹ new Date()</sup></sub>:heavy_check_mark::heavy_check_mark:
Relative Time Format<br><sub><sup>new Date() ⟹ last month</sup></sub>:soon::heavy_check_mark:<br><sub><sup>Via intl-relativeformat</sup></sub>:heavy_check_mark::heavy_check_mark:<br><sub><sup>goog.date.relative.<br>No localized data, loading translation with goog.getMsg</sup></sub>
Date Range Format<br><sub><sup>Jan 11-13, 2015</sup></sub>:heavy_check_mark:
Calendar Manipulation<br><sub><sup>Aban 1, 1393 (Persian)</sup></sub>:heavy_check_mark:
Time Zone Manipulation<br><sub><sup>Jan 13, 1am New York time</sup></sub>:heavy_check_mark:
 
Number Format<br><sub><sup>12734.89 ⟹ 12,734.89</sup></sub>:heavy_check_mark::heavy_check_mark::heavy_check_mark:<br><sub><sup>Via ECMA-402 or its polyfil</sup></sub>:heavy_check_mark::heavy_check_mark:
Number Parse<br><sub><sup>12,734.89 ⟹ 12734.89</sup></sub>:heavy_check_mark::heavy_check_mark::heavy_check_mark:
 
Unit Format<br><sub><sup>1,234.56 feet, 98 minutes</sup></sub>:heavy_check_mark:
Unit Conversion<br><sub><sup>1 mile ⟹ 16.09 km</sup></sub>:heavy_check_mark:
 
Name Format<br><sub><sup>("John", "James", "Smith")<br> ⟹ "John James Smith"</sup></sub>:heavy_check_mark:
Name Parse<br><sub><sup>"John James Smith"<br> ⟹ ("John", "James", "Smith")</sup></sub>:heavy_check_mark:
 
Address Format<br><sub><sup>("Santa Clara", "CA", "USA", "94044")<br> ⟹ Santa Clara, CA 94044<br>USA</sup></sub>:heavy_check_mark:
Address Parse<br><sub><sup>Santa Clara, CA 94044<br>USA ⟹ ("Santa Clara", "CA", "USA", "94044")</sup></sub>:heavy_check_mark:
 
Phone Number Format<br><sub><sup>("1", "650", "5551212")<br> ⟹ 1 (650) 555-1212</sup></sub>:heavy_check_mark:<br><sub><sup>20 locales</sup></sub>
Phone Number Parse<br><sub><sup>1 (650) 555-1212<br> ⟹ ("1", "650", "5551212")</sup></sub>:heavy_check_mark:<br><sub><sup>20 locales</sup></sub>
Phone Number Normalization<br><sub><sup>"5551212" ⟹ ("+", "1","650", "5551212")</sup></sub>:heavy_check_mark:
Phone Number Geolocation<br><sub><sup>("0112345678", "France") ⟹ "Paris"</sup></sub>:heavy_check_mark:
 
Charset Mapping<br><sub><sup>Shift-JIS ⟹ Unicode</sup></sub>:soon:
 
Plural<br><sub><sup>3few</sup></sub>:heavy_check_mark::heavy_check_mark:<br><sub><sup>Powered by santhoshtr/cldrpluralruleparser</sup></sub>:heavy_check_mark::heavy_check_mark::heavy_check_mark:<br><sub><sup>Powered by santhoshtr/cldrpluralruleparser</sup></sub>:heavy_check_mark:
Resource Bundle<br><sub><sup>getString(id) ⟹ "resource string"</sup></sub>:heavy_check_mark:
Message Format<br><sub><sup>You have {count, plural,<br> one {1 item}<br> other {# items}} ⟹ You have 5 items</sup></sub>:heavy_check_mark:<br><sub><sup>Powered by slexaxton/messageformat.js</sup></sub>:heavy_check_mark::heavy_check_mark:<br><sub><sup>Via intl-messageformat</sup></sub>:heavy_check_mark::heavy_check_mark: <br><sub><sup>Extensible mediawiki message format</sup></sub>:heavy_check_mark:
Unicode Normalization Algorithm:heavy_check_mark:
Code Point Support:heavy_check_mark:
Glyph Support:heavy_check_mark:
Locale-sensitive Capitalization:heavy_check_mark:
Unicode Character Properties:heavy_check_mark:<br><sub><sup>(via the CType functions)</sup></sub>
 
Template integrationHandlebars<br>React<br>DustClosure Templates<br><sub><sup>https://developers.google.com/closure/templates/</sup></sub>
 
Collation:heavy_check_mark::heavy_check_mark:<br><sub><sup>limited locales so far</sup></sub><sub><sup>Wrapper, calls the native ECMA-402 implementation if available, the old localeCompare if not.</sup></sub>
 
I18n dataCompiledCLDR >= 25Compiled<br>Based on CLDRCompiled or Dynamic load<br>Based on CLDR 22.1CLDR >= 25Compiled<br>Based on CLDR
 
Support
 
EnvironmentsGlobalsAMD<br>CommonJS<br>GlobalsAMD<br>CommonJS<br>GlobalsAMD<br>CommonJS<br>GlobalsES6<br>CommonJS<br>GlobalsGlobals
Node.js>= 0.12<br><sub><sup>en only by default</sup></sub>:heavy_check_mark::heavy_check_mark::heavy_check_mark::heavy_check_mark::heavy_check_mark::heavy_check_mark::heavy_check_mark:
BrowserChrome: 24<br>Firefox: 29<br>Safari: N/A<br>Opera: 15<br>IE: 11<br><sub><sup>Reference MDN.</sup></sub>Chrome: <sub><sup>(Current - 1) or Current</sup></sub><br>Firefox: <sub><sup>(Current - 1) or Current</sup></sub><br>Safari: 5.1+<br>Opera: 12.1x, <sub><sup>(Current - 1) or Current</sup></sub><br>IE: 8 <sub><sup>(needs ES5 polyfill)</sup></sub>, IE9+All ES3+ including IE6Chrome: 20+<br>Firefox: 25<br>Safari: 5.1+<br>IE: 9+
MobileiOS: 6.1+<br>Android: 2.3, 4.0+:heavy_check_mark::heavy_check_mark:Android<br>iOS