Home▸Computer Science▸Mobile Localization Text-Expansion & UI Overflow Lab

Mobile Localization Text-Expansion & UI Overflow Lab

A mobile app expanding into new markets hits fixed-width buttons and labels with translated strings of very different pixel widths. Measure real text width per language against a button budget and watch overflow, ellipsis-truncation and auto-shrink strategies play out in 3D.

Computer Science3DModerate60 FPS📱 Mobile-adapted⇄ 2D version

Shipping a mobile app into new markets means every fixed-width button, tab and label now has to hold fourteen different translations of the same short phrase — and translated strings are rarely the same pixel width as the English original. This lab renders "Add to Cart" in fifteen languages as real 3D buttons, measures each one's actual rendered text width against a tunable container-width budget, and lets you compare the three strategies engineering teams use when a translation doesn't fit: visible overflow, ellipsis truncation, and auto-shrinking font size. A one-click pseudo-localization stress test pads every string to the kind of worst-case length real translations can reach, the way i18n QA teams catch these bugs before a translator ever touches the app.

⚙ Under the hood

Fifteen real translations of "Add to Cart" rendered as 3D mobile buttons, each measured against a tunable width budget with the browser's own text-metrics engine -- compare overflow, ellipsis-truncation and auto-shrink strategies and stress-test with pseudo-localization.

localizationi18nmobile UItext expansionUI overflowinternationalization

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install