The layout did not break on a paragraph. It broke on a German navigation label whose compound was 17 or more characters long at display size. The English design had treated the label as a neat rectangle. German turned it into a structural load.
On this site, the useful lesson was not to reserve more space for German everywhere. It was to stop making layout depend on the expected shape of English.
Text expansion is not one direction
German often produces long compounds and wider labels. Turkish copy on the same page often runs shorter than English, but individual words can still create difficult wrap points. Headlines, buttons, metadata and navigation react differently. A general language expansion multiplier hides this variation.
Use real copy early, including the longest plausible labels and awkward editorial titles. Do not test only translated placeholder paragraphs. The failures happen in small constrained components: cards with fixed actions, tab rows, breadcrumbs, filters and display headings.
Treat every locale as original content with its own rhythm. Matching line count across languages is not consistency. Preserving hierarchy and usable space is.
Let text give before the grid does
Grid tracks should allow content columns to shrink correctly instead of letting intrinsic text width push the whole layout outward. Flex and grid children often need an explicit minimum that permits shrinking. Actions should wrap, stack or move below content before the primary reading column becomes unusable.
Avoid fixed card heights derived from English. Align what carries meaning, such as image, title start or action region, and allow the text block to grow. If perfect row alignment requires clipping a translation, the grid has been given the wrong authority.
At display sizes, set responsive type and line-height with enough room for a German wrap. Then review the visual rhythm in Turkish, where shorter copy may expose excessive empty space.
Hyphenation is language-specific
Automatic hyphenation should not be enabled as a global visual patch. The browser needs the correct language to choose suitable rules. MDN's hyphens documentation explains that automatic behaviour depends on the HTML lang attribute and the available language dictionary.
Set the document language for each locale and tag inline language changes where they occur. Enable hyphenation selectively for German editorial text or narrow display contexts after visual review. Turkish and English may need different wrapping decisions. Do not use word-break rules that split every word merely to protect a component. That preserves the box by damaging reading.
Manual soft break opportunities belong only in exceptional, controlled content. They are content decisions, not a universal CSS strategy.
Components need semantic escape routes
A button label can wrap, but an icon-only fallback may lose meaning. A navigation item can move into an overflow menu, but only if the information architecture remains clear. A card can grow, but a carousel may then change height unexpectedly. Each component needs a defined response to longer and shorter text.
Write those responses into component tests. Render all supported locales at compact and wide widths. Include missing translations, mixed-language names and CMS content that exceeds the designed example. Visual regression screenshots help, but keyboard focus and screen-reader names need checks too.
Stress the three locales this week
Choose the densest page and replace every placeholder with current English, Turkish and German content. Find the longest unbroken word in each constrained component. Test browser zoom, narrow widths and large text settings.
For each failure, decide in order: can the track shrink, can the text wrap naturally, can the component reflow, and should the wording change editorially? Apply language-aware hyphenation only after those structural options.
Finally, review each locale independently rather than flicking between them to seek sameness. A robust multilingual layout does not make three languages occupy identical boxes. It gives each language room to sound natural while the interface keeps its hierarchy, alignment and intent.