Internationalization in JavaScript and on the web platform is very complicated,
but also vastly important for us developers in order to build accessible and
intelligible interfaces. Thankfully, Unicode Consortium's MessageFormat working
group and TC39 have been hard at work standardizing the next generation of i18n
tooling that aims to unify analogous non-standard tools in use today while
approaching this problem from a fresh perspective.
Join me along this tour of i18n in JavaScript, discover some of the newest
additions to the toolkit and learn about the ongoing MessageFormat proposal and
how it aims to radically improve the developer experience.
(c) FOSDEM 2024
3 & 4 February 2024
https://fosdem.org/2024/schedule/event/fosdem-2024-2832-messageformat-the-future-of-i18n-on-the-web/
3. About Me
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Ujjwal Sharma (ryzokuken)
from New Delhi, India
based out of A Coruña, Galiza
OSS zealot, open web maximalist
love dogs, (masochistic) videogames
work at Igalia
4. About Igalia
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
An open-source consultancy
A worker-owned cooperative
Extensive work across major open source projects and ecosystems
Linux kernel, userspace and multimedia
Major contributor in the web platform and browser projects
Compilers (JS engines, LLVM) and PL design (WASM, JS)
5.
6.
7. A (now) general purpose
programming language
designed primarily for
scripting web interfaces.
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
10. Stage Two:
The sign masks a basic reality.
The image becomes a
distortion of reality.
11. Stage Three:
The sign marks the absence of
basic reality. The image calls
into question what the reality
is and if it even exists.
12. Stage Four:
The sign bears no relation to
any reality whatsoever; it is its
own pure simulacrum.
13. What is the “web” platform?
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
An interactive, decentralized communication platform at the scale of
the entire human civilization.
A standard platform for widely accessible and rich user interfaces.
The ambition of universality is inherently built into it and like all
platforms for UIs, it’s required to be accessible and localizable.
14. Quick note
Internationalization (aka i18n) is the practice of designing a system
in such a way that it can easily be adapted for different target
audiences, that may vary in region, language, or culture.
The complementary process of adapting a system for a specific
target audience is called Localization (aka l10n).
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
15. Early attempts at i18n
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
UIs are composed of string content, called “Messages”.
Manual localization was attempted but quickly proved
unmanageable.
The actual diversity of locales could never be catered to.
To promote a better and cleaner approach, C developers hacked
up gettext in 1988.
16. Let’s talk about gettext
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
gettext was one of the two i18n systems in glibc (the other being catgets).
Despite not being standardized, its adoption by Sun and GNU made gettext a hit.
Mainly dealt with static string replacement, but also provided basic plural selection.
Went on to inspire i18n tooling in all relevant areas:
● Python’s gettext
● Java’s MessageFormat (starting in 1996 at Sun)
● ICU MessageFormat (plurals, selection and nesting)
17. MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
"There {0,n,0#are no files|1#is one file|1<are {0,number,integer} files}."
There are no files.
There is one file.
There are 1337 files.
18. ICU MessageFormat
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Rethink the fundamentals, including
taking inspiration from catgets.
Designed with feedback from
implementers and translators at the
forefront.
Greatly expanded abilities, format
complexity, opening up an entirely new
space for innovation.
ICU MessageFormat
(plural and select)
Java MessageFormat
(pattern strings, format
basic types, choice
format)
19. MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
"{pronouns_of_host, select, "
"feminine {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to her party.}"
"=2 {{host} invites {guest} and one other person to her party.}"
"other {{host} invites {guest} and # other people to her party.}}}"
"masculine {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to his party.}"
"=2 {{host} invites {guest} and one other person to his party.}"
"other {{host} invites {guest} and # other people to his party.}}}"
"other {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to their party.}"
"=2 {{host} invites {guest} and one other person to their party.}"
"other {{host} invites {guest} and # other people to their party.}}}}"
20. The good ‘ol web
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
The early days of the web were dominated by documents or very static CRUD apps.
Early websites relied almost entirely on server runtimes for their content.
Via Java’s java.text, PHP’s Intl and RoR’s i18n, web developers started
tinkering with message formatting, ICU enabled the rest.
With a combination of message formatting, templating languages and HTTP
content negotiation, we reach the first important milestone for i18n on the web.
21. Them pesky JS developers
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Due to various reasons, JS remained largely unpopular for almost an entire decade.
jQuery was released in 2006, sparking a whole new era of experimentation.
Fast forward 10 years and we live in an era of SPAs and dynamic web experiences.
TC39 formulated TC39-TG2 to add Internationalization features to JavaScript.
Modern JS interfaces utilize these features to format and display info on the fly.
22. The state of i18n on the web
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Outside JS’s Intl, important work includes supporting more writing
systems and keyboard layouts.
Intl has gradually grown to provide most of the building blocks we need
● Formatters (Numbers, Date/time, Lists, Durations, …)
● Collator
● Segmenter
● Plural and ordinal selection
There’s one big missing piece…
23. Timeline of MessageFormat 2
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
2020-01
WG reorganized under
Unicode CLDR-TC
2019-07
MF WG first organized
under TC39-TG2
2016-07
Discussion under
tc39/ecma402#92
2013-04
Initial strawperson
proposed and discussed
24. "{pronouns_of_host, select, "
"feminine {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to her party.}"
"=2 {{host} invites {guest} and one other person to her party.}"
"other {{host} invites {guest} and # other people to her party.}}}"
"masculine {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to his party.}"
"=2 {{host} invites {guest} and one other person to his party.}"
"other {{host} invites {guest} and # other people to his party.}}}"
"other {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to their party.}"
"=2 {{host} invites {guest} and one other person to their party.}"
"other {{host} invites {guest} and # other people to their party.}}}}"
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Me: Mom, can we have MessageFormat?
Mom: No, we have MessageFormat in ICU.
MessageFormat in ICU:
25. The need for a new
MessageFormat
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
It’s based on an old design which can’t adapt to modern tools and
interactions, like dynamic UI frameworks.
Lack of modularity and extensibility.
Can’t deprecate anything, stuck with legacy features.
Diversity of locales makes it impossible to map core l10n structures 1:1.
Plaintext, imperative API style makes it quite limited.
Need to subsume functionality from non-standard (proprietary) tooling.
26. A quick and clumsy intro
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
A dynamic message string is a string whose content changes due to the
value of or insertion of some data value or values.
MF2 intends to excel at complex use cases while keeping the basics
simple.
● Text mode first
● Complex messages and expressions
● Declarations and annotations (functions, private use)
● Function registry and builtins
27. Simple and Complex messages
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
This is a message.
Hello, {$userName}!
.match {$userType :equals}
registered {{Welcome {$username}!}}
guest {{Welcome Guest!}}
* {{Welcome!}}
SIMPLE
EXPRESSION
COMPLEX
28. How expressive can they be
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
The match on {$date :datetime dateStyle=long} is cancelled.
Check out {#img src=|image.png|/}.
.input {$date :datetime weekday=long month=medium day=short}
.local $numPigs = {$pigs :integer}
{{On {$date} you had this many pigs: {$numPigs}}}
FUNCTIONS
MARKUP
DECLARATIONS
29. Wait, there’s more?
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
An extensible function registry.
Popular built-in formatters and selectors
● Date/time, durations?
● Numbers, integers
● Plural and ordinal selection
● Lists
30.
31. "{pronouns_of_host, select, "
"feminine {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to her party.}"
"=2 {{host} invites {guest} and one other person to her party.}"
"other {{host} invites {guest} and # other people to her party.}}}"
"masculine {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to his party.}"
"=2 {{host} invites {guest} and one other person to his party.}"
"other {{host} invites {guest} and # other people to his party.}}}"
"other {"
"{num_guests, plural, offset:1 "
"=0 {{host} does not give a party.}"
"=1 {{host} invites {guest} to their party.}"
"=2 {{host} invites {guest} and one other person to their party.}"
"other {{host} invites {guest} and # other people to their party.}}}}"
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Remember this?
32. MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
.match {$guestCount :number offset=1} {$hostPronouns :equals}
0 * {{{$host} does not give a party.}}
1 feminine {{{$host} invites {$guest} to her party.}}
1 masculine {{{$host} invites {$guest} to his party.}}
1 * {{{$host} invites {$guest} to their party.}}
2 feminine {{{$host} invites {$guest} and one other to her party.}}
2 masculine {{{$host} invites {$guest} and one other to his party.}}
2 * {{{$host} invites {$guest} and one other their party.}}
* feminine {{{$host} invites {$guest} and # others to her party.}}
* masculine {{{$host} invites {$guest} and # others to his party.}}
* * {{{$host} invites {$guest} and # others their party.}}
33. Why does any of this matter
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
i
1
8
n
,
M
F
UI design
W
eb
Platform
Intl.MF, MF2
J
a
v
a
S
c
r
i
p
t
34. Intl’s MessageFormat
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
We finally brought Intl.MessageFormat back to committee!
Accepted to Stage 1 in March 2022 (and hopefully Stage 2 soon).
Built on top of familiar Intl design patterns and plans to integrate formatters.
const mf = new Intl.MessageFormat('Hello!', 'es');
mf.format(); // 'Hola!'
35. Challenges
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Obviously we’re not done yet, delays, indecision.
The plethora of stakeholders and requirements could overcomplicate design.
Lack of user attention and feedback.
Lack of stability and direction.
Difficult to have your cake and eat it too, but we try.
36. Get involved
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024
Standard, format and data model:
https://github.com/unicode-org/message-format-wg/
JavaScript proposal:
https://github.com/tc39/proposal-intl-messageformat
Find us on GitHub and Matrix!