<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internationalization</title>
<meta name="description" content="A programming language that compiles to HTML, CSS, and JavaScript. Build SPAs and static sites with built-in components, reactivity, routing, i18n, and animations.">
<link rel="stylesheet" href="../styles.css">
</head>
<body>
<div id="app">
<div class="wf-row">
<div class="wf-container wf-animate-fadeIn">
<div class="wf-spacer"></div>
<h1 class="wf-heading wf-heading--h1">Internationalization (i18n)</h1>
<p class="wf-text wf-text--muted">Built-in multi-language support with reactive locale switching and automatic RTL.</p>
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">Setup</h2>
<p class="wf-text">Create a JSON file per locale in your translations directory.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">// src/translations/en.json
{
"greeting": "Hello, {name}!",
"nav.home": "Home",
"nav.about": "About"
}
// src/translations/ar.json
{
"greeting": "!أهلاً، {name}",
"nav.home": "الرئيسية",
"nav.about": "حول"
}</code>
</div>
</div>
<div class="wf-spacer"></div>
<p class="wf-text wf-text--bold">Add i18n config to webfluent.app.json:</p>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">{
"i18n": {
"defaultLocale": "en",
"locales": ["en", "ar"],
"dir": "src/translations"
}
}</code>
</div>
</div>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">The t() Function</h2>
<p class="wf-text">Use t() to look up translated text. It is reactive — all t() calls update when the locale changes.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">// Simple key lookup
Text(t("nav.home"))
// With interpolation
Text(t("greeting", name: user.name))
// In any component
Button(t("actions.save"), primary)
Heading(t("page.title"), h1)</code>
</div>
</div>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">Locale Switching</h2>
<p class="wf-text">Switch the locale at runtime with setLocale(). All translated text updates instantly.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">Button("English") { setLocale("en") }
Button("العربية") { setLocale("ar") }
Button("Espanol") { setLocale("es") }
// Access current locale
Text("Current: {locale}")
Text("Direction: {dir}")</code>
</div>
</div>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">RTL Support</h2>
<p class="wf-text">WebFluent automatically detects RTL locales and updates the document direction.</p>
<div class="wf-spacer"></div>
<table class="wf-table">
<thead>
<td>Locale</td>
<td>Direction</td>
</thead>
<tr>
<td>ar (Arabic)</td>
<td>RTL</td>
</tr>
<tr>
<td>he (Hebrew)</td>
<td>RTL</td>
</tr>
<tr>
<td>fa (Farsi)</td>
<td>RTL</td>
</tr>
<tr>
<td>ur (Urdu)</td>
<td>RTL</td>
</tr>
<tr>
<td>All others</td>
<td>LTR</td>
</tr>
</table>
<div class="wf-spacer"></div>
<p class="wf-text wf-text--muted">When setLocale("ar") is called, the HTML element gets dir="rtl" and lang="ar" automatically.</p>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">Fallback Behavior</h2>
<p class="wf-text">If a key is missing in the current locale:</p>
<div class="wf-stack">
<p class="wf-text">1. Falls back to the defaultLocale translation</p>
<p class="wf-text">2. If still missing, returns the key itself (e.g., "nav.home")</p>
</div>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">SSG + i18n</h2>
<p class="wf-text wf-text--muted">When both SSG and i18n are enabled, pages are pre-rendered with the default locale text. After JavaScript loads, locale switching works normally.</p>
<div class="wf-spacer"></div>
</div>
</div>
</div>
<script src="../app.js"></script>
</body>
</html>