Cập nhật lần cuối:

Thiết kế số ký tự cho trang web đa ngôn ngữ - Cách xử lý vấn đề văn bản phình to khi dịch thuật

9 phút đọc

Khi mở rộng trang web sang nhiều ngôn ngữ, vấn đề thường bị bỏ qua nhất là "sự phình to của văn bản". Giao diện được thiết kế hoàn hảo cho tiếng Việt bị vỡ bố cục khi dịch sang tiếng Đức. Nút bấm tràn chữ trong phiên bản tiếng Phần Lan, và bố cục tiếng Ả Rập đổ vỡ với hiển thị từ phải sang trái. Bài viết này phân tích định lượng sự biến đổi số ký tự qua các bản dịch và trình bày các giải pháp cụ thể cho thiết kế UI đa ngôn ngữ.

Tỷ lệ phình to văn bản giữa các ngôn ngữ - Chuỗi càng ngắn càng phình to nhiều

Cùng một câu nhưng số ký tự cần thiết khác nhau rất nhiều tùy theo ngôn ngữ. Tuy nhiên, mức phình to của bản dịch không chỉ phụ thuộc vào ngôn ngữ đích, mà còn phụ thuộc rất lớn vào độ dài của chuỗi gốc. Hướng dẫn quốc tế hóa "Text size in translation" của W3C chỉ ra rằng văn bản gốc càng ngắn thì tỷ lệ phình to càng cao. Vì vậy, nút bấm và nhãn - những chuỗi ngắn nhất trong mọi giao diện - lại chính là nơi phình to mạnh nhất, và phải được thiết kế dựa trên giả định đó.

Hướng dẫn thiết kế của IBM được W3C dẫn lại đưa ra tỷ lệ phình to trung bình sau đây khi dịch từ tiếng Anh sang các ngôn ngữ châu Âu, phân chia theo độ dài của chuỗi gốc.

Độ dài chuỗi gốc (tiếng Anh)Tỷ lệ phình to trung bình
Tối đa 10 ký tự200-300%
11-20 ký tự180-200%
21-30 ký tự160-180%
31-50 ký tự140-160%
51-70 ký tự151-170%
Trên 70 ký tựKhoảng 130%

Về xu hướng của từng ngôn ngữ, các con số mà W3C dẫn từ một giao diện thực tế (Flickr) là tài liệu tham khảo hữu ích. Lấy tiếng Anh làm 1, tiếng Pháp và tiếng Bồ Đào Nha đạt khoảng 2,6, tiếng Đức khoảng 2,8 và tiếng Ý khoảng 3,0, trong khi tiếng Hàn chỉ khoảng 0,8 và tiếng Trung khoảng 1,2. Tất cả đều là so sánh các chuỗi giao diện ngắn - đúng nơi phình to lớn nhất - nên hãy xem đó là chỉ dẫn cho nút bấm và nhãn, chứ không phải mức trung bình cho nội dung văn bản dài.

Chiến lược thiết kế số ký tự theo loại phần tử UI

Nút bấm và CTA

Văn bản nút bấm là phần tử dễ bị ảnh hưởng nhất bởi sự phình to. Tiếng Anh "Submit" (6 ký tự) trở thành "Absenden" (8 ký tự) trong tiếng Đức và "送信" (2 ký tự) trong tiếng Nhật.

Điều hướng và Menu

Giải pháp CSS cho phình to văn bản đa ngôn ngữ

/* Cơ bản: xuống dòng và ngăn tràn */
.multilingual-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Nút: đảm bảo chiều rộng tối thiểu với khả năng co giãn */
.btn-multilingual {
  min-width: 120px;
  padding: 0.75em 1.5em;
  white-space: normal;
  text-align: center;
}

/* Điều hướng: xử lý xuống dòng khi phình to */
.nav-multilingual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Điều chỉnh font-size theo ngôn ngữ */
:lang(de) .compact-text {
  font-size: 0.9em;
}

/* Điều chỉnh line-height cho CJK */
:lang(ja), :lang(zh), :lang(ko) {
  line-height: 1.8;
}

hyphens: auto đặc biệt hiệu quả cho tiếng Anh và tiếng Đức, ngắt từ dài tại vị trí thích hợp. Tuy nhiên, tiếng Nhật và tiếng Trung không có khái niệm gạch nối, cần dùng :lang() selector để kiểm soát theo ngôn ngữ.

Quản lý số ký tự trong file i18n

Giới hạn số ký tự dựa trên chiều rộng pixel

Giới hạn dựa trên số ký tự không chính xác vì chiều rộng hiển thị thực tế khác nhau tùy font và rendering engine.

Văn bảnSố ký tựChiều rộng hiển thị (16px, sans-serif)
Count Chars (tiếng Anh)11 ký tự~88px
Zeichenzahl (tiếng Đức)11 ký tự~95px
文字数カウント (tiếng Nhật)7 ký tự~112px

Ký tự tiếng Nhật là toàn chiều rộng, nên ít ký tự hơn nhưng chiều rộng hiển thị vẫn lớn. Trong số ký tự SEO, kết quả tìm kiếm Google cũng cắt ngắn dựa trên chiều rộng pixel.

Hỗ trợ ngôn ngữ RTL (phải sang trái)

Chiến lược kiểm thử - Pseudo-Locale

Để phát hiện lỗi bố cục do phình to văn bản trước khi hoàn thành tất cả bản dịch, hãy sử dụng "pseudo-locale". Pseudo-locale là dữ liệu ngôn ngữ nhân tạo phình to văn bản gốc để kiểm thử, ví dụ chuyển "Submit" thành "[Šüƀɱîţ !!!]", tăng số ký tự 1,5-2 lần.

Các thư viện i18n chính (react-intl, vue-i18n, next-intl, v.v.) tích hợp sẵn hoặc hỗ trợ qua plugin tạo pseudo-locale. Tích hợp kiểm thử hồi quy trực quan với pseudo-locale vào CI/CD pipeline tự động phát hiện lỗi bố cục khi thêm bản dịch.

Kỹ thuật dịch thuật giảm thiểu phình to văn bản

Tổng kết

Thiết kế số ký tự cho trang web đa ngôn ngữ phụ thuộc vào thiết kế UI linh hoạt dự đoán trước sự phình to văn bản sau dịch thuật. Khi dịch từ một ngôn ngữ súc tích sang các ngôn ngữ châu Âu, cần chuẩn bị dư địa phình to rộng rãi, và hướng dẫn của cả W3C lẫn IBM đều cho thấy chuỗi càng ngắn thì tỷ lệ phình to càng cao. Kết hợp thuộc tính logic CSS, bố cục linh hoạt Flexbox, kiểm thử trước bằng pseudo-locale và ràng buộc số ký tự trong file i18n giúp tạo UI đẹp và hoạt động đúng ở mọi ngôn ngữ. Để xác minh số ký tự văn bản dịch, hãy sử dụng Bộ đếm ký tự.

Chia sẻ bài viết này

10 kỹ thuật rút gọn văn bản hiệu quả

Tìm hiểu 10 kỹ thuật đã được chứng minh để giảm số từ trong khi cải thiện sự rõ ràng. Các ví dụ trước và sau cho thấy cách cắt bỏ từ không cần thiết.

Từ ngắn nhất và dài nhất thế giới

Phân tích từ ngắn nhất và dài nhất trong các ngôn ngữ trên thế giới từ góc độ số ký tự. Từ ghép tiếng Đức, địa danh dài tiếng Thái, từ ghép dài nhất tiếng Nhật, giới hạn độ dài định danh trong ngôn ngữ lập trình và nhiều kiến thức thú vị về số ký tự.

Ký tự vô hình và sự cố ký tự ẩn

Giải thích về zero-width space, zero-width joiner, ký tự điều khiển hướng và các ký tự vô hình khác. Ảnh hưởng đến đếm ký tự, sự cố khi copy-paste, nguyên nhân bug trong lập trình và phương pháp phát hiện, loại bỏ.