Mọi người trên thế giới đều có thể truy cập vào Web – điều này thể hiện ngay trong tên gọi! Điều đó có nghĩa là trang web của bạn có thể được cung cấp cho bất kỳ ai có quyền truy cập vào Internet, bất kể họ ở đâu, đang sử dụng thiết bị nào hoặc nói ngôn ngữ nào.
Mục tiêu của thiết kế thích ứng là cung cấp nội dung của bạn cho mọi người. Việc áp dụng triết lý tương tự cho ngôn ngữ của con người là động lực thúc đẩy quá trình quốc tế hoá – chuẩn bị nội dung và thiết kế của bạn cho khán giả quốc tế.
Thuộc tính logic
Tiếng Anh được viết từ trái sang phải và từ trên xuống dưới, nhưng không phải ngôn ngữ nào cũng được viết theo cách này. Một số ngôn ngữ như tiếng Ả Rập và tiếng Do Thái đọc từ phải sang trái, còn một số kiểu chữ tiếng Nhật đọc theo chiều dọc thay vì chiều ngang. Để đáp ứng các chế độ viết này, các thuộc tính logic đã được giới thiệu trong CSS.
Nếu viết CSS, có thể bạn đã sử dụng các từ khoá chỉ hướng như "left", "right", "top" và "bottom". Những từ khoá đó đề cập đến bố cục thực tế của thiết bị người dùng.
Mặt khác, các thuộc tính logic đề cập đến các cạnh của một hộp khi chúng liên quan đến luồng nội dung. Nếu chế độ viết thay đổi, CSS được viết bằng các thuộc tính logic sẽ cập nhật cho phù hợp. Điều này không đúng với các thuộc tính chỉ hướng.
Trong khi thuộc tính định hướng margin-left luôn đề cập đến lề ở bên trái của một hộp nội dung, thì thuộc tính logic margin-inline-start đề cập đến lề ở bên trái của một hộp nội dung trong ngôn ngữ từ trái sang phải và lề ở bên phải của một hộp nội dung trong ngôn ngữ từ phải sang trái.
Để thiết kế của bạn thích ứng với nhiều chế độ viết, hãy tránh các thuộc tính chỉ hướng. Thay vào đó, hãy sử dụng các thuộc tính logic.
.byline { text-align: right; }
.byline { text-align: end; }
Khi CSS có một giá trị định hướng cụ thể như left hoặc right, sẽ có một thuộc tính logic tương ứng. Trước đây chúng ta có margin-left, giờ đây chúng ta cũng có margin-inline-start.
Trong một ngôn ngữ như tiếng Anh, nơi văn bản chảy từ trái sang phải, inline-start tương ứng với "trái" và inline-end tương ứng với "phải".
Tương tự, trong một ngôn ngữ như tiếng Anh, nơi văn bản được viết từ trên xuống dưới, block-start tương ứng với "trên cùng" và block-end tương ứng với "dưới cùng".
Nếu sử dụng các thuộc tính logic trong CSS, bạn có thể sử dụng cùng một biểu định kiểu cho bản dịch của các trang. Ngay cả khi các trang của bạn được dịch sang ngôn ngữ viết từ phải sang trái hoặc từ dưới lên, thiết kế của bạn sẽ điều chỉnh cho phù hợp. Bạn không cần phải thiết kế riêng cho từng ngôn ngữ. Bằng cách sử dụng các thuộc tính logic, thiết kế của bạn sẽ phản hồi mọi chế độ viết. Điều đó có nghĩa là thiết kế của bạn có thể tiếp cận nhiều người hơn mà bạn không cần phải tốn thời gian tạo các thiết kế riêng cho từng ngôn ngữ.
Các kỹ thuật bố cục CSS hiện đại như grid và flexbox sử dụng các thuộc tính logic theo mặc định.
Nếu nghĩ theo hướng inline-start và block-start thay vì left và top, bạn sẽ thấy những kỹ thuật hiện đại này dễ hiểu hơn.
Hãy lấy một mẫu phổ biến như biểu tượng bên cạnh một số văn bản hoặc nhãn bên cạnh một trường biểu mẫu. Thay vì nghĩ rằng "nhãn phải có lề ở bên phải", hãy nghĩ rằng "nhãn phải có lề ở cuối trục nội tuyến".
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
Nếu trang đó được dịch sang ngôn ngữ viết từ phải sang trái, thì bạn không cần cập nhật kiểu.
Bạn có thể mô phỏng hiệu ứng khi xem các trang bằng ngôn ngữ viết từ phải sang trái bằng cách sử dụng thuộc tính dir trên phần tử html.
Giá trị ltr có nghĩa là "từ trái sang phải". Giá trị "rtl" có nghĩa là "từ phải sang trái".
Nếu bạn muốn thử nghiệm tất cả các hoán vị của hướng tài liệu (trục khối) và chế độ viết (trục nội tuyến), hãy xem bản minh hoạ tương tác này.
Xác định ngôn ngữ của trang
Bạn nên xác định ngôn ngữ của trang bằng cách sử dụng thuộc tính lang trên phần tử html.
<html lang="en">
Ví dụ đó là dành cho một trang bằng tiếng Anh. Bạn có thể đưa ra yêu cầu cụ thể hơn nữa. Sau đây là cách khai báo rằng một trang đang sử dụng tiếng Anh của Hoa Kỳ:
<html lang="en-us">
Việc khai báo ngôn ngữ của tài liệu sẽ hữu ích cho các công cụ tìm kiếm. Việc này cũng hữu ích cho các công nghệ hỗ trợ như trình đọc màn hình và trợ lý thoại. Khi cung cấp siêu dữ liệu về ngôn ngữ, bạn đang giúp những loại trình tạo giọng nói này phát âm nội dung của bạn một cách chính xác.
Thuộc tính lang có thể xuất hiện trên mọi phần tử HTML, không chỉ html. Nếu bạn chuyển đổi ngôn ngữ trong trang web, hãy cho biết thay đổi đó.
Trong trường hợp này, một từ là tiếng Đức:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
Xác định ngôn ngữ của tài liệu được liên kết
Có một thuộc tính khác là hreflang mà bạn có thể sử dụng trên các đường liên kết.
hreflang sử dụng cùng ký hiệu mã ngôn ngữ như thuộc tính lang và mô tả ngôn ngữ của tài liệu được liên kết.
Nếu có bản dịch toàn bộ trang của bạn sang tiếng Đức, hãy liên kết đến bản dịch đó như sau:
<a href="/path/to/german/version" hreflang="de">German version</a>
Nếu bạn sử dụng văn bản bằng tiếng Đức để mô tả đường liên kết đến phiên bản tiếng Đức, hãy sử dụng cả hreflang và lang.
Trong ví dụ này, văn bản "Deutsche Version" được đánh dấu là bằng tiếng Đức và đường liên kết đích cũng được đánh dấu là bằng tiếng Đức:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
Bạn cũng có thể dùng thuộc tính hreflang trên phần tử link. Đoạn mã này nằm trong phần head của tài liệu:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Nhưng không giống như thuộc tính lang (có thể xuất hiện trên mọi phần tử), hreflang chỉ có thể áp dụng cho các phần tử a và link.
Cân nhắc việc quốc tế hoá trong thiết kế của bạn
Khi thiết kế những trang web sẽ được dịch sang các ngôn ngữ và chế độ viết khác, hãy cân nhắc những yếu tố sau:
- Một số ngôn ngữ, chẳng hạn như tiếng Đức, thường có các từ dài. Giao diện của bạn cần thích ứng với những từ này, vì vậy, hãy tránh thiết kế các cột hẹp. Bạn cũng có thể dùng CSS để thêm dấu gạch ngang.
- Đảm bảo rằng các giá trị
line-heightcó thể chứa các ký tự như dấu trọng âm và các dấu phụ khác. Các dòng văn bản trông ổn bằng tiếng Anh có thể bị chồng lên nhau bằng một ngôn ngữ khác. - Nếu bạn đang sử dụng một phông chữ trên web, hãy đảm bảo rằng phông chữ đó có đủ các ký tự để hỗ trợ những ngôn ngữ mà bạn sẽ dịch.
- Không tạo hình ảnh có chứa văn bản. Nếu có, bạn sẽ phải tạo hình ảnh riêng cho từng ngôn ngữ. Thay vào đó, hãy tách văn bản và hình ảnh, rồi dùng CSS để phủ văn bản lên hình ảnh.
Hướng ra quốc tế
Các thuộc tính như lang và hreflang giúp HTML của bạn có ý nghĩa hơn đối với việc quốc tế hoá.
Tương tự, các thuộc tính logic giúp CSS của bạn dễ thích ứng hơn.
Nếu bạn đã quen với việc nghĩ đến top, bottom, left và right, thì có thể bạn sẽ khó bắt đầu nghĩ đến block start, block end, inline start và inline end.
Nhưng điều đó rất đáng. Các thuộc tính logic là yếu tố chính để tạo bố cục thực sự thích ứng.
Kiểm tra kiến thức của bạn
Kiểm tra kiến thức của bạn về việc quốc tế hoá.
Trong tiếng Anh, mặt right vật lý của một hộp là mặt nào theo logic?
block-starttopblock-endbottominline-startleftinline-endBạn nên thêm thuộc tính nào vào HTML để làm cho HTML có ý nghĩa hơn đối với việc quốc tế hoá?
englishlanglanguagei18nTiếp theo, bạn sẽ tìm hiểu cách tiếp cận bố cục cấp trang, còn được gọi là bố cục vĩ mô.