Chủ Nhật, ngày 11 tháng 9 năm 2011
Bạn đang mở rộng hoạt động ra toàn cầu và muốn trang web của mình đáp ứng được điều này. Chắc chỉ cần dịch văn bản trên trang web ra là được nhỉ? Có lẽ không đơn giản như vậy. Nhóm quản trị viên trang web của Google thường xuyên xây dựng các trang web được bản địa hóa sang hơn 40 ngôn ngữ. Vì vậy, sau đây là một số điều mà chúng tôi cân nhắc khi phát hành các trang của mình theo ngôn ngữ và khu vực khác.
(Ngay cả khi bạn cho rằng mình sẽ không gặp phải những vấn đề này vì bạn chỉ cung cấp nội dung bằng tiếng Anh, thì vẫn có thể khách truy cập không nói tiếng Anh đang sử dụng các công cụ như Google Dịch để xem nội dung bằng ngôn ngữ của họ. Lưu lượng truy cập này sẽ xuất hiện trong trang tổng quan số liệu phân tích. Qua số liệu này, bạn có thể nắm được có bao nhiêu khách truy cập không xem trang web của bạn theo chế độ bạn muốn.)
Nhiều ngôn ngữ hơn tức là nhiều mẫu HTML hơn
Chúng tôi hết sức nhấn mạnh lời khuyên này: hãy sử dụng cùng một mẫu cho tất cả phiên bản ngôn ngữ và luôn cố gắng đơn giản hoá mã HTML của mẫu.
Việc dùng chung mã HTML cho tất cả ngôn ngữ sẽ có lợi cho hoạt động bảo trì. Việc mày mò mã HTML của từng ngôn ngữ để gỡ lỗi sẽ không giúp bạn mở rộng quy mô. Hãy đảm bảo mã trên trang của bạn sạch nhất có thể và xử lý vấn đề liên quan đến tạo kiểu trong CSS. Một trong số nhiều lợi ích của việc sử dụng mã sạch là: hầu hết các công cụ dịch sẽ phân tích cú pháp những chuỗi nội dung có thể dịch được từ tài liệu HTML, công việc đó sẽ dễ dàng hơn nhiều khi HTML có cấu trúc rõ ràng và hợp lệ.
Một đoạn chuỗi nội dung có độ dài bao nhiêu?
Nếu bạn thiết kế trang web bằng cách đặt văn bản vừa vặn vào những phần tử có kích thước cố định, thì việc dịch văn bản của bạn có thể gây xáo trộn thiết kế này. Ví dụ: sau khi dịch, văn bản điều hướng bên trái có thể sẽ trở thành chuỗi văn bản dài hơn ở nhiều ngôn ngữ. Hãy tìm hiểu sự khác biệt về độ dài chuỗi của cùng nội dung giữa hai ngôn ngữ điều hướng là Tiếng Anh và Tiếng Hà Lan. Hãy đề phòng trường hợp có những tiêu đề điều hướng nằm trên nhiều dòng. Bạn có thể xử lý trường hợp này bằng cách tính toán chiều cao của dòng sao cho phù hợp (đồng thời cân nhắc chiều cao này ngay khi tạo văn bản điều hướng bằng tiếng Anh).
Độ dài từ ngữ không đều nhau có thể gây ra một số vấn đề cụ thể đối với nhãn và chế độ điều khiển của biểu mẫu. Ví dụ: nếu bố cục biểu mẫu của bạn có nhãn ở bên trái và các trường nhập dữ liệu ở bên phải, thì các chuỗi văn bản dài có thể chiếm đến hai dòng, còn các chuỗi văn bản ngắn thì trông như không liên quan đến trường nhập dữ liệu của biểu mẫu – cả hai trường hợp này đều làm hỏng thiết kế và khiến biểu mẫu khó đọc hơn. Ngoài ra, hãy cân nhắc việc thêm cách tạo kiểu riêng cho bố cục từ phải sang trái (RTL) (xem thêm ở phần sau). Vì những lý do này, chúng tôi luôn thiết kế biểu mẫu có nhãn nằm phía trên các trường nhập dữ liệu để dễ đọc, dễ tạo kiểu và giữ nguyên bố cục khi dịch ra các ngôn ngữ khác.
Ngoài ra, hãy tránh dùng cột có chiều cao cố định. Nếu bạn đang muốn sắp xếp lại bố cục bao gồm các khung nền có cùng chiều cao, thì nhiều khả năng là sau khi dịch, văn bản của bạn sẽ tràn ra ngoài những khu vực vốn chỉ đủ cao để chứa nội dung khi ở tiếng Anh. Hãy suy nghĩ xem các thành phần trên giao diện người dùng mà bạn định sử dụng trong thiết kế của mình có phù hợp trong trường hợp văn bản dài ra hoặc ngắn đi hay không, ví dụ: thẻ ngang so với dọc.
Mặt khác
Thao tác chỉnh sửa nguồn đối với HTML hai chiều có thể gây ra vấn đề vì nhiều trình chỉnh sửa chưa được xây dựng để hỗ trợ thuật toán hai chiều Unicode (tìm hiểu thêm về vấn đề này và giải pháp khắc phục). Nói ngắn gọn, mã đánh dấu của bạn có thể bị xáo trộn khi hiển thị:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
Kinh nghiệm sử dụng hằng ngày của chúng tôi cho thấy những trình chỉnh sửa sau đây hiện cung cấp các giải pháp phù hợp để chỉnh sửa hai chiều: phù hợp nhất là Coda, ngoài ra còn có Dreamweaver, IntelliJ IDEA và JEditX.
Khi thiết kế cho những ngôn ngữ có chiều từ phải sang trái, bạn có thể xây dựng hầu hết khả năng hỗ trợ mà mình cần trong CSS cốt lõi. Đồng thời, bạn có thể sử dụng thuộc tính có hướng của phần tử html (để tương thích ngược) kết hợp với một loại trong phần tử body. Như mọi khi, việc đưa mọi kiểu vào chung một biểu định kiểu chính sẽ giúp đem lại khả năng bảo trì tốt hơn.
Một số vấn đề quan trọng cần lưu ý khi tạo kiểu: mọi phần tử nổi bên phải sẽ phải nổi ở cả bên trái và ngược lại. Bạn sẽ phải ghi đè và chuyển đổi độ rộng của lề hoặc khoảng đệm bổ sung cho một cạnh của phần tử, đồng thời bạn phải đảo ngược mọi thuộc tính căn chỉnh văn bản.
Chúng tôi thường sử dụng phương pháp sau, trong đó có việc sử dụng một lớp giá trị trên thẻ body thay vì sử dụng bộ chọn CSS html[dir=rtl] vì phương thức này tương thích với các trình duyệt cũ:
Yếu tố:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
Định kiểu từ trái sang phải (mặc định):
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
Định kiểu từ phải sang trái:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
(Xem cách tạo kiểu này bằng tiếng Anh và tiếng Ả Rập.)
Một lưu ý cuối cùng về chủ đề này: trong đa số trường hợp, nội dung dành cho những trang có ngôn ngữ theo chiều từ phải sang trái sẽ xuất hiện theo cả hai chiều chứ không chỉ từ phải sang trái, vì có thể một số chuỗi sẽ phải giữ nguyên chiều từ trái sang phải – ví dụ: số điện thoại hoặc tên công ty trong tập lệnh tiếng La-tinh. Để đảm bảo trình duyệt xử lý đúng cách trong một tài liệu chủ yếu có chiều từ phải sang trái, thì bạn nên gói các chuỗi văn bản được nhúng bằng một phần tử cùng dòng. Bạn có thể thực hiện thông qua một thuộc tính có tác dụng thiết lập hướng, chẳng hạn như sau:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
Trong trường hợp không có vùng chứa HTML để nối thuộc tính dir vào (chẳng hạn như phần tử tiêu đề hoặc mã nguồn do JavaScript tạo để hiện thông báo nhắc nhở), thì bạn có thể sử dụng thuộc tính tương đương này để thiết lập hướng cho văn bản, trong đó ‫ và ‬ là các ký tự điều khiển Unicode để nhúng từ phải sang trái:
<title>‫הפוך את Google לדף הבית שלך‬</title>
Ví dụ về cách sử dụng trong mã JavaScript:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
(Để biết thêm thông tin, hãy xem bài viết của W3C về cách tạo HTML cho tiếng Ả Rập, tiếng Do Thái và các tập lệnh từ phải sang trái khác và cách viết tập lệnh từ phải sang trái.)
Tôi thấy tất cả đều trông như tiếng Hy Lạp...
Nếu trước đây bạn chưa từng làm việc với các bộ ký tự không phải chữ La-tinh (tiếng Kirin, tiếng Hy Lạp và vô số ngôn ngữ Châu Á và Ấn Độ), thì bạn có thể thấy cả trình chỉnh sửa và trình duyệt đều không hiện nội dung như mong muốn.
Hãy kiểm tra xem bạn đã thiết lập trình chỉnh sửa và mã hóa trình duyệt thành UTF-8 (khuyên dùng) hay chưa. Đồng thời, hãy cân nhắc việc thêm phần tử <span> và thuộc tính lang của phần tử html vào mẫu HTML để trình duyệt biết điều gì sẽ xảy ra khi kết xuất trang của bạn. Cách làm này đem lại thêm một lợi ích là đảm bảo rằng tất cả ký tự Unicode đều xuất hiện chính xác, giúp bạn không cần phải sử dụng các thực thể HTML như é (é), nhờ vậy tiết kiệm được số byte quý giá! Hãy xem hướng dẫn của W3C về cách mã hóa ký tự nếu bạn đang gặp khó khăn. Bài viết này giải thích chi tiết về những vấn đề như vậy.
Về việc đặt tên
Cuối cùng, chúng tôi xin giới thiệu một mẹo thiết thực về quy ước đặt tên khi tạo nhiều phiên bản ngôn ngữ. Việc áp dụng những tiêu chuẩn như mã ngôn ngữ ISO 639-1 để đặt tên sẽ giúp bạn xử lý nhiều phiên bản ngôn ngữ của cùng một tài liệu.
Việc sử dụng một tiêu chuẩn thông dụng sẽ giúp người dùng hiểu được cấu trúc trang web của bạn cũng như giúp trang web dễ duy trì hơn đối với tất cả quản trị viên đang cùng phát triển trang web đó. Đồng thời, việc sử dụng mã ngôn ngữ cho các tài sản khác của trang web (hình ảnh biểu trưng, tài liệu PDF) cũng giúp ích cho việc nhanh chóng xác định tệp.
Hãy xem các bài đăng trước đây trên Trung tâm dành cho quản trị viên trang web để nắm được lời khuyên về cấu trúc URL và các vấn đề khác xoay quanh việc xử lý các trang web đa khu vực và xử lý các trang web đa ngôn ngữ.
Trên đây là thông tin tóm tắt về những thách thức chính mà chúng tôi gặp phải hằng ngày. Nhưng chúng tôi xin đảm bảo rằng việc lập kế hoạch cũng như nỗ lực triển khai HTML có cấu trúc tốt và CSS hiệu quả chắc chắn sẽ giúp ích cho quá trình bản địa hóa!