Làm cách nào để tạo trang web đa ngôn ngữ trong HTML?

Cung cấp nội dung bằng một số ngôn ngữ có thể thêm nhiều lớp phức tạp mới vào thiết kế web. Dịch các bài báo chỉ là trở ngại đầu tiên; . Để giúp bạn hiểu đúng, tôi sẽ đưa ra một số mẹo và chia sẻ một số kinh nghiệm của chúng tôi tại Tuts+ để sử dụng đa ngôn ngữ

1. Dịch

Mẹo đầu tiên không thực sự liên quan đến thiết kế web, nhưng nó vẫn quan trọng. Khi bạn cung cấp nội dung bằng nhiều ngôn ngữ, tốt nhất bạn không nên dựa vào phần mềm dịch thuật. Đừng hiểu sai ý tôi, các công cụ như Google Dịch rất dễ sử dụng và không ngừng cải thiện, nhưng độ chính xác của văn bản dịch lại khác nhau (thậm chí chúng tôi đã phạm lỗi này tại Tuts+ đôi khi. )

Các sáng kiến ​​như Cộng đồng Google Dịch tinh chỉnh cách thực hiện các bản dịch

Vì lý do này, bạn nên nhờ một người phiên dịch. Chọn dịch vụ trả phí như Fliplingo hoặc (tùy thuộc vào dự án của bạn) sử dụng các nền tảng dịch thuật dựa vào cộng đồng như Native. Con người có kiến ​​thức tốt hơn về từ vựng địa phương và các sắc thái tinh tế của ngôn ngữ. Tại thời điểm viết bài, phần mềm tự động chưa đạt đến điểm đó

Tại Tuts+, chúng tôi cảm ơn độc giả vì đã dịch các hướng dẫn của chúng tôi

2. Trình bày tùy chọn ngôn ngữ

Một trang web đa ngôn ngữ là vô ích nếu không có khả năng thay đổi ngôn ngữ. Thông thường, bạn sẽ thấy các trang web đa ngôn ngữ sử dụng menu thả xuống, được đặt ở trên cùng bên phải của trang (đối với nội dung từ trái sang phải, góc trên cùng bên trái sẽ phù hợp hơn). Bạn cũng có thể tìm thấy các trình chuyển đổi ở cuối trang (cách tiếp cận mà IBM. com chọn). Cho dù bạn chọn mẫu nào, hãy đảm bảo rằng trình đơn thả xuống dễ nhìn và dễ truy cập

Tại Tuts+, chúng tôi sử dụng phần tử

 dir="rtl">

0 trong chi tiết meta của bài đăng, cộng với một danh sách trong thanh bên để đảm bảo các cơ sở được đề cập

Nếu bạn chọn sử dụng một thành phần được chọn, W3C sẽ đề xuất một số nguyên tắc hữu ích

cờ

Cờ thường được sử dụng để biểu thị một ngôn ngữ. Tuy nhiên, tôi đồng ý với Gunnar Bittersmann ở chỗ tôi không thích sử dụng cờ cho trình chuyển đổi ngôn ngữ. Hãy xem xét các lý do sau

• Cờ đại diện cho các quốc gia, không phải ngôn ngữ
• Một quốc gia có thể có nhiều hơn một ngôn ngữ chính thức
• Một ngôn ngữ có thể được nói ở nhiều quốc gia
• Khách truy cập có thể không nhận ra cờ (do kích thước biểu tượng) hoặc họ có thể bị nhầm lẫn bởi các cờ tương tự

Ví dụ

https. //www. Duolingo. com

Duolingo bảo vệ việc họ sử dụng cờ Brazil vì họ dạy tiếng Bồ Đào Nha Brazil. Nhưng biến thể tiếng Tây Ban Nha của họ gần với tiếng Tây Ban Nha Mỹ Latinh hơn là Castellano (tiếng Tây Ban Nha truyền thống), vì vậy việc sử dụng các cờ ở đây không nhất quán và khó hiểu.  

Tốt nhất là đề cập đến một ngôn ngữ bằng chính ngôn ngữ của nó, ví dụ như 'Deutsch' thay vì 'German'. Thứ tự các ngôn ngữ theo thứ tự bảng chữ cái cũng sẽ hữu ích, vì vậy người dùng có thể dễ dàng tìm thấy phiên bản phù hợp. Hãy xem thanh bên của Wikipedia để lấy cảm hứng

chuyển hướng

Một số trang web chuyển hướng người dùng đến trang chủ khi họ chuyển đổi ngôn ngữ. Điều này có thể gây nhầm lẫn vì sau đó người dùng phải tìm lại trang. Để giữ cho khách truy cập của bạn hài lòng, bất cứ khi nào có thể, hãy đảm bảo rằng họ được hiển thị trên cùng một trang (được dịch) khi họ chuyển đổi ngôn ngữ

Phát hiện ngôn ngữ mặc định

Bạn muốn đặt ngôn ngữ mặc định cho khách truy cập lần đầu? . Tuy nhiên, đừng ẩn các tùy chọn khác, trong trường hợp người dùng muốn chuyển đổi

Đọc thêm trên tạp chí Smashing.

3.  Mã hóa và Phông chữ

Nội dung của bạn cần phải có thể đọc được, vì vậy, hãy đảm bảo rằng mã hóa ký tự trong phần đầu của trang được đặt chính xác

1

 charset="utf-8">

Từ W3C

“Mã hóa dựa trên Unicode chẳng hạn như UTF-8 có thể hỗ trợ nhiều ngôn ngữ và có thể chứa các trang và biểu mẫu trong bất kỳ hỗn hợp nào của các ngôn ngữ đó. ”

Sau đó xem xét các phông chữ thực tế. phông chữ web của bạn cần tương thích với tất cả các ngôn ngữ mà bạn hỗ trợ, đặc biệt đối với các ngôn ngữ không phải là tiếng Latinh. Điều này có nghĩa là phông chữ được sử dụng phải chứa tất cả các ký tự và nét chữ mà bạn thường cần. Một số ngôn ngữ bao gồm hàng trăm ký tự, làm cho các tệp phông chữ rất nặng. Do đó, hãy xem xét tinh chỉnh các nhóm ký tự mà bạn đưa vào tệp.  

Có một số trang web cung cấp phông chữ không phải ký tự Latinh, chẳng hạn như typebank. đồng. jp, và tìm kiếm nhanh trên Google sẽ giúp bạn tìm thêm các lựa chọn thay thế

https. //www. ngân hàng đánh máy. đồng. jp

Cũng có những cân nhắc về kiểu chữ khác. Đừng quên rằng một số ngôn ngữ "dài dòng" hơn và do đó chiếm nhiều dung lượng hơn. Nút 'thêm vào giỏ hàng' có thể được dịch sang tiếng Hà Lan thành 'aan winkelwagen toevoegen'. Phiên bản tiếng Anh bao gồm 11 ký tự, phiên bản tiếng Hà Lan 25, chiếm dung lượng gấp đôi. Khi không còn chỗ trống, bạn có thể thử một bản dịch khác, ít nghĩa hơn hoặc thay đổi kích thước phông chữ dựa trên ngôn ngữ

Các phông chữ không phải là tiếng Latinh khác có thể cần chiều cao dòng hoặc kích thước ký tự khác với mặc định Latinh của bạn. Ví dụ, các ký tự tiếng Trung phức tạp hơn các ký tự Latinh, có nghĩa là chúng cần đủ lớn để phân biệt rõ ràng. Những yếu tố này có thể thay đổi đáng kể hình thức của trang, vì vậy hãy ghi nhớ chúng

4. Trái sang phải và phải sang trái

Đây là điều bạn có thể không biết. các ngôn ngữ không có hướng, nhưng chữ viết mà chúng được viết thì có. Ví dụ: Azeri (do người dân Azerbaijan nói) có thể được viết bằng chữ Latinh hoặc Cyrillic, trong trường hợp đó được viết là LTR (từ trái sang phải). Ngoài ra, nó có thể được viết bằng chữ viết Ả Rập, trong trường hợp đó, nó được viết là RTL (phải sang trái)

Hầu hết các ngôn ngữ đều sử dụng các tập lệnh được viết và đọc từ trái sang phải, nhưng nếu không phải như vậy thì việc bắt chước bố cục của toàn bộ trang web sẽ rất hữu ích. Có, toàn bộ bố cục. Văn bản, hình ảnh, điều hướng, thanh bên, nút, danh sách thả xuống, thanh cuộn… đều phải được nhân đôi

Tom Maslen giải thích cách nhóm BBC sử dụng Sass để giúp họ bố trí hai chiều

Đối với nội dung, chỉ định hướng của văn bản thông qua thuộc tính

 dir="rtl">

1. Thuộc tính này được hỗ trợ bởi tất cả các trình duyệt chính. Đây là một ví dụ HTML

1

 dir="rtl">

Hoặc sử dụng CSS

1

.content {

2

  direction: rtl;  /* Right to Left */

1

0

1

1

LTR trong RTL

Một vấn đề chúng tôi gặp phải tại Tuts+ là nhúng các đoạn mã nội tuyến vào văn bản RTL (chẳng hạn như bản dịch tiếng Ả Rập, tiếng Farsi và tiếng Do Thái). Văn bản đọc RTL, nhưng mã nội tuyến phải giữ nguyên LTR. Trong ví dụ này, mã nội tuyến phải luôn là

 dir="rtl">

2

Sau bản gốc tiếng Anh, bạn có thể xem điều gì xảy ra với mã nội tuyến trong ví dụ thứ hai. Ví dụ 3 cố gắng ghi đè điều đó bằng cách chỉ định

1

 charset="utf-8">

1

2

 charset="utf-8">

3

1

0

1

1

nhưng, như bạn có thể thấy, nó có rất ít hoặc không có tác dụng. Đây là lúc tài sản 

 dir="rtl">

3 phát huy tác dụng. Được ghép nối với giá trị

 dir="rtl">

4, giá trị này giúp chúng tôi ghi đè hướng tính toán của trình duyệt cho các phần tử được nhúng. Ví dụ 4 chứng minh rằng điều này đã làm việc

1

 charset="utf-8">

7

2

 charset="utf-8">

9

1

0

1

1

1

2

1

1

5. Cấu trúc URL

Có một số cách để cấu trúc URL của các trang web đa ngôn ngữ. Mỗi lựa chọn đều có ưu điểm và nhược điểm

ccTLD

Tên miền cấp cao nhất theo mã quốc gia (ccTLD) được liên kết với một quốc gia cụ thể, chẳng hạn như. fr cho Pháp và. es cho Tây Ban Nha

ccTLD là một tín hiệu rõ ràng cho các công cụ tìm kiếm rằng một trang web đang nhắm mục tiêu người dùng ở quốc gia đó. Vị trí máy chủ không liên quan và dễ dàng tách các trang web. Nhược điểm lớn nhất là sự sẵn có của tên miền và chi phí bổ sung

Tên miền phụ + gTLD

Một số phần mở rộng tên miền không bị ràng buộc với một quốc gia hoặc khu vực. Phổ biến nhất là. com, nhưng có những tên miền cấp cao chung được sử dụng thường xuyên khác, chẳng hạn như. mạng và. tổ chức

Các gTLD này có thể được sử dụng kết hợp với tên miền phụ, chẳng hạn như fr. trang mạng. com. Thật dễ dàng để thiết lập và hầu hết các công cụ tìm kiếm đều hiểu loại nhắm mục tiêu theo địa lý này. Tuy nhiên, không phải lúc nào người dùng cũng có thể nhận ra ngôn ngữ của nội dung dựa trên URL

Thư mục con + gTLD

Thư mục con là đối tác của tên miền phụ. Chúng thường được sử dụng để cấu trúc nội dung (ví dụ trang web. com/blog hoặc trang web. com/tshirt), nhưng cũng có thể được sử dụng cho mục đích nhắm mục tiêu theo địa lý. Trong trường hợp này, chúng tôi sử dụng trang web. com/fr để cấu trúc các URL của chúng tôi

Với kỹ thuật này, mọi thứ có thể được lưu trữ trên cùng một máy chủ. Việc thiết lập rất dễ dàng và bạn có thể sử dụng Google Search Console để xác định các ngôn ngữ khác nhau. Một bất lợi là người dùng có thể không nhận ra nhắm mục tiêu theo địa lý chỉ từ URL (e. g. là webshop. com/de/ bằng tiếng Đức hay không?)

tham số URL

Cuối cùng là các tham số URL, ví dụ website. com?quoc gia=it. Các tham số URL không được khuyến nghị vì chúng khó diễn giải cho các công cụ tìm kiếm

Cá nhân tôi thích sử dụng thư mục con kết hợp với gTLD. Tên miền phụ chủ yếu được sử dụng để phân tách nội dung hoàn toàn khác. Bởi vì các trang web đa ngôn ngữ về cơ bản là bản dịch của cùng một nội dung (hầu hết thời gian), các thư mục con là một giải pháp rõ ràng

Bạn có thể sử dụng ngôn ngữ trong URL chẳng hạn

• trang mạng. com cho phiên bản tiêu chuẩn của Hoa Kỳ
• trang mạng. com/uk/ cho phiên bản Vương quốc Anh
• trang mạng. com/es/ cho du khách nói tiếng Tây Ban Nha

Hoặc kết hợp ngôn ngữ và vị trí

• trang mạng. com/en-us/ cho khách hàng nói tiếng Anh ở Hoa Kỳ
• trang mạng. com/en-uk/ cho khách hàng nói tiếng Anh ở Vương quốc Anh
• trang mạng. com/es-us/ cho khách hàng nói tiếng Tây Ban Nha ở Hoa Kỳ

Nội dung trùng lặp

Để ngăn các vấn đề về nội dung trùng lặp, tốt nhất bạn nên xác định phiên bản ưu tiên cho từng ngôn ngữ/vị trí. Chúng ta có thể sử dụng một phần tử liên kết HTML đơn giản cho việc này, cụ thể là

 dir="rtl">

5. Nhiều thẻ

 dir="rtl">

6 nên được sử dụng trên một trang;

Trên một trang web, mã đó có thể trông như thế này

1

1

5

2

1

7

1

0

1

9

Mã này cho các công cụ tìm kiếm biết ví dụ đó. com đang nhắm mục tiêu người nói tiếng Anh ở Vương quốc Anh. Nó cũng nói rằng có hai biến thể của cùng một nội dung, cụ thể là một cho Hoa Kỳ và một cho Úc

Những ý kiến ​​khác

Khi thiết kế các trang web đa ngôn ngữ, có một số điều khác cần xem xét, chẳng hạn như

ngày

Không phải mọi quốc gia đều sử dụng định dạng ngày giống nhau. Đôi khi, bạn sẽ phải chuyển đổi ngày từ lịch Gregorian sang lịch Ba Tư chẳng hạn

Mối quan tâm về đạo đức

Các quốc gia có quan điểm đạo đức khác nhau. Có bản chất văn hóa cụ thể về tình dục, hài hước, biểu tượng, v.v. dễ bị bỏ qua khi dịch một trang web. Ví dụ. ở một số quốc gia, việc hiển thị ảnh của một cặp đồng tính nam là hoàn toàn có thể chấp nhận được, trong khi các quốc gia khác có thể coi điều này là xúc phạm

Hình ảnh xác thực

Bạn có đang sử dụng hình ảnh xác thực trên trang web của mình không? . Là khách truy cập Vương quốc Anh, có thể bạn sẽ không muốn giải hình ảnh xác thực tiếng Nga

Bởi vì chúng chưa đủ khó

Số điện thoại

Giúp khách truy cập của bạn có số điện thoại trên trang web của bạn bằng cách bao gồm mã quốc gia. Bạn có thể tìm thấy danh sách tất cả các mã quốc gia trên trang này

Tiến lên và Dịch

Có nhiều cân nhắc hơn khi chuẩn bị một trang web để quốc tế hóa hoàn toàn, nhưng những gợi ý này sẽ cung cấp cho bạn cơ sở tốt để làm việc từ. Hãy cho chúng tôi biết trong các nhận xét về những mẹo khác mà bạn có về thiết kế web đa ngôn ngữ và đăng ký nhận bản tin Dự án dịch Tuts+ nếu bạn muốn nghe những gì chúng tôi đang làm

Làm cách nào tôi có thể đặt nhiều ngôn ngữ trong HTML?

Bạn có thể viết một trang web bằng nhiều ngôn ngữ không?