UI-Lokalisierung: Textexpansion, RTL-Sprachen & Responsive Design (2026)

Der Launch der alles kaputtmachte

Der Deutschland-Launch war für 9 Uhr geplant. Um 8:55 Uhr öffnete jemand die deutsche Version.

Buttons mitten im Wort abgeschnitten. Navigation kaputt. Formulare unlesbar. Die sorgfältig designte UI sah aus wie eine Fingermalerei.

Was war passiert? Englisch "Save" (4 Zeichen) wurde deutsch "Speichern" (10 Zeichen). Die UI war nicht darauf vorbereitet.

---

Die drei schwierigen Probleme

1. Textexpansion (Das Deutsch-Problem)

Durchschnittliche Expansion nach Sprache:

2. Right-to-Left (RTL) Layouts

Arabisch, Hebräisch, Persisch, Urdu lesen von rechts nach links. Ihr gesamtes Layout muss gespiegelt werden.

Was sich ändert:

• Navigation: Rechts → Links
• Textausrichtung: Standard rechts
• Icons: Horizontal spiegeln

Was gleich bleibt:

• Videos/Bilder
• Telefonnummern, Adressen
• Logos

3. Zeichenlimits

JavaScriptCopy
const tweet = '中文测试';
console.log(tweet.length); // 4 Zeichen ✅
console.log(Buffer.from(tweet, 'utf8').length); // 12 Bytes ❌

Ihre Datenbank varchar(50) hält möglicherweise nur 16 chinesische Zeichen.

---

Textexpansion handhaben

Strategie 1: Flexible Layouts

CSSCopy
1/* ❌ Schlecht: Feste Breiten */
2.button {
3  width: 80px; /* Bricht im Deutschen */
4}
5
6/* ✅ Gut: Auto-Breite mit Padding */
7.button {
8  padding: 0.5rem 1rem;
9  min-width: 80px;
10  max-width: 200px;
11}

Strategie 2: Abschneiden mit Tooltips

CSSCopy
1.truncate {
2  overflow: hidden;
3  text-overflow: ellipsis;
4  white-space: nowrap;
5  max-width: 200px;
6}

Strategie 3: Pseudo-Lokalisierung testen

JavaScriptCopy
1function pseudoLocalize(text) {
2  // Klammern und Extra-Zeichen für Expansions-Simulation
3  const padding = 'x'.repeat(Math.ceil(text.length * 0.3));
4  return `[[${text}${padding}]]`;
5}
6
7pseudoLocalize('Save'); // "[[Savexxx]]"

Wenn Ihre UI mit Pseudo-Lokalisierung bricht, bricht sie mit echten Sprachen.

---

RTL-Unterstützung implementieren

Schritt 1: Richtung erkennen

JavaScriptCopy
1function getDirection(locale) {
2  const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
3  return rtlLanguages.includes(locale.split('-')[0]) ? 'rtl' : 'ltr';
4}
5
6document.documentElement.dir = getDirection(currentLocale);

Schritt 2: Logische CSS Properties verwenden

CSSCopy
1/* ❌ Alter Weg (direktional): */
2.sidebar {
3  margin-left: 20px;
4}
5
6/* ✅ Neuer Weg (logisch): */
7.sidebar {
8  margin-inline-start: 20px;
9}

Logisches Property-Mapping:

Schritt 3: Icons handhaben

CSSCopy
1/* Richtungs-Icons spiegeln */
2.icon-arrow {
3  transform: scaleX(var(--rtl-mirror, 1));
4}
5
6html[dir="rtl"] {
7  --rtl-mirror: -1;
8}

---

Zeichenlimits handhaben

Problem: Datenbank-Constraints

SQLCopy
1-- ❌ Schlecht: Byte-Limit
2CREATE TABLE products (
3  name VARCHAR(50)  -- 50 Bytes, nicht Zeichen
4);
5
6-- ✅ Sicherheitsmarge berücksichtigen
7CREATE TABLE products (
8  name VARCHAR(200)  -- 4x Sicherheitsmarge
9);

Zeichencount validieren

JavaScriptCopy
1function validateInput(text, maxChars) {
2  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
3  const segments = Array.from(segmenter.segment(text));
4  return segments.length <= maxChars;
5}

---

Test-Strategien

1. Visual Regression Testing

JavaScriptCopy
1// Playwright Beispiel
2const locales = ['en', 'de', 'ja', 'ar'];
3
4locales.forEach(locale => {
5  test(`Homepage korrekt in ${locale}`, async ({ page }) => {
6    await page.goto(`/${locale}`);
7    await expect(page).toHaveScreenshot(`homepage-${locale}.png`);
8  });
9});

2. Textüberlauf-Erkennung

JavaScriptCopy
1function detectOverflow() {
2  const elements = document.querySelectorAll('button, .nav-item');
3  return Array.from(elements).filter(el =>
4    el.scrollWidth > el.clientWidth
5  );
6}

3. Manuelle Test-Checkliste

• Alle Sprachen auf Mobile testen
• RTL-Sprachen testen (Arabisch, Hebräisch)
• CJK-Sprachen testen (Chinesisch, Japanisch, Koreanisch)
• Längste Sprache testen (meist Deutsch)
• Auf 200% zoomen

---

Framework-spezifische Lösungen

Next.js

TSXCopy
1// app/[locale]/layout.tsx
2export default function LocaleLayout({ children, params: { locale } }) {
3  const direction = getDirection(locale);
4
5  return (
6    <html lang={locale} dir={direction}>
7      <body>{children}</body>
8    </html>
9  );
10}

Tailwind CSS

TSXCopy
1<div className="
2  ml-4 rtl:mr-4 rtl:ml-0
3  text-left rtl:text-right
4">

---

Häufige Fehler

1. Feste Container-Breiten

CSSCopy
1/* ❌ Bricht im Deutschen */
2.button { width: 100px; }
3
4/* ✅ Flexibel */
5.button { min-width: 100px; padding: 0.5rem 1rem; }

2. Direktionale Positionierung

CSSCopy
1/* ❌ Immer links positioniert */
2.dropdown { left: 0; }
3
4/* ✅ Logisches Property */
5.dropdown { inset-inline-start: 0; }

---

Zusammenfassung

Bereit für mehrsprachige UIs? Starten Sie mit IntlPull