Web Internationalization: Practical i18n Solutions for Modern Frontends

Introduction

Webnovel’s overseas project began internationalization this year, adding Indonesian, Malay and Filipino language support. This article shares the challenges encountered and the solutions applied.

i18n vs l10n

Internationalization (i18n) prepares an application for multiple languages, while localization (l10n) translates the internationalized product for a specific region.

Key challenges

Beyond simple string mapping, Webnovel faced issues such as plural forms, rich‑text handling, date/number/currency formatting, and contextual meanings.

Plural rules

Unicode defines up to six plural categories: zero, one, two, few, many, other.

ICU MessageFormat can express these rules, e.g.:

You have {itemCount, plural,
    =0 {no items}
    one {1 item}
    other {{itemCount} items}
}.

Date, number and currency

ECMAScript Internationalization API provides four core constructors: Intl.Collator – language‑sensitive string comparison. Intl.DateTimeFormat – locale‑aware date and time formatting. Intl.NumberFormat – number and currency formatting. Intl.PluralRules – determines the plural category for a given count.

Chrome also supports Intl.RelativeTimeFormat and Intl.ListFormat for relative time and list formatting.

const rtf = new Intl.RelativeTimeFormat('en');
rtf.format(3.14, 'second'); // → 'in 3.14 seconds'
rtf.format(-15, 'minute'); // → '15 minutes ago'

const lf = new Intl.ListFormat('zh');
lf.format(['永锋', '新宇']); // → '永锋和新宇'

Translation workflow

Translations can be done by professional translators or community volunteers; each approach has trade‑offs in cost, speed and quality.

Framework solutions

React Intl follows BCP 47 and CLDR, supports ICU MessageFormat, and renders messages via <FormattedMessage> components.

<FormattedMessage
  id="welcome"
  defaultMessage={`Hello {name}, you have {unreadCount, number}
    {unreadCount, plural,
      one {message}
      other {messages}
    }`}
  values={{name: <b>{name}</b>, unreadCount}}
/>

Angular i18n uses the i18n attribute to mark translatable content and extracts it with ng xi18n into XLF files.

<h1 i18n>Hello, webnovel</h1>

Webnovel’s custom solution

Because existing libraries did not fully meet requirements, Webnovel built @react-i18n/core and @react-i18n/cli. The core library supplies a React Context, a withI18n HOC and a Message component. The CLI handles JSON generation from Excel, automatic ID creation, and machine‑translation integration.

Works in browsers, Node, and React Native.

Follows ICU MessageFormat and supports pre‑compilation and runtime compilation.

High performance with dynamic language loading and fallback.

Low integration cost and plugin‑friendly.

Other considerations

Follow existing standards (e.g., BCP 47) and stay updated with changes; research mature solutions early to avoid reinventing the wheel.

Conclusion

The article outlines practical i18n techniques for web applications, emphasizing that internationalization involves more than translation—layout, cultural nuances, and standards all play a role.

Related links

BCP 47 – https://tools.ietf.org/html/bcp47

ICU MessageFormat – http://userguide.icu-project.org/formatparse/messages

Unicode plural rules – http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html

Intl API – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

Intl.RelativeTimeFormat – https://developers.google.com/web/updates/2018/10/intl-relativetimeformat

Intl.ListFormat – https://developers.google.com/web/updates/2018/12/intl-listformat

Intl polyfill – https://github.com/andyearnshaw/Intl.js/

Angular i18n – https://angular.io/guide/i18n