T48j Docs · Internationalization: catalogs and messages, locales, right to left; the i18n example compiles

frontend/src/docs/guides.ts

@@ -6,7 +6,7 @@ import { Marked, type Tokens } from "marked";
 const at = (relative: string) => fileURLToPath(new URL(relative, import.meta.url));
 
 /** The guides in reading order, by file name. */
-const ORDER = ["introduction", "installation", "getting-started", "theme", "focus", "motion", "icons", "overlays"];
+const ORDER = ["introduction", "installation", "getting-started", "theme", "focus", "motion", "icons", "overlays", "i18n"];
 
 export interface Guide {
   /** The path segment; the introduction has none. */

frontend/src/docs/i18n.md

@@ -0,0 +1,39 @@
+# Internationalization
+
+`i18n::I18n` holds an app's messages in catalogs, one per locale, and the locale on show. The app sets it as a GPUI global; views read their words from it.
+
+## Catalogs and messages
+
+| Call | Does |
+| --- | --- |
+| `I18n::new("en-US")` | Starts with the locale on show. |
+| `.catalog(tag, &[(key, message)])` | Adds a locale's messages. Every catalog holds the first one's keys, no more and no fewer, or it panics naming them. |
+| `cx.set_global(i18n)` | Makes it the app's. |
+| `cx.global::<I18n>().text(key, &[(name, value)])` | The message for `key`, each `{name}` filled. A missing key, argument or catalog panics. |
+| `I18n::set_locale(tag, cx)` | Shows another locale in every window, logs the change, and panics on a locale without a catalog. |
+
+Ely's components take their words from the app: a `Button`'s label, a `Dialog`'s title. Some carry English words of their own, such as a toast's Undo, the Cancel of `ConfirmDialog` and `PromptDialog`, and the Close tip on a fullscreen dialog.
+
+## Locales
+
+`LOCALES` lists the seven locales Ely formats for: en-US, en-GB, de-DE, fr-FR, ja-JP, zh-CN and he-IL. `Locale::of(tag)` returns one and panics on a tag outside the list.
+
+| Item | Holds |
+| --- | --- |
+| `tag`, `name` | `"de-DE"`, `"Deutsch"`. |
+| `number(value, decimals)` | The value with the locale's separators: `number(1234.5, 1)` is `1.234,5` in de-DE. |
+| `date(at, zone)` | A numeric date in CLDR's short form. |
+| `direction` | `Direction::Ltr` or `Direction::Rtl`. |
+
+## Right to left
+
+He-IL reads right to left. `direction.row(element)` lays a flex row from the reading side, and `direction.align(element)` aligns text to that side.
+
+GPUI sets no paragraph direction, so a line runs the way its first strong letter does. `text` leads a right-to-left message with a right-to-left mark, so its words suit labels, not a field's value. `number` leads a right-to-left minus with a left-to-right mark, as CLDR does. GPUI wraps right-to-left lines in the wrong order, so keep such text on one line, an `Ellipsis`.
+
+## Two locales
+
+The example greets in English and Hebrew, formats a count by the locale, mirrors its row, and switches locale with a button.
+
+```rust example=i18n
+```