Text expansion

Translations are longer than the English original, so buttons, tabs, and cards that fit perfectly in English burst in German.

German words blow up my buttonstext overflows after translatingtranslated text is too longtext expensionstring length growththe French label wraps to two lineswhy does the German version break my layout

See it

Live demo coming soon

What it is

The same sentence takes a different amount of room in every language. German, Finnish, Russian, and Polish run long; French and Spanish add roughly a third; Chinese, Japanese, and Korean usually shrink. The rough industry rule of thumb: budget about 30% extra for a paragraph, and up to double for a short word like 'Save' or 'On', because tiny strings expand the hardest ('Save' becomes 'Speichern', 'Cancel' becomes 'Abbrechen').

Design for it instead of fixing it later: no fixed-width buttons, no single-line assumptions in nav and tabs, min-width instead of width, and let containers grow vertically. Run a pseudo-locale that pads every string by 40% and the breakages show up in your own language before a translator ever files a bug.

Gotchas: contraction hurts too, since a CJK build of a padded layout reads as empty and unfinished. Truncation with an ellipsis is not a fix when the truncated part is the meaning, and a CSS text-overflow silently hides the problem from screenshots. Accented and Vietnamese characters also need extra line-height, so tight leading clips diacritics.

Ask AI for it

Audit this UI for text expansion and make it survive a 40% longer translation. Replace fixed widths and heights with min-width plus auto-growing containers, allow buttons and nav items to wrap or grow, remove single-line assumptions from tabs, badges, and table headers, and raise line-height so accented characters are not clipped. Then show the same screens rendered with every string padded by 40% so I can see what still breaks.

You might have meant

pseudo localizationlocalization testinglogical propertiesstring extraction