Quốc tế hoá và bản địa hoá

Nếu bạn đang đọc thông tin này, tức là bạn đang sử dụng World Wide Web. Biểu mẫu của bạn có thể bao gồm những người nói nhiều thứ tiếng, những người từ các quốc gia khác nhau và những người có nền tảng văn hoá khác nhau. Tìm hiểu cách chuẩn bị biểu mẫu để quốc tế hoá và bản địa hoá.

Đảm bảo biểu mẫu của bạn hoạt động được ở nhiều ngôn ngữ

Hãy xem cách đảm bảo biểu mẫu phù hợp với nhiều ngôn ngữ.

Bước đầu tiên để bản địa hoá trang web của bạn là xác định thuộc tính ngôn ngữ lang trên phần tử <html>. Thuộc tính này cho phép trình đọc màn hình gọi ra cách phát âm chính xác và giúp các trình duyệt cung cấp bản dịch cho trang nếu ngôn ngữ đã xác định không phải là ngôn ngữ trình duyệt mặc định.

<html lang="en-us">

Tìm hiểu thêm về thuộc tính lang.

Giả sử bạn đã dịch một biểu mẫu sang tiếng Đức. Làm cách nào để đảm bảo công cụ tìm kiếm và trình duyệt biết về bản dịch? Bạn có thể thêm các phần tử <link> trong <head> của trang web để mô tả các phiên bản thay thế.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Giúp những người dùng nói một ngôn ngữ khác sử dụng biểu mẫu của bạn

Bạn không thể dịch biểu mẫu sang mọi ngôn ngữ, nhưng có thể đảm bảo các công cụ dịch có thể dịch biểu mẫu đó cho bạn.

Để đảm bảo công cụ dịch dịch tất cả văn bản trên biểu mẫu của bạn, hãy đảm bảo tất cả văn bản đều được xác định trong HTML và hiển thị. Một số công cụ cũng hoạt động với nội dung được xác định trong JavaScript, nhưng để cải thiện khả năng tương thích, hãy cố gắng bao gồm nhiều văn bản nhất có thể trong HTML.

Đảm bảo biểu mẫu phù hợp với nhiều hệ thống chữ viết

Mỗi ngôn ngữ sử dụng hệ thống chữ viết và bộ ký tự riêng. Một số tập lệnh được viết từ trái sang phải và một số khác được viết từ phải sang trái.

Tạo khoảng cách độc lập với hệ thống chữ viết

Để đảm bảo biểu mẫu của bạn dùng được cho nhiều hệ thống chữ viết, bạn có thể dùng các thuộc tính logic CSS.

Dữ liệu đầu vào có độ dày đường viền là 1px ở tất cả các cạnh, ngoại trừ phía bên trái, nơi đường viền dày 4px. Bây giờ, hãy chỉnh sửa CodePen và thay đổi hệ thống viết từ phải sang trái bằng cách thêm dir="rtl" vào phần tử <main>

Đường viền dày giờ đây nằm ở bên phải. Đó là vì chúng ta đã xác định đường viền bằng một thuộc tính logic.

input {
  border-inline-start-width: 4px;
}

Tìm hiểu thêm về các thuộc tính logic.

Đảm bảo biểu mẫu của bạn có thể xử lý nhiều định dạng tên

Giả sử bạn có một biểu mẫu để người dùng điền tên của họ vào biểu mẫu. Bạn sẽ thêm trường này vào biểu mẫu bằng cách nào?

Bạn có thể thêm một trường cho tên và một trường cho họ. Tuy nhiên, tên mỗi người trên thế giới sẽ khác nhau: ví dụ: một số người không có họ. Vậy làm cách nào để điền họ vào trường họ?

Để giúp việc nhập tên nhanh chóng và dễ dàng cũng như để đảm bảo mọi người đều có thể nhập tên của mình, bất kể định dạng nào, hãy sử dụng một trường biểu mẫu duy nhất cho tên bất cứ khi nào có thể.

Tìm hiểu thêm về tên cá nhân.

Nếu có một tên chứa ký tự không phải La-tinh, bạn có thể gặp phải vấn đề tên của bạn được báo cáo là invalid ở một số dạng. Khi bạn tạo biểu mẫu, hãy nhớ cho phép tất cả các ký tự có thể có – và đừng giả định rằng tên chỉ bao gồm các ký tự La-tinh.

Cho phép nhiều định dạng địa chỉ

Trụ sở chính của Google đặt tại 1600 Amphitheatre Parkway, Mountain View, CA 94043, Hoa Kỳ.

Địa chỉ này bao gồm số nhà, đường phố, thành phố, tiểu bang, mã bưu chính và quốc gia. Ở quốc gia của bạn, định dạng địa chỉ có thể hoàn toàn khác. Làm cách nào để đảm bảo mọi người đều có thể nhập địa chỉ của họ vào biểu mẫu?

Bạn có thể sử dụng dữ liệu đầu vào chung.

Tìm hiểu thêm về những cách khác để xử lý trường địa chỉ quốc tế.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về quốc tế hoá và bản địa hoá

Làm cách nào để gọi ra cách phát âm chính xác cho trình đọc màn hình?

Bằng thuộc tính lang.
🎉
Bằng thuộc tính hreflang.
Hãy thử lại!
Thêm nội dung mô tả bằng ngôn ngữ được sử dụng.
Hãy thử lại!
Bằng thuộc tính language.
Hãy thử lại!

Làm cách nào để thay đổi hệ thống chữ viết trên trang web?

Bằng thuộc tính direction.
Hãy thử lại!
Bằng thuộc tính dir.
🎉
Sử dụng thuộc tính logic CSS.
Hãy thử lại!
Sử dụng phần tử <link>.
Hãy thử lại!

Tài nguyên