Home▸Computer Science▸Mobile Localization Text-Expansion & UI Overflow Lab (2D)

Mobile Localization Text-Expansion & UI Overflow Lab (2D)

A 2D canvas lab that renders fifteen real translations of 'Add to Cart' as flat mobile buttons, measures each string's actual rendered pixel width with the browser's own text-metrics engine, and lets you compare overflow, ellipsis-truncation and auto-shrink strategies against a tunable width budget, plus a live bar chart of expansion vs English and a pseudo-localization stress test.

Computer Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D 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 flat 2D 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 live bar chart tracks expansion vs English at a glance, and 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

A 2D canvas lab that renders fifteen real translations of "Add to Cart" as flat mobile buttons, measures each string's actual rendered pixel width with the browser's own text-metrics engine, and lets you compare overflow, ellipsis-truncation and auto-shrink strategies against a tunable width budget -- plus a live bar chart of expansion vs English and a pseudo-localization stress test.

localizationi18nmobile UItext expansionUI overflowinternationalization

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install