Skip to content

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.