UI: Localize

[benbucksch]

Options:

• svelte-i18n
  • which uses Format.JS
  • which uses ICU message format
• Fluent

Considerations:

• Hard to change localization format ("message format") above
• In the UI code, I'd like tr('Some English words ending with {ending}', {ending}), i.e. have the English string hardcoded. This is a) more fail-safe, and b) avoids that we have to invent new string IDs and c) allows to delay the localization during development, not touching multiple files all the time.
• Must handle plural forms (both options above do that)
• Would be nice, if it could handle brand names without code in the UI. (Fluent can do that, need to check Format.JS)
• L10n format must be supported by online web tools for translators.

Tasks:

• Choose localization library
• Extract all UI strings from the code (Svelte HTML, Svelte JS, logic JS), and localize it.
• Create a script in TypeScript that extracts the strings from the source code and builds the English locale, in the translation files, as the l10n engine expects them. That locale will then be the basis for the translation to other languages.
• Create a sample translation in 1 other language, and test it.
• Later (other ticket): Set up system to translate to other languages using AI tools. See Translate app UI using AI tools #108

[benbucksch]

@jermy-c Could you please complete this task in the next week?

[jermy-c]

Localization Library

Lingui is the localization library chosen.
https://github.com/HenryLie/svelte-i18n-lingui is the svelte wrapper for the library used for UI Localization.

Pros

1. It uses natively uses English strings as IDs
2. It fallsback to the English string if there's no translations, which allows delaying localization during development.
3. It allows interpolation of svelte components in between translation which gives translations more context and lets translators translate without touching the HTML. e.g.

<T msg="Click # for more information">
	<a href="/about">{$t`here`}</a>
</T>

4. Has a string extraction tool

Cons

1. Very new and the svelte wrapper is even newer

IMPORTANT!

1. Must use gt``string`` in JS/TS files, instead of gt("string") otherwise string extraction won't work. gt does not work on string literals HenryLie/svelte-i18n-lingui#6
2. Extraction uses sveltePreprocess which causes an error when $: headHTML = ``<style>\n${cssBody}\n${cssContent}\n</style>``;

[benbucksch]

Interesting choice. Looks very good! Can you please make a PR with the code changes? Before, please carefully review yourself. Make sure the above criteria are met.

[benbucksch]

@jermy-c I've fixed the translation of the ts modules, in the way we discussed yesterday, in b364b94

@jermy-c Could you please still fix the review comments in #111 and make a PR for that?

[benbucksch]

Thanks!