til/using intl with hindi and arabic numbers
This week, I've been investigating and experimenting with adding support for multiple languages to an app I'm working on.
I tested various character sets, as well as right-to-left (RTL) languages, using four languages: Arabic, English, Hindi, and Swedish. For these, I used the locales
I expected Arabic to use Eastern Arabic numerals and Hindi to use Devanagari numerals, but they were both using Arabic numerals.
new Intl.NumberFormat('hi-IN').format(1234) new Intl.NumberFormat('ar').format(1234) // Both display 1,234
The use of Western or Eastern-style Arabic numerals varies by region. To display Eastern Arabic numerals, the solution is simple: add a country identifier to the locale, e.g.,
ar-SA (Arabic as spoken in Saudi Arabia).
This would display the number as:
For Hindi, the solution was a bit more complicated and requires some more knowledge of how IETF language tags work.
Using a language tag, like
hi-IN, we can also include extensions to it using
u is the extension identifier. To find the extension key we need, we can look at the list of key/type definitions. The key we want is
nu for the numbering system.
On the title line for numbering systems, we can find a link to all valid number types, including Devanagari, denoted as
We assemble all the pieces to
hi-IN-u-nu-deva and use it with
Intl to format numbers in Devanagari.
new Intl.NumberFormat('hi-In-u-nu-deva').format(1234) // १,२३४
We can use this method to change the numbering system, or some other extension key, for any locale. This means we can use the same method with our initial locale for Arabic,
ar, and expect the same formatting.
- IETF. (2023-03-17). BCP 47 Unicode Locale Extension (RFC 6067). Link
- using intl for lists
- solving my hydration issues in React 18
- using intl with hindi and arabic numbers