World Wide Web dành cho tất cả mọi người trên thế giới—ngay trên tên gọi! Điều đó có nghĩa là trang web của bạn có thể truy cập được cho bất kỳ ai có quyền truy cập vào Internet, bất kể họ ở đâu, họ đang sử dụng thiết bị nào hay họ nói ngôn ngữ gì.
Mục tiêu của thiết kế đáp ứng là cung cấp nội dung của bạn cho mọi người. Việc áp dụng cùng một triết lý đó vào ngôn ngữ của con người chính là động lực thúc đẩy quá trình quốc tế hoá — việc chuẩn bị nội dung và thiết kế của bạn cho đối tượng quốc tế.
Tính chất logic
Tiếng Anh được viết từ trái sang phải và trên xuống dưới, nhưng không phải tất cả các ngôn ngữ đều đượ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 và một số kiểu chữ tiếng Nhật được đọc theo chiều dọc thay vì chiều ngang. Để phù hợp với các chế độ viết này, các thuộc tính logic được đưa vào CSS.
Nếu viết CSS, bạn có thể đã sử dụng các từ khoá định hướng như "trái", "phải", "trên cùng" và "dưới cùng". Những từ khoá đó đề cập đến bố cục thực tế trên thiết bị của người dùng.
Mặt khác, Thuộc tính logic tham chiếu đến các cạnh của hộp vì 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 tương ứng. Đó không phải là trường hợp với các thuộc tính định hướng.
Trong khi thuộc tính hướng margin-left luôn chỉ lề ở bên trái hộp nội dung,
thuộc tính logic margin-inline-start đề cập đến lề ở bên trái hộp nội dung bằng ngôn ngữ đọc từ trái sang phải
và lề ở bên phải hộp nội dung theo ngôn ngữ đọc 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 định hướng. Thay vào đó, hãy dùng các thuộc tính logic.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
Khi CSS có giá trị chiều cụ thể như left hoặc right, thì sẽ có một thuộc tính logic tương ứng. Trước đây, chúng tôi có margin-left thì giờ đây chúng tôi cũng có margin-inline-start.
Trong một ngôn ngữ như tiếng Anh mà 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 mà văn bản được viết từ trên xuống dưới,
block-start tương ứng với "trên" và block-end tương ứng với "dưới".
Nếu sử dụng thuộc tính logic trong CSS, bạn có thể sử dụng cùng một biểu định kiểu cho các 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 trên, thiết kế của bạn sẽ vẫn được điều chỉnh cho phù hợp. Bạn không cần 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. Tức là thiết kế của bạn có thể tiếp cận được nhiều người hơn mà bạn không phải tốn thời gian tạo các thiết kế riêng biệt cho mọi 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 bạn nghĩ về inline-start và block-start thay vì left và top thì bạn sẽ thấy các kỹ thuật hiện đại này dễ hiểu hơn.
Lấy một mẫu chung như biểu tượng bên cạnh văn bản nào đó hoặc nhãn bên cạnh trường biểu mẫu. Thay vì nghĩ rằng "nhãn nên có lề ở bên phải", hãy nghĩ rằng "nhãn phải có lề ở cuối trục cùng dòng".
label {
margin-right: 0.5em;
}
label {
margin-inline-end: 0.5em;
}
Nếu trang đó được dịch sang ngôn ngữ đọc từ phải sang trái,
thì bạn không cần cập nhật kiểu.
Bạn có thể bắt chước hiệu ứng của việc xem các trang của mình bằng ngôn ngữ đọc 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ị của ltr có nghĩa là "từ trái sang phải". Giá trị "rtl" có nghĩa là "phải sang trái".
Nếu bạn muốn thử nghiệm tất cả các phép hoán vị của hướng tài liệu (Trục khối) và chế độ viết (Trục cùng dòng), sau đây là bản minh hoạ mang tính tương tác.
Xác định ngôn ngữ trang
Bạn nên xác định ngôn ngữ trên trang của mình bằng cách sử dụng thuộc tính lang trên phần tử html.
<html lang="en">
Ví dụ đó là về một trang bằng tiếng Anh. Bạn có thể mô tả cụ thể hơn nữa. Dưới đây là cách bạn khai báo rằng một trang sử dụng tiếng Anh (Mỹ):
<html lang="en-us">
Việc khai báo ngôn ngữ của tài liệu rất hữu ích cho các công cụ tìm kiếm. Điều 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. Bằng cách cung cấp siêu dữ liệu ngôn ngữ, bạn đang giúp các loại trình tổng hợp giọng nói này phát âm chính xác nội dung của mình.
Thuộc tính lang có thể thuộc mọi phần tử HTML, chứ không chỉ html. Nếu bạn chuyển đổi ngôn ngữ trong trang web của mình, hãy thể hiện sự thay đổi đó.
Trong trường hợp này, có một từ bằng 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 tên là hreflang mà bạn có thể sử dụng cho đường liên kết.
hreflang nhận 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 bằng tiếng Đức, hãy liên kết tới 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.
Ở đây, văn bản "Phiên bản Deutsche" được đánh dấu là bằng tiếng Đức và đường liên kết đến điểm đến 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. Nội dung này sẽ được chuyển vào 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ể ở trên bất kỳ phần tử nào, 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 bạn thiết kế trang web sẽ được dịch sang các ngôn ngữ và chế độ viết khác, hãy nghĩ về các yếu tố sau:
- Một số ngôn ngữ (như tiếng Đức) có cách sử dụng phổ biến đối với các từ dài. Giao diện của bạn cần phải thích ứng với những từ này, vì vậy, tránh thiết kế các cột hẹp. Bạn cũng có thể sử dụng CSS để tạo dấu gạch nối.
- Đảm bảo giá trị
line-heightcủa bạn có 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 đẹp mắt bằng tiếng Anh có thể chồng chéo lên nhau trong một ngôn ngữ khác. - Nếu bạn đang sử dụng phông chữ web, hãy đảm bảo phông chữ đó có phạm vi ký tự đủ rộng để bao gồm các ngôn ngữ bạn sẽ dịch sang.
- Đừng tạo hình ảnh có chứa văn bản. Nếu làm vậy, các em 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 sử 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 cho việc quốc tế hoá.
Tương tự, thuộc tính logic giúp CSS của bạn dễ thích ứng hơn.
Nếu đã quen suy nghĩ về top, bottom, left và right, thì bạn có thể gặp khó khăn khi nghĩ về block start, block end, inline start và inline end.
Nhưng nó xứng đáng. Thuộc tính logic là chìa khoá để tạo bố cục thực sự thích ứng.
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á.
Trong tiếng Anh, cạnh right của một hộp, theo logic thì là cạnh nào?
block-starttopblock-endbottominline-startleftinline-endBạn nên thêm thuộc tính nào vào HTML để HTML có ý nghĩa hơn cho 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 macro.