Work / Charades / Wiki / Concepts
translated-text
Conceptverified 2026-10-30
translated-text
Never set a tight line height on text that gets translated. Devanagari and Telugu marks
sit above and below the Latin line box, and Android clips anything outside lineHeight:
leading-none/tight/snug cut Hindi text in half. global.css raises every text-*
size to at least 1.5x for the same reason. Tight leading is fine on numbers and prices only.
A label that sizes itself to its text needs numberOfLines={1}; centred multi-line text
needs self-stretch. On Android, React Native measures a shrink-wrapped Text a fraction
of a pixel narrower than it draws, so the last word wraps onto a line with no height and
silently disappears: "42% बचाएँ" drew as "42%", "Ranbir Kapoor" as "Ranbir". It is random
per string and invisible in English review, so it applies to every chip, pill, eyebrow and
button label, and to any centred block in an items-center parent. A fixed-width tile label
also gets adjustsFontSizeToFit, because Telugu runs wider than the tile.
No English literal in a component, including accessibilityLabel. Every string goes
through t(); pack names through t(packNameKey(pack)), never pack.name. A missing key
falls back to English at runtime, so lib/translate.test.ts fails on any key hi or te
lacks.