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

Nếu bạn đang đọc nội dung này, tức là bạn đang sử dụng World Wide Web. Biểu mẫu của bạn có thể được những người nói các ngôn ngữ khác nhau sử dụng, những người đến 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 rằng biểu mẫu của bạn hoạt động ở nhiều ngôn ngữ

Hãy xem cách bạn có thể đảm bảo biểu mẫu của mình hoạt động với các ngôn ngữ khác nhau.

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 trong 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 trình duyệt cung cấp bản dịch của trang nếu ngôn ngữ đã xác định không phải là ngôn ngữ mặc định của trình duyệt.

<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ác công cụ tìm kiếm và trình duyệt biết về phiên bản đã dịch? Bạn có thể thêm phần tử <link> vào <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 của mình sang mọi ngôn ngữ, nhưng bạn có thể đảm bảo rằng các công cụ dịch có thể dịch nội dung đó 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, đảm bảo tất cả văn bản được xác định trong HTML và đều 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 đưa nhiều văn bản nhất có thể vào HTML.

Đảm bảo rằng biểu mẫu hoạt động được trên nhiều hệ thống chữ viết

Các ngôn ngữ khác nhau sử dụng hệ thống viết và bộ ký tự khác nhau. Một số chữ viết được viết từ trái sang phải và một số 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 hoạt động được trên nhiều hệ thống viết, bạn có thể sử dụng thuộc tính logic CSS.

Mục nhập có độ dày đường viền là 1px ở tất cả các cạnh, ngoại trừ phía bên trái có đường viền dày 4px. Bây giờ, hãy chỉnh sửa CodePen và thay đổi hệ thống ghi 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 hiện đã nằm ở phía bên phải. Đó là vì chúng tôi đã xác định biên giới bằng cách sử dụng một thuộc tính logic.

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

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

Đảm bảo rằng 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. Bạn sẽ thêm trường này vào biểu mẫu theo 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 gọi khác nhau trên thế giới: ví dụ, một số người không có họ—Vậy họ sẽ điền họ vào như thế nào họ?

Để nhập tên nhanh chóng và dễ dàng và đảm bảo mọi người đều có thể nhập tên, bất kể định dạng—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 tên của bạn có ký tự không phải ký tự Latinh, bạn có thể đã gặp vấn đề tên của bạn được báo cáo là invalid trong một số biểu mẫu. Khi hãy nhớ cho phép mọi ký tự có thể có và đừng cho rằng tên chỉ chứa ký tự Latinh.

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

Trụ sở chính của Google nằm tại 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.

Địa chỉ này bao gồm số nhà, tên 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 của bạn?

Có một cách là sử dụng thông tin đầu vào chung.

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

Kiểm tra kiến thức

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?

Có thuộc tính lang.
🎉
Có 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!
Có thuộc tính language.
Hãy thử lại!

Bạn có thể thay đổi hệ thống viết trên trang web của mình như thế nào?

Có thuộc tính direction.
Hãy thử lại!
Có thuộc tính dir.
🎉
Sử dụng các 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