Why you should start using the web Internationalization API

hazin — Mon, 16 Sep 2019 15:02:24 +0000

When you start building a web application, your main goal is to ensure that the end-user understands and assimilates the content you're delivering and uses it in the way it was designed for, which evolves building an accessible and located app.

Unfortunately, accessibility is still a rising topic on software development and it's our job as developers to increasingly deliver an inclusive and welcoming environment through our code.

And by accessibility I mean an application where all kinds of people(with disabilities or not) can access it and understand it's content.

Ensuring that your application can be read and interpreted in many different ways is extremely important to reach a wide audience.

Doing it on your own might be difficult and confusing but fortunately, in the web context there's a huge effort to help you reach that goal and I'm going talk about a simple but extremely powerful API with very decent support, the internationalization API.

In summary, it stands for an object with a series of properties which you can use to improve the user experience, you don't need to worry anymore about how to format your date, number, list, etc.. let the browser do it for you.

This API is in constant improvement and until this date, this are some properties that are already available

Intl.Collator

Intl.DateTimeFormat

Intl.ListFormat

Intl.NumberFormat

Intl.PluralRules

Intl.RelativeTimeFormat

Each property is a class in which you can pass through a constructor your default format configuration given a locale, let's take a look on each one:

Intl.Collator

The Collator constructor allows you to do sensitive string comparison on a specified language. This is extremely useful to create logic in multiple languages. Following the MDN example, we can sort a list of strings given an alphabet using the compare method

function letterSort(lang, letters) {
  letters.sort(new Intl.Collator(lang).compare);
  return letters;
}

console.log(letterSort('de', ['a','z','ä']));
// expected output: Array ["a", "ä", "z"]

console.log(letterSort('sv', ['a','z','ä']));
// expected output: Array ["a", "z", "ä"]

As you can see in the example below, we can expect different results on different locales

// in German, ä sorts with a
console.log(new Intl.Collator('de').compare('ä', 'z'));
// → a negative value

// in Swedish, ä sorts after z
console.log(new Intl.Collator('sv').compare('ä', 'z'));
// → a positive value

You can check how it works at the MDN page

Intl.DateTimeFormat

Dealing with date and time formatting can be daunting, but with DateTimeFormat constructor it becomes a simple task. It allows you to easily set the date format over a short configuration.

const dayMonth = {
  // You can build up your date item by item
  day: 'numeric',
  month: 'long'
};

const usDate = new Intl.DateTimeFormat('en-US', dayMonth);

usDate.format(new Date()); // -> "September 16"

const frDate = new Intl.DateTimeFormat('fr-EU', dayMonth);

frDate.format(new Date()); // -> "16 septembre"

Awesome right? you can check all the options to customize dates and times at the MDN page

Intl.ListFormat

The ListFormat constructor comes in handy when you need to display a list of items, you no longer need to worry about formatting and semantics on different languages, you just need to write it once.

const list = ['Motorcycle', 'Bus', 'Car'];

const option = { style: 'long', type: 'conjunction' };

new Intl.ListFormat('en-GB', option).format(list);
// -> "Motorcycle, Bus and Car"

new Intl.ListFormat('fr-EU', option).format(list);
// -> "Motorcycle, Bus et Car"

new Intl.ListFormat('pt-BR', option).format(list);
// -> "Motorcycle, Bus e Car"

you can check all the options of list formatting at the MDN page

Intl.NumberFormat

Formatting numbers it's the trickiest challenge when developing an application, this is because it has a ton of different ways to display a number like on currency style or when setting decimals digits, you need to be careful to avoid round up's and misplayed numbers.

With the NumberFormat constructor, you can reliably format the number in the way you need

Formatting currencies

const options = {
  style: 'currency',
  currency: 'EUR'
};

const money = new Intl.NumberFormat('en-US', options);

money.format(150); // -> "€150.00"

Formatting decimals

const options = {
  style: 'decimal',
  useGrouping: false,
  minimumFractionDigits: 3
};

const decimal = new Intl.NumberFormat('en-US', options);

decimal.format(150000); // -> "150000.000"

You can check all the options of number formatting at the MDN page

Intl.PluralRules

The PluralRules constructor it's very useful when dealing with plural rules in a locale, you can use it to distinguish between singular and plural forms

// Arabic has different plural rules

new Intl.PluralRules('ar-EG').select(0);
// → 'zero'
new Intl.PluralRules('ar-EG').select(1); 
// → 'one'
new Intl.PluralRules('ar-EG').select(2);
// → 'two'
new Intl.PluralRules('ar-EG').select(6);
// → 'few'
new Intl.PluralRules('ar-EG').select(18);
// → 'many'

You can check how to use plural rules at the MDN page

Intl.RelativeTimeFormat

The RelativeTimeFormat constructor allows you to create a relative time in your locale, very useful to display time's in a simplified way

const rtf1 = new Intl.RelativeTimeFormat('en', { style: 'narrow' });

console.log(rtf1.format(3, 'quarter'));
// -> "in 3 qtrs."

console.log(rtf1.format(-1, 'day'));
// -> "1 day ago"

const rtf2 = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });

console.log(rtf2.format(2, 'day'));
// -> "pasado mañana"

You can check all the options of time formatting at the MDN page

Conclusion

Just by applying these tools you can make a huge difference in user experience with reliable code and small effort. The internet is made for everyone, internationalizing it is one step toward a better web!

Hope I helped you in some way!

DEV Community: hazin