One layout, many languages, and the layout usually loses

Here's what happens when a banner built in English meets a translator. "Accept" becomes "Alle akzeptieren" in German. A neat two-button row wraps to three lines. In Arabic and Hebrew the whole thing needs to run right to left, and the close icon that sat in the top-right now belongs in the top-left. None of this is exotic. If any real share of your traffic isn't English-speaking, your banner is already rendering in conditions you didn't design for.

Choosing which language to show and what to translate is covered in Multi-Language Cookie Banner Localization. This guide is about the layout: making the design itself sturdy enough that translated text doesn't break it.

Design for expansion, because short strings expand the most

Translated text is usually longer than English, and the counterintuitive part is that the shortest strings expand the most. The W3C's internationalization guidance, citing IBM's figures, puts source text of up to ten characters at 200 to 300 percent expansion once translated. Button labels and toggles are exactly that short. The often-quoted example: "views" becomes "visualizzazioni" in Italian, roughly three times the length.

So a button sized to fit "Accept" in English will overflow in half the languages you support. Design your buttons, headings, and toggle labels assuming they might double or triple in width, and check the longest translation you actually ship, not the English mock.

Stop fixing widths and heights

Most banner breakage traces back to a fixed dimension somewhere. A button locked to width: 96px, a bar locked to height: 64px, text that's absolutely positioned. Let content size the box:

Let buttons grow with their label. Use padding, a sensible min-width, and allow the text to set the rest. Don't truncate button text with an ellipsis, a half-hidden "Reject al..." is a real accessibility and consent problem.
Let the banner grow taller. A consent bar that clips its own text when a sentence wraps is failing the visitors who most need to read it.
Give text room to breathe. WCAG's Text Spacing criterion expects your layout to survive users bumping up line height and letter spacing. A layout that only fits at exactly your spacing values will break for them too.

Right-to-left is a mirror, not a translation

Supporting Arabic, Hebrew, Persian, or Urdu means more than swapping the words. The layout mirrors. Set dir="rtl" on the banner for those languages, and build the CSS with logical properties so it flips automatically. Replace margin-left with margin-inline-start, padding-right with padding-inline-end, text-align: left with text-align: start. Written that way, the same stylesheet lays out correctly in both directions with no duplicate rules.

Some things mirror and some don't. Reading order, button order, and directional icons like back and forward arrows or chevrons should flip. Phone numbers, most brand logos, and media playback controls should not. Get this wrong and a right-to-left banner feels subtly broken even when every word is correct.

/* Write once with logical properties, works in LTR and RTL */
.cb-banner {
  padding-inline: 1.25rem;      /* not padding-left / right */
  padding-block: 1rem;
  text-align: start;            /* not left */
}
.cb-banner .close {
  inset-inline-end: 0.75rem;    /* not right */
}
.cb-banner .buttons {
  display: flex;
  gap: 0.75rem;                 /* flex + gap reorders cleanly under rtl */
}

/* Flip directional icons only */
[dir="rtl"] .cb-banner .icon-chevron { transform: scaleX(-1); }

When English words appear inside right-to-left text

Consent copy mixes scripts more than you'd expect. An Arabic sentence might contain "Google Analytics" or a URL, both left-to-right runs inside a right-to-left line. Browsers handle the Unicode bidirectional algorithm well most of the time, but embedded numbers, brand names, and punctuation can land in the wrong spot. When you inject a variable like a company name or a cookie count into a translated string, wrap it so its direction is isolated (the <bdi> element, or CSS unicode-bidi: isolate). It's a small thing that stops a phone number or brand from scrambling mid-sentence.

Fonts and scripts you didn't test

Your brand font may not include the glyphs for every language you serve. If it has no Arabic or Thai coverage, the browser silently falls back to something else, and your carefully chosen type turns into a mismatch. Two habits help. Declare a font stack with proper fallbacks for each script, and give lines enough height: Arabic, Thai, and Devanagari carry marks above and below the baseline that a tight line-height will clip. CJK text has its own line-length and wrapping behaviour. Test the real languages in a real browser, because a font problem never shows up in an English preview.

Test localization before a translator is involved

Pseudo-localize first

Replace your English strings with a longer, accented stand-in (for example "[!!! Àććépt àll çòòkïés !!!]"). It surfaces overflow, clipping, and hard-coded strings before you spend money on real translation.

Flip to RTL

Add dir="rtl" and confirm the layout mirrors, the close icon moves, button order reverses, and directional icons flip while logos and numbers stay put.

Load your longest real translation

Take the language whose "Accept all" and "Reject all" run longest and confirm buttons don't overflow, truncate, or overlap.

Check each script's font and line height

Render Arabic, Thai, Devanagari, and CJK if you serve them. Look for missing glyphs and clipped diacritics.

Re-run the accessibility pass per language

Contrast, target size, and keyboard order can all shift once the text and direction change. Don't assume the English pass carries over.

Multilingual banner design checklist

Size buttons and the banner to content, not fixed pixels
Short labels expand the most, up to 200 to 300 percent.
Never truncate button text
A cut-off "Reject al..." breaks both usability and consent.
Build with CSS logical properties and a dir attribute
One stylesheet that lays out correctly in LTR and RTL.
Mirror reading order and directional icons, not logos or numbers
A half-mirrored RTL banner feels broken even when the words are right.
Isolate injected variables with bdi or unicode-bidi
Stops brand names and numbers scrambling inside RTL text.
Declare per-script font fallbacks and generous line height
Avoid missing glyphs and clipped marks in Arabic, Thai, Devanagari, CJK.
Pseudo-localize, then test your real longest translation
Catch overflow before and after translation happens.

Where CookieBeam Fits

CookieBeam serves per-language translations of your banner and preferences text, so a visitor sees consent copy in a language they understand, which is what keeps that consent informed. The design responsibility is shared: set your languages and translated strings in CookieBeam, and build your banner's layout to flex, so the copy it serves fits the space you gave it.

Related guides

Continue with Multi-Language Cookie Banner Localization, One Banner, Every Region, and Mobile Cookie Banner Optimization, where long translations bite hardest. For the underlying standard, see the W3C's note on text size in translation.