Il testo tradotto ha raramente la stessa lunghezza dell'originale. Il tedesco e l'olandese sono notevolmente più lunghi dell'inglese, il finlandese e il russo ancora di più, e il cinese e il giapponese molto più corti. Un layout che si adatta perfettamente al testo inglese non ha spazio per l'extra, quindi va a capo, trabocca o viene tagliato. Non c'è niente di sbagliato nella traduzione; il design non aveva margine.
Dove appare per primo
Navigazione. Un menu che entrava appena in inglese va a capo su due righe, o gli elementi scivolano sotto il logo. Il sintomo singolo più comune.
Pulsanti e chiamate all'azione. Pulsanti a larghezza fissa tagliano la loro etichetta, o il testo va a capo e il pulsante diventa più alto della riga in cui si trova.
Schede in una griglia. L'intestazione di una scheda occupa una riga in più e le schede di quella riga smettono di avere la stessa altezza.
Tabelle. Le intestazioni di colonna sono parole brevi in inglese e frasi in altre lingue, quindi una tabella che entrava inizia a scorrere.
Qualsiasi cosa posizionata assolutamente. Testo di sovrapposizione, badge e nastri sono posizionati per una lunghezza di stringa e non si spostano quando la stringa cambia.
Risoluzione del problema
Lascia che i contenitori crescano. Sostituisci width e height fissi sugli elementi che contengono testo con min-width, min-height o niente del tutto. Questo singolo cambiamento risolve la maggior parte dei casi.
Mira alla lingua, non al sito. L'elemento <html> in una pagina tradotta porta un attributo lang, quindi puoi regolare solo la lingua che ne ha bisogno e lasciare le altre. Il valore include la regione in minuscolo, come de-de, de-at o es-mx, quindi abbina l'inizio piuttosto che l'intero valore:
/* Give the German nav more room without touching other languages */
html[lang^="de"] .site-nav a {
font-size: 0.9rem;
letter-spacing: -0.01em;
}
Per stilizzare una sola regione, abbina il valore completo: html[lang="de-at"].
Consenti la divisione di parole lunghe. I nomi composti in tedesco e finlandese possono superare da soli una colonna stretta:
.card h3 {
overflow-wrap: break-word;
hyphens: auto;
}
Controlla separatamente da destra a sinistra. Nove delle lingue supportate invertono la direzione, che è una classe di problemi diversa dalla lunghezza. Vedi Lingue da destra a sinistra.
Quando il testo stesso è il problema
Se una traduzione è molto più lunga del necessario, accorcia quella stringa piuttosto che rielaborare il design. Modificarla manualmente è la soluzione diretta, e rimane così: la traduzione normale della pagina non sostituisce mai una stringa che ha già una traduzione. Scegliere Ritraduci con AI in quella riga la sostituisce. Vedi Modifica manualmente le traduzioni.
Per un termine che non avrebbe dovuto essere tradotto affatto, e che ora sta allungando un pulsante, una regola del glossario lo mantiene così com'è ovunque. Vedi Regole del glossario.
Controllo prima del lancio di una lingua
Apri due o tre delle tue pagine più dense di layout nella lingua più lunga che supporti, con una larghezza di finestra ridotta. Il tedesco è un buon test di stress se lo hai. Qualunque cosa sopravviva a questo, di solito sopravvive a tutto il resto.