MessageFormat: The future of i18n on the web

MessageFormat
The future of i18n on the web
Ujjwal Sharma (@ryzokuken)
FOSDEM 2024, Brussels 󰎐

Bienvenue!
Welkom!
Willkommen!
i18n.t(‘welcome’)
MessageFormat: The future of i18n on the web
Ujjwal Sharma (@ryzokuken), FOSDEM 2024

About Me
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

About Igalia
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)

A (now) general purpose
programming language
designed primarily for
scripting web interfaces.

Stage One:
Initially, the sign (image or
representation) is a reﬂection
of basic reality.

Stage Two:
The sign masks a basic reality.
The image becomes a
distortion of reality.

Stage Three:
The sign marks the absence of
basic reality. The image calls
into question what the reality
is and if it even exists.

Stage Four:
The sign bears no relation to
any reality whatsoever; it is its
own pure simulacrum.

What is the “web” platform?
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.

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 speciﬁc
target audience is called Localization (aka l10n).

Early attempts at i18n
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.

Let’s talk about gettext
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)

"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.

ICU MessageFormat
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)

"{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 {"
"=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 {"
"=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.}}}}"

The good ‘ol web
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 ﬁrst important milestone for i18n on the web.

Them pesky JS developers
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 ﬂy.

The state of i18n on the web
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…

Timeline of MessageFormat 2
2020-01
WG reorganized under
Unicode CLDR-TC
2019-07
MF WG ﬁrst organized
under TC39-TG2
2016-07
Discussion under
tc39/ecma402#92
2013-04
Initial strawperson
proposed and discussed

"feminine {"
"masculine {"
"other {"
Me: Mom, can we have MessageFormat?
Mom: No, we have MessageFormat in ICU.
MessageFormat in ICU:

The need for a new
MessageFormat
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.

A quick and clumsy intro
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 ﬁrst
● Complex messages and expressions
● Declarations and annotations (functions, private use)
● Function registry and builtins

Simple and Complex messages
This is a message.
Hello, {$userName}!
.match {$userType :equals}
registered {{Welcome {$username}!}}
guest {{Welcome Guest!}}
* {{Welcome!}}
SIMPLE
EXPRESSION
COMPLEX

How expressive can they be
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

Wait, there’s more?
An extensible function registry.
Popular built-in formatters and selectors
● Date/time, durations?
● Numbers, integers
● Plural and ordinal selection
● Lists

"feminine {"
"masculine {"
"other {"
Remember this?

.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.}}

Why does any of this matter
i
1
8
n
,
M
F
UI design
W
eb
Platform
Intl.MF, MF2
J
a
v
a
S
c
r
i
p
t

Intl’s MessageFormat
We ﬁnally 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!'

Challenges
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.
Difﬁcult to have your cake and eat it too, but we try.

Get involved
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!

Merci!
Bedankt!
Danke schön!
i18n.t(‘thanks’)

MessageFormat: The future of i18n on the web

Recommended

Recommended

More Related Content

Similar to MessageFormat: The future of i18n on the web

Similar to MessageFormat: The future of i18n on the web (19)

More from Igalia

More from Igalia (20)

Recently uploaded

Recently uploaded (20)

MessageFormat: The future of i18n on the web