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

8 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ữ

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ữ. Tiếng Việt có mật độ thông tin trung bình, và khi dịch sang một số ngôn ngữ khác, số ký tự có thể tăng đáng kể.

Ngôn ngữ đích	Tỷ lệ phình to (so với tiếng Anh)	Ví dụ: 10 ký tự tiếng Anh	Nguyên nhân chính
Tiếng Đức	1,2-1,6 lần	12-16 ký tự	Từ ghép dài, biến cách
Tiếng Pháp	1,1-1,5 lần	11-15 ký tự	Mạo từ, giới từ
Tiếng Tây Ban Nha	1,1-1,4 lần	11-14 ký tự	Chia động từ dài
Tiếng Nhật	0,5-0,7 lần	5-7 ký tự	Mật độ biểu ý của Kanji
Tiếng Trung	0,5-0,7 lần	5-7 ký tự	Chữ viết biểu ý
Tiếng Hàn	0,7-1,0 lần	7-10 ký tự	Khối âm tiết, trợ từ
Tiếng Ả Rập	0,8-1,2 lần	8-12 ký tự	Chữ viết nối, RTL
Tiếng Phần Lan	1,3-1,8 lần	13-18 ký tự	Hình thái học chắp dính

Tiếng Đức đặc biệt cần chú ý. Tiếng Đức tạo danh từ ghép thành một từ duy nhất, tạo ra các thuật ngữ như "Geschwindigkeitsbegrenzung" (giới hạn tốc độ, 26 ký tự). Nếu thiết kế nút và điều hướng không tính đến sự phình to này, bố cục chắc chắn sẽ vỡ.

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.

Sử dụng min-width + padding thay vì chiều rộng cố định
Dự trữ chiều rộng gấp 1,6 lần văn bản tiếng Anh dài nhất
Định nghĩa xử lý xuống dòng trong CSS khi văn bản vượt quá một dòng
Tránh dùng white-space: nowrap trên trang web đa ngôn ngữ

Điều hướng và Menu

Dự kiến mục điều hướng 8-15 ký tự tiếng Anh, lên đến 20+ ký tự tiếng Đức
Sử dụng Flexbox với flex-wrap: wrap cho phép tự động xuống dòng
Điều chỉnh breakpoint chuyển sang hamburger menu theo từng ngôn ngữ
Thỏa thuận trước với dịch giả về việc sử dụng viết tắt cho ngôn ngữ có tỷ lệ phình to cao

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

Ghi chú số ký tự tối đa cho mỗi key: "submitButton": "Submit" // max: 15 chars
Đặt tên key dịch bao gồm loại phần tử UI: nav.home, btn.submit, label.email
Tích hợp kiểm tra số ký tự vào CI/CD: Build thất bại khi văn bản dịch vượt quá giới hạn
Đăng ký ràng buộc độ dài trong bộ nhớ dịch (TM): Cho phép dịch giả kiểm tra giới hạn theo thời gian thực

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ản	Số 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)

Thiết lập CSS direction: rtl và unicode-bidi phù hợp
Flexbox flex-direction tự động theo thuộc tính direction
Sử dụng thuộc tính logic (margin-inline-start, padding-inline-end) cho margin và padding
Đảo ngược icon có hướng (mũi tên, tiến/lùi) nhưng không đảo logo hay số
Dùng thẻ <bdi> để cách ly hướng trong văn bản hai chiều

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

Sử dụng viết tắt: "information" thành "info", "configuration" thành "config"
Dùng động từ mệnh lệnh: "Click here to submit the form" thành đơn giản "Submit"
Bỏ mạo từ: Trong văn bản UI, "the", "a", "an" thường có thể bỏ tự nhiên
Thích ứng văn hóa: Dịch ý thay vì dịch từng chữ, tìm cách diễn đạt ngắn gọn tự nhiên
Kết hợp với icon: Thay thế một phần văn bản bằng icon để giảm số ký tự mà vẫn truyền đạt ý nghĩa

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. Lấy tiếng Anh làm chuẩn, dự kiến phình to 1,2-1,6 lần cho tiếng Đức, 1,1-1,5 lần cho tiếng Pháp, và nén 0,5-0,7 lần cho tiếng Nhật và tiếng Trung. 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ự.