Skip to content

🌍 Internationalization (i18n)

Das Operations Portal unterstützt mehrere Sprachen für unser globales Team.

Unterstützte Sprachen

Code Sprache Flag Status
de Deutsch 🇦🇹 ✅ Default
en English 🇺🇸 ✅ Fallback
ja 日本語 🇯🇵 ✅ Complete
zh 中文 🇨🇳 ✅ Complete
th ไทย 🇹🇭 ✅ Complete
ka ქართული 🇬🇪 ✅ Complete
hi हिन्दी 🇮🇳 ✅ Complete

Sprache wechseln

  1. Öffne das Portal
  2. Klicke auf die gewünschte Flagge im Language Switcher (oben)
  3. Die Seite wird sofort übersetzt
  4. Deine Wahl wird gespeichert (localStorage)

Technische Details

Stack

  • Framework: i18next v23.7.6
  • Fonts: Google Noto Sans (alle Schriftsysteme)
  • Storage: localStorage für Sprachpräferenz
  • Fallback: Fehlt ein String → Englisch

Dateistruktur

docs/
├── portal.html          # Haupt-Portal
├── js/
│   └── i18n.js          # i18n Konfiguration
└── locales/
    ├── README.md        # Translation Guide
    ├── de/
    │   ├── common.json  # Shared UI (Buttons, Status)
    │   └── portal.json  # Portal-spezifisch
    ├── en/
    │   └── ...
    └── [lang]/
        └── ...

Namespaces

Namespace Inhalt
common Buttons, Status, Errors, Navigation
portal Header, Sections, Feature-Karten

Neue Sprache hinzufügen

Quick Guide

# 1. Ordner erstellen
mkdir locales/ko

# 2. Englisch als Template kopieren
cp locales/en/*.json locales/ko/

# 3. JSON-Dateien übersetzen
# (Keys behalten, nur Values ändern)

# 4. In i18n.js registrieren
# SUPPORTED_LANGUAGES um Eintrag erweitern

Detaillierte Anleitung

Siehe Translation Guide

API

Sprache programmatisch ändern

// Sprache wechseln
await BlauweissI18n.changeLanguage('ja');

// Aktuelle Sprache abfragen
const lang = BlauweissI18n.getCurrentLanguage(); // 'ja'

// String übersetzen
const text = BlauweissI18n.t('header.title');

Formatierung

// Zahlen (locale-aware)
BlauweissI18n.formatNumber(1234.56);
// DE: "1.234,56"
// EN: "1,234.56"
// JA: "1,234.56"

// Datum
BlauweissI18n.formatDate(new Date());
// DE: "4. Feb. 2026, 10:30"
// EN: "Feb 4, 2026, 10:30 AM"
// JA: "2026/02/04 10:30"

// Währung
BlauweissI18n.formatCurrency(105, 'EUR');
// DE: "105,00 €"
// EN: "€105.00"

Troubleshooting

Text wird nicht übersetzt

  1. Browser-Console auf Fehler prüfen
  2. Prüfen ob Key in JSON existiert
  3. data-i18n Attribut korrekt gesetzt?

Kästchen statt Zeichen (□□□)

Font nicht geladen. Noto Sans sollte alle Schriften abdecken. Prüfen:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+[SCRIPT]..." rel="stylesheet">

Sprache wird nicht gespeichert

localStorage blockiert? Incognito-Modus? 

// Test
localStorage.setItem('test', '1');
console.log(localStorage.getItem('test')); // sollte '1' sein