Độ dài chuỗi và bố cục giao diện tiếng Việt: vấn đề thường gặp
← Blog
🌏 Bản địa hóa7 phút đọc

Độ dài chuỗi và bố cục giao diện tiếng Việt: vấn đề thường gặp

💡 Chuỗi giao diện tiếng Việt dài hơn tiếng Anh 10-20%, dấu thanh xếp chồng làm tăng chiều cao dòng, và ngắt dòng theo âm tiết chứ không phải theo từ. Ba điều chỉnh kỹ thuật - mã hóa UTF-8, định dạng số theo chuẩn CLDR và container co giãn linh hoạt - giải quyết hầu hết vấn đề bố cục trước lần kiểm thử ngôn ngữ đầu tiên.

Ý chính

  • Dành thêm 10-20% không gian cho mọi container: nút, tab, mục menu và tiêu đề thẻ là những nơi đầu tiên bị tràn nội dung.
  • Đặt CSS line-height: 1.5 trở lên cho văn bản tiếng Việt; dấu thanh và dấu phụ xếp chồng cần nhiều khoảng trống dọc hơn tiếng Anh.
  • Không áp dụng word-break: keep-all cho văn bản tiếng Việt - đây là quy tắc dành cho CJK; CSS ngắt dòng theo khoảng trắng là đúng với âm tiết tiếng Việt.
  • Tiếng Việt dùng dấu chấm (.) cho phần nghìn và dấu phẩy (,) cho thập phân: 1.234,56 VND. Ngày tháng theo định dạng DD/MM/YYYY.
  • Luôn phục vụ trang tiếng Việt dưới dạng UTF-8; sai mã hóa là nguyên nhân phổ biến nhất khiến dấu bị hiển thị sai.

Tại sao chuỗi tiếng Việt dài hơn tiếng Anh?

Tiếng Việt là ngôn ngữ đơn lập và có thanh điệu, mỗi âm tiết mang cả nghĩa lẫn thanh điệu riêng. Cụm "account settings" trở thành "cài đặt tài khoản" trong tiếng Việt - bốn âm tiết, mỗi âm tiết đều có ít nhất một dấu phụ, tăng khoảng 30% số ký tự. Sự mở rộng này không đều: các từ ngắn thường dùng như "Lưu" hay "Hủy" giữ nguyên độ dài, trong khi các cụm từ mô tả mở rộng nhiều nhất.

Tác động thực tế rõ nhất ở menu, breadcrumb và nút nhấn. Một nút có width: 120px cố định dành cho "Submit" sẽ cắt mất "Gửi yêu cầu". Hãy dùng min-width kết hợp padding ngang, không dùng chiều rộng cứng. Kiểm tra 10-20 nhãn dài nhất trong tiếng Việt trên mọi kích thước màn hình trước khi bắt đầu xem xét bản dịch.

Dấu thanh xếp chồng: yêu cầu về chiều cao dòng

Tiếng Việt mở rộng bảng chữ Latin với hai lớp dấu phụ trên nguyên âm: dấu hình dạng nguyên âm (mũ ^, trăng, móc) và dấu thanh điệu (huyền, sắc, hỏi, ngã, nặng). Ký tự "ộ" mang cả dấu mũ bên trên lẫn dấu nặng bên dưới, khiến nó cao hơn và sâu hơn bất kỳ chữ tiếng Anh nào. Sự xếp chồng này ảnh hưởng đến chiều cao chữ trên và phần chìm xuống, làm thay đổi nhịp điệu dọc của toàn bộ dòng văn bản.

Giá trị line-height: 1.2 mặc định trong nhiều bộ reset CSS tiếng Anh sẽ cắt phần đỉnh của dấu thanh và phần đáy của dấu nặng trong tiếng Việt. Đặt line-height: 1.5 làm mức chuẩn cho tiếng Việt. Với ô nhập liệu và vùng văn bản, thêm padding-top và padding-bottom để tránh bị cắt. Kiểm tra hiển thị trên cả Safari (CoreText) và Android WebView - hai môi trường này xử lý dấu khác nhau.

Ngắt dòng theo âm tiết: quy tắc CSS cần biết

Tiếng Anh ngắt dòng tại ranh giới từ, tức khoảng trắng giữa các từ. Tiếng Việt cũng dùng khoảng trắng, nhưng khoảng trắng tách biệt từng âm tiết, không phải từ hoàn chỉnh. Cụm "máy tính bảng" (tablet) gồm ba token phân cách bởi khoảng trắng - bất kỳ khoảng trắng nào cũng là điểm ngắt dòng hợp lệ. W3C phân loại tiếng Việt là ngôn ngữ ngắt dòng theo âm tiết, khác với ngắt theo từ của tiếng Anh.

Đối với hầu hết chuỗi giao diện, đây là tin tốt: CSS mặc định của trình duyệt xử lý đúng việc ngắt dòng tiếng Việt mà không cần quy tắc bổ sung. Các rủi ro cụ thể cần kiểm tra: (1) áp dụng word-break: keep-all dành cho CJK sẽ chặn mọi điểm ngắt và gây tràn container; (2) container quá hẹp khiến cụm hai âm tiết bị ngắt dòng không đẹp; (3) dấu ba chấm cắt ngay giữa dấu phụ, tạo ra chuỗi không đọc được.

Thành phần giao diện nào dễ lỗi nhất?

Một số thành phần gần như luôn cần điều chỉnh khi áp dụng chuỗi tiếng Việt mà không kiểm tra trước:

  • Nút có chiều rộng cố định: chuyển từ width: 120px sang min-width: 120px kèm padding ngang.
  • Thanh tab trên điện thoại: bốn tab với nhãn như "Thông báo", "Cài đặt", "Hồ sơ", "Khám phá" sẽ tràn ở màn hình 375px. Rút ngắn nội dung, dùng icon kèm nhãn, hoặc cho phép cuộn ngang.
  • Breadcrumb và tooltip: dấu ba chấm có thể cắt thanh điệu khỏi nguyên âm, tạo ra chuỗi không đọc được. Tăng giới hạn ký tự hoặc cho phép hiển thị hai dòng.
  • Placeholder ô nhập liệu: văn bản placeholder tiếng Việt hiếm khi vừa cùng không gian với tiếng Anh. Dùng text-overflow: ellipsis hoặc rút ngắn nội dung placeholder.
  • Banner thông báo: banner một dòng tiếng Anh thường cần hai dòng trong tiếng Việt. Cho phép chiều cao động hoặc giới hạn số dòng và kiểm tra phần bị cắt.

Định dạng số, ngày tháng và tiền tệ tiếng Việt khác gì?

Dữ liệu locale vi trong Unicode CLDR định nghĩa quy ước khác với tiếng Anh Mỹ. Ký tự phân cách hàng nghìn là dấu chấm (.) và ký tự thập phân là dấu phẩy (,). Một triệu đồng được viết "1.000.000 ₫", không phải "1,000,000 VND". Ngày tháng theo thứ tự ngày/tháng/năm: "30/09/2026".

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

Không bao giờ hardcode định dạng kiểu Mỹ cho người dùng tiếng Việt. Màn hình thanh toán hiển thị "500,000 VND" (dấu phẩy phân cách hàng nghìn kiểu Anh-Mỹ) trông sai với người Việt Nam, những người quen với "500.000 ₫".

Tự xử lý hay thuê chuyên gia tiếng Việt: đánh giá thực tế

Hầu hết vấn đề bố cục và mã hóa hoàn toàn mang tính kỹ thuật, không cần kiến thức tiếng Việt để sửa. Bạn có thể tự xử lý nội bộ: khai báo UTF-8, thuộc tính lang="vi" trên thẻ HTML, line-height và kích thước container, định dạng locale theo CLDR qua Intl hoặc API nền tảng, và font-face fallback cho Latin Extended Additional (U+1E00-U+1EFF).

Chuyên gia tiếng Việt bản ngữ mang lại giá trị thực sự trong các lĩnh vực sau:

  • Lập ngân sách chuỗi trước khi dịch: chuyên gia đánh dấu những chuỗi nguồn sẽ mở rộng nhiều nhất và đề xuất các phương án tiếng Việt ngắn hơn trước khi bố cục được chốt - tiết kiệm vòng lặp chỉnh sửa.
  • Văn phong và thuật ngữ: giao diện kỹ thuật tiếng Việt dùng từ Hán-Việt trong một số ngữ cảnh và từ thuần Việt trong ngữ cảnh khác. Sự khác biệt này ảnh hưởng đến cảm nhận chuyên nghiệp của sản phẩm và máy dịch không thể phân biệt đáng tin cậy.
  • Kiểm tra phương ngữ cho ứng dụng người dùng: tiếng Việt ở miền Bắc, Trung và Nam khác nhau về từ vựng. Người kiểm tra bản ngữ ở khu vực mục tiêu sẽ phát hiện sự không phù hợp mà nhóm nội bộ bỏ qua.
  • LQA (kiểm thử chất lượng ngôn ngữ): một lần kiểm tra LQA có cấu trúc dựa trên ảnh chụp màn hình phát hiện lỗi cắt dòng, lỗi hiển thị và dấu bị cắt xén trong ngữ cảnh thực.

Để xem quy trình bản địa hóa website sang tiếng Việt, hãy tham khảo dịch vụ bản địa hóa website tiếng Việt.

Câu hỏi thường gặp

Giao diện tiếng Việt có luôn cần nhiều không gian hơn tiếng Anh không?

Không phải luôn luôn. Các từ hành động ngắn ("OK", "Lưu", "Xóa") thường có cùng độ dài hoặc ngắn hơn tiếng Anh. Rủi ro thực sự nằm ở các cụm từ mô tả trung bình (8-20 ký tự tiếng Anh) có thể mở rộng 20-40% trong tiếng Việt. Kiểm tra 10-20 nhãn dài nhất của bạn để xác định các chuỗi cụ thể gây vấn đề.

Font chữ nào phù hợp cho giao diện tiếng Việt?

Bất kỳ font OpenType nào hỗ trợ khối Latin Extended Additional (U+1E00-U+1EFF) đều hiển thị đủ ký tự tiếng Việt. Các lựa chọn an toàn phổ biến: Inter, Noto Sans, Roboto và Source Sans 3. Luôn khai báo stack dự phòng hệ thống. Trên Android, Noto Sans được cài sẵn. Trên iOS, SF Pro hỗ trợ đầy đủ. Tránh font chỉ hỗ trợ Basic Latin - chúng hiển thị dấu tiếng Việt thành hộp vuông.

Nguồn chính thức nào cung cấp định dạng số và ngày tháng tiếng Việt?

Unicode CLDR (Common Locale Data Repository) là nguồn chính thức. Locale vi định nghĩa dấu chấm là phân cách hàng nghìn, dấu phẩy là phân cách thập phân và DD/MM/YYYY cho ngày tháng. API Intl tích hợp sẵn trong trình duyệt: new Intl.NumberFormat('vi-VN').format(1234567) trả về "1.234.567" trên mọi runtime chuẩn.

Cần làm gì nếu font không hiển thị đúng dấu tiếng Việt?

Kiểm tra ba điều theo thứ tự: (1) trang đã khai báo charset="utf-8" và server gửi header đúng chưa; (2) font trong CSS có bao phủ khối Unicode U+1E00-U+1EFF chưa; (3) có font fallback trong stack chứa ký tự tiếng Việt không. Nếu thấy hộp vuông, vấn đề là thiếu hỗ trợ ký tự trong font, không phải mã hóa trang.

Nguồn

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

Báo giáWhatsApp