Espansione del testo nell'i18n: evitare problemi di layout causati dalla lunghezza delle traduzioni

L'interfaccia inglese si adatta perfettamente. Poi arrivano le traduzioni tedesche, più lunghe del 30%, e quelle finlandesi, più lunghe del 40%. I pulsanti fuoriescono, le tabelle non funzionano più e il layout progettato con cura si deforma. I test di espansione del testo evitano questi problemi.

1

Perché l'espansione del testo compromette i layout

Gli sviluppatori progettano le interfacce con testo inglese, una delle lingue più compatte. Quando arrivano le traduzioni, le lingue più lunghe fuoriescono dai contenitori, compromettono i layout a griglia, troncano le etichette dei pulsanti e spingono i contenuti fuori dallo schermo. Questi errori appaiono soltanto in lingue specifiche e rimangono quindi invisibili durante lo sviluppo e i test esclusivamente in inglese.

The expansion problem

// English is one of the most compact languages.
// Translations are almost always LONGER.

// English (source):
"Save"           // 4 chars

// Translations:
"Speichern"      // German: 10 chars (+150%)
"Enregistrer"    // French: 12 chars (+200%)
"Guardar"        // Spanish: 7 chars (+75%)
"Сохранить"      // Russian: 9 chars (+125%)
"Tallenna"       // Finnish: 8 chars (+100%)

// Buttons, labels, and table headers designed for
// English text WILL break in other languages.

L'espansione del testo non è un caso limite. Ogni interfaccia che supporta più lingue la incontrerà. Il tedesco è più lungo dell'inglese del 30%, il finlandese del 40% e, per le stringhe brevi, alcune lingue possono essere più lunghe di oltre il 100%. Testare l'espansione prima che arrivino le traduzioni evita costose riprogettazioni.

2

Rapporti di espansione del testo per lingua

Rapporti medi di espansione rispetto al testo di origine inglese. Le stringhe brevi, con meno di 20 caratteri, si espandono più di quelle lunghe, perché la scelta delle singole parole influisce maggiormente sulla lunghezza totale.

Expansion ratios by language

// Average text expansion relative to English:

// European languages:
// German:     +30-35%  (compound words)
// Finnish:    +30-40%  (agglutinative)
// French:     +15-25%  (articles, prepositions)
// Spanish:    +15-25%
// Italian:    +15-25%
// Portuguese: +15-25%
// Russian:    +20-30%  (case endings)
// Polish:     +20-30%
// Greek:      +20-30%

// Asian languages (CJK):
// Chinese:    -30-50%  (shorter in characters, but wider per char)
// Japanese:   -20-40%  (kanji compress meaning)
// Korean:     -10-20%

// Right-to-left:
// Arabic:     +20-30%
// Hebrew:     +10-20%

// Rule of thumb by source string length:
// 1-10 chars:   expect +200% expansion
// 11-20 chars:  expect +80% expansion
// 21-70 chars:  expect +40% expansion
// 71+ chars:    expect +30% expansion

Sono valori medi. Le singole stringhe possono espandersi molto di più: un'etichetta inglese di 2 parole potrebbe diventare di 4 parole in tedesco. Esegua test con rapporti più elevati, pari almeno al 50%, per gli elementi critici dell'interfaccia come pulsanti, navigazione e intestazioni delle tabelle.

3

Test con i18n-pseudo

La strategia di espansione di i18n-pseudo aggiunge riempimento alle stringhe di origine per simulare la lunghezza delle traduzioni. Imposti il rapporto in base alle lingue di destinazione e testi i layout prima che arrivino le traduzioni reali.

Terminal

# Method 1: Pseudo-localization with expansion
npx i18n-pseudo generate \
  --source locales/en.json \
  --output locales/pseudo-expanded.json \
  --expansion 1.4 \
  --preset expanded

# Method 2: Longest-translation analysis
npx i18n-validate expansion \
  --source locales/en.json \
  --targets 'locales/*.json' \
  --report expansion-report.json

# Output:
# Key                  | EN  | Longest | Lang | Ratio
# ---------------------|-----|---------|------|-------
# nav.settings         | 8   | 14      | de   | 175%
# buttons.save         | 4   | 12      | fr   | 300%
# errors.networkFailed | 14  | 28      | fi   | 200%

# Method 3: Visual regression with expanded text
npx playwright test \
  --project=expansion-test \
  --update-snapshots

Visual regression tests

// playwright.config.ts
export default defineConfig({
  projects: [
    {
      name: 'expansion-test',
      use: {
        locale: 'pseudo-expanded',
      },
    },
  ],
});

// tests/expansion.spec.ts
test('buttons do not overflow with expanded text', async ({ page }) => {
  await page.goto('/');

  // Check no horizontal overflow
  const buttons = await page.locator('button').all();
  for (const button of buttons) {
    const box = await button.boundingBox();
    const parent = await button.locator('..').boundingBox();
    expect(box!.x + box!.width).toBeLessThanOrEqual(
      parent!.x + parent!.width
    );
  }

  // Visual snapshot comparison
  await expect(page).toHaveScreenshot('homepage-expanded.png', {
    maxDiffPixels: 100,
  });
});

Esegua test con un'espansione del 40% per le lingue europee e del 50% per gli scenari peggiori. Se il layout resiste a un'espansione del 50%, gestirà praticamente qualsiasi lingua.

4

Procedure di design consigliate per l'i18n

Creare layout che gestiscano l'espansione del testo richiede decisioni di design prese prima di iniziare qualsiasi traduzione. Queste procedure evitano gli errori più comuni legati all'espansione.

CSS best practices

/* 1. Use flexible containers, not fixed widths */
/* WRONG */
.button { width: 120px; }

/* RIGHT */
.button { min-width: 80px; padding: 8px 16px; }

/* 2. Allow text wrapping in labels */
/* WRONG */
.label { white-space: nowrap; overflow: hidden; }

/* RIGHT */
.label { overflow-wrap: break-word; }

/* 3. Use CSS Grid/Flexbox for adaptive layouts */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 4. Reserve space for the longest expected translation */
/* Use min-width based on ~1.4x English length */
.table-header {
  min-width: max-content;
  padding-right: 16px;
}

/* 5. Test with the longest language first */
/* German and Finnish are good stress-test languages */

/* 6. For CJK: account for wider characters */
/* CJK characters are typically 2x the width of Latin chars */
/* Even though text is shorter, it may be wider visually */

Provi subito i18n Agent

Trascinare qui il file di traduzione

JSON, YAML, PO, XML, CSV, Markdown, Properties

oppure fare clic per selezionarlo

Lingue di destinazione

Nessuna registrazione richiestaPreventivo immediato

Domande frequenti sull'espansione del testo