Le texte traduit est rarement de la même longueur que la source. L'allemand et le néerlandais sont sensiblement plus longs que l'anglais, le finnois et le russe encore plus, et le chinois et le japonais beaucoup plus courts. Une mise en page qui s'adapte parfaitement à son texte anglais n'a nulle part où mettre le surplus, elle déborde, dépasse ou est coupée. Rien n'est faux dans la traduction ; la conception n'avait aucune marge.
Là où ça se voit en premier
Navigation. Un menu qui rentre tout juste en anglais passe sur deux lignes, ou des éléments glissent sous le logo. Le symptôme unique le plus courant.
Boutons et appels à l'action. Des boutons de largeur fixe coupent leur étiquette, ou le texte passe à la ligne et le bouton devient plus haut que la ligne sur laquelle il se trouve.
Cartes dans une grille. Le titre d'une carte prend une ligne supplémentaire et les cartes de cette ligne cessent d'avoir la même hauteur.
Tableaux. Les en-têtes de colonne sont des mots courts en anglais et des phrases ailleurs, donc un tableau qui rentrait commence à défiler.
Tout élément positionné absolument. Le texte en surimpression, les badges et les rubans sont placés pour une longueur de chaîne donnée et ne bougent pas lorsque la chaîne change.
Comment y remédier
Laisser les conteneurs grandir. Remplacez width et height fixes sur les éléments contenant du texte par min-width, min-height ou rien du tout. Ce seul changement résout la plupart des cas.
Cibler la langue, pas le site. L'élément <html> sur une page traduite porte un attribut lang, vous pouvez donc ajuster uniquement la langue qui en a besoin et laisser les autres tranquilles. La valeur inclut la région en minuscules, comme de-de, de-at ou es-mx, alors faites correspondre le début plutôt que la valeur entière :
/* Give the German nav more room without touching other languages */
html[lang^="de"] .site-nav a {
font-size: 0.9rem;
letter-spacing: -0.01em;
}
Pour styliser une seule région, faites correspondre la valeur entière : html[lang="de-at"].
Autoriser la césure des mots longs. Les noms composés en allemand et en finnois peuvent dépasser une colonne étroite à eux seuls :
.card h3 {
overflow-wrap: break-word;
hyphens: auto;
}
Vérifier séparément la droite à gauche. Neuf des langues prises en charge inversent la direction, ce qui est une classe de problème différente de la longueur. Voir Langues de droite à gauche.
Quand le texte lui-même pose problème
Si une traduction est beaucoup plus longue que nécessaire, raccourcissez cette chaîne plutôt que de retravailler la conception. La modifier manuellement est la solution directe, et elle tient : la traduction normale de la page ne remplace jamais une chaîne qui a déjà une traduction. Choisir Retransl. avec IA sur cette ligne la remplace. Voir Modifier les traductions manuellement.
Pour un terme qui n'aurait pas dû être traduit du tout, et qui étire maintenant un bouton, une règle de glossaire le conserve tel quel partout. Voir Règles de glossaire.
Vérifier avant de lancer une langue
Ouvrez deux ou trois de vos pages les plus denses en mise en page dans la langue la plus longue que vous supportez, avec une largeur de fenêtre étroite. L'allemand est un bon test de résistance si vous l'avez. Ce qui survit à cela survit généralement à tout le reste.