Vietnamese UI String Length and Layout: The Developer's Gotcha Guide
← Blog
🌏 Localization7 min read

Vietnamese UI String Length and Layout: The Developer's Gotcha Guide

💡 Vietnamese UI strings run 10-20% longer than English, stack diacritics that raise line height, and break at syllable boundaries rather than word boundaries. UTF-8 encoding, CLDR locale formats for numbers and dates, and flexible containers resolve most layout issues before your first native QA pass.

Key takeaways

  • Budget 10-20% extra string length in all UI containers: buttons, tabs, menu items, and card titles are the first to overflow.
  • Set CSS line-height: 1.5 or higher for Vietnamese body text; stacked tone marks and diacritics require more vertical clearance than English.
  • Do not apply word-break: keep-all (a CJK rule) to Vietnamese text; the browser's default space-based wrapping is correct for Vietnamese syllable breaking.
  • Vietnamese numbers use period (.) as thousands separator and comma (,) as decimal: 1.234,56 VND. Dates are DD/MM/YYYY.
  • Always serve Vietnamese pages as UTF-8; missing or wrong encoding is the most common cause of garbled diacritics.

Why does Vietnamese text run 10-20% longer than English?

Vietnamese is an isolating, tonal language where every syllable carries both meaning and a tone mark. The phrase "account settings" becomes "cai dat tai khoan" (with full diacritics: "cài đặt tài khoản") - four syllables, each carrying at least one diacritic, adding roughly 30% more characters. That expansion is not uniform: short common labels like "Luu" (Save) or "Huy" (Cancel) stay compact, while descriptive noun phrases expand the most.

The practical impact hits buttons, menu items, and breadcrumbs hardest. A button styled with a fixed width of 120px for "Submit" clips "Gui yeu cau" (Submit request). Build containers using min-width plus comfortable horizontal padding rather than a hard width value. Test your 10-20 longest labels at every breakpoint before translation review begins.

The diacritics stack: line height and vertical space

Vietnamese extends the Latin alphabet with two modifier layers on vowels: a vowel shape mark (circumflex ^, breve, or horn) and a tone mark (grave, acute, hook above, tilde, or dot below). The character "o with circumflex and dot below" stacks both above and below its base, making it taller and deeper than any English letter. This double-stacking affects ascenders, descenders, and vertical rhythm throughout every line.

A default line-height: 1.2 - common in English UI resets - clips the top of ascent marks and the bottom of descending tone marks in Vietnamese. Set line-height: 1.5 as your Vietnamese baseline. For input fields and textarea elements, add extra padding-top and padding-bottom to avoid clipping. Test rendering in both Safari (CoreText) and Android WebView, which handle diacritic ascenders differently from each other.

Syllable-based line breaking: what it means for your CSS

English wraps at word boundaries (spaces between words). Vietnamese also uses spaces, but those spaces separate individual syllables, not complete words. The three-syllable phrase "may tinh bang" (tablet) is written as three space-separated tokens - any of those spaces is a valid line-break point. The W3C Text Layout documentation classifies Vietnamese as a syllable-based line-breaking language, distinct from English word-breaking.

For most UI strings, this is good news: the browser's default CSS wrapping handles Vietnamese correctly without any extra rules. The specific risks to test: (1) applying word-break: keep-all intended for CJK text, which blocks all space-based breaks and causes overflow on Vietnamese labels; (2) containers that are too narrow, causing awkward two-syllable splits; (3) ellipsis truncation that cuts a combining mark from its base vowel, producing unreadable fragments.

Which UI components break first?

Some components fail almost immediately when Vietnamese strings are applied without prior testing:

  • Buttons with fixed width: switch from width: 120px to min-width: 120px with horizontal padding.
  • Tab bars on mobile: four-tab navigation with labels like "Thong bao", "Cai dat", "Ho so", "Kham pha" overflows at 375px. Shorten copy, use icon+label, or allow horizontal scroll.
  • Breadcrumbs and tooltips: ellipsis truncation that cuts a tone mark off its vowel creates unreadable partial strings. Set a higher character limit or allow two lines.
  • Input placeholders: Vietnamese placeholder copy rarely fits the same space as its English equivalent. Use text-overflow: ellipsis or shorten the placeholder.
  • Notification banners: one-line banners that work in English often need two lines in Vietnamese. Allow dynamic height or set a max line count and test truncation.

How do Vietnamese number, date, and currency formats differ?

The Unicode CLDR vi locale defines a different convention from US English. The thousands separator is a period (.) and the decimal separator is a comma (,). One million VND is written "1.000.000 ₫", not "1,000,000 VND". Dates follow day/month/year order: "30/09/2026", not "09/30/2026".

Use your platform's CLDR-based locale formatter rather than hardcoding separators:

  • JavaScript: new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(1000000)
  • Android: NumberFormat.getCurrencyInstance(new Locale("vi", "VN"))
  • Swift/iOS: NumberFormatter with locale = Locale(identifier: "vi_VN")

Never hardcode US-style formatting for Vietnamese users. A payment screen that shows "500,000 VND" (English comma grouping) looks wrong to Vietnamese readers who expect "500.000 ₫".

What you can fix in code vs when a Vietnamese specialist saves you time

Most layout and encoding issues are purely technical and require no Vietnamese language knowledge to fix. You can handle these in-house without a translator: UTF-8 declaration, lang="vi" on the HTML element, line-height and container sizing, CLDR locale formatting via Intl or platform APIs, and font-face fallback for Latin Extended Additional (U+1E00-U+1EFF).

A native Vietnamese specialist adds genuine value in these specific areas:

  • Pre-translation string budgeting: a specialist flags which source strings will expand the most and can suggest shorter Vietnamese alternatives before layout freezes.
  • Register and terminology: Vietnamese tech UI uses Sino-Vietnamese terms (from Chinese-root vocabulary) in some contexts and pure-Vietnamese equivalents in others. "Phan mem" (software) vs "ung dung" (app) carry different register expectations that machine translation cannot reliably distinguish.
  • Dialect review for consumer apps: North, Central, and South Vietnamese differ in vocabulary and phrasing. A native reviewer from your target region catches mismatches that in-house teams miss.
  • LQA (linguistic quality assurance): a structured screenshot-based LQA pass catches truncation, garbling, and tone-mark clipping in context that code-only testing misses.

For a guided localization workflow for websites and web apps, see the Vietnamese website localization service.

FAQ

Does Vietnamese UI always need more space than English?

Not always. Short common actions ("OK", "Save", "Delete") are often the same length or shorter in Vietnamese. The real risk is mid-length descriptive phrases (8-20 characters in English) that expand by 20-40% in Vietnamese. Test your 10-20 longest labels to find the specific problem strings before layout freezes.

What font should I use for Vietnamese UI?

Any OpenType font covering the Latin Extended Additional block (U+1E00-U+1EFF) handles all Vietnamese characters. Common safe choices: Inter, Noto Sans, Roboto, and Source Sans 3. Always include a system fallback stack. On Android, Noto Sans is preinstalled. On iOS, SF Pro covers the full range. On Windows, Segoe UI supports Vietnamese. Avoid fonts that cover Basic Latin only - they will render Vietnamese diacritics as empty boxes.

Is Vietnamese line breaking automatic in CSS?

Yes, for most UI strings. Because Vietnamese writes spaces between syllables, the browser's default word-wrap handles line breaking correctly without extra rules. The exception is a very long technical string with no spaces - add overflow-wrap: break-word as a safety net. Do not apply word-break: keep-all (intended for CJK) to Vietnamese text.

Where is the official source for Vietnamese number and date formats?

The Unicode Common Locale Data Repository (CLDR) is the authoritative source. The vi locale defines period as thousands separator, comma as decimal separator, and DD/MM/YYYY for dates. The browser-native Intl API implements CLDR: new Intl.NumberFormat('vi-VN').format(1234567) returns "1.234.567" on any standards-compliant runtime.

Official Sources

Written by Dao Huy (Lucas), Vietnamese translator & localization specialist (EN · ZH · FR → Vietnamese). See translation services →

Get QuoteWhatsApp