RTL có nghĩa là từ phải sang trái. Chỉ một vài ngôn ngữ trên thế giới sử dụng hướng văn bản RTL, nhưng các ngôn ngữ này bao phủ hơn một tỷ người. Việc thêm hỗ trợ RTL cho giao diện của bạn rất đơn giản và có thể làm tăng đáng kể thị trường của nó.
Dưới đây là hai trang, một trang theo hướng RTL và một trang theo hướng LTR (bình thường):
| Tiếng Anh – LTR | Tiếng Do Thái – RTL |
|---|---|
 |
 |
Bạn có thể thấy mọi thứ trong trang RTL dường như bị ‘lật’ theo chiều ngang. Nó giống như việc nhìn vào trang LTR ‘thông thường’ qua một tấm gương. Việc tạo ra hình ảnh phản chiếu này thực sự khá dễ dàng. Thuộc tính hướng ‘dir’ trong CSS sẽ thực hiện phần lớn công việc và bạn chỉ cần vá một vài chỗ.
Tải một tệp CSS khác cho các ngôn ngữ RTL
WordPress biết ngôn ngữ nào có luồng RTL và nó giúp bạn dễ dàng tùy chỉnh bố cục của chúng. Tạo một tệp rtl.css mới và đặt nó vào thư mục gốc của giao diện của bạn.
WordPress sẽ tải tệp rtl.css sau khi nó tải tệp styles.css thông thường, vì vậy tệp CSS RTL chỉ cần ghi đè các thuộc tính cần thay đổi. Điều này có nghĩa là tệp rtl.css thường khá nhỏ đối với hầu hết các giao diện.
Đặt hướng trang thành RTL
Thuộc tính ‘direction’ trong CSS cho trình duyệt biết hướng của trang. Đối với các ngôn ngữ RTL, bạn muốn đặt nó thành ‘rtl’. Có một thuộc tính ‘ma thuật’ khác mà bạn nên đặt để hiển thị RTL phù hợp. Nó được gọi là ‘unicode-bidi’. Thuộc tính ‘ma thuật’ đó khá đơn giản để hiểu khi bạn đã quen với việc viết bằng RTL. Nó kiểm soát cách các ký tự được hiển thị bên trong dòng.
Để hiển thị RTL phù hợp, hãy thêm đoạn sau vào bộ chọn .body:
{
direction:rtl;
unicode-bidi:embed;
}
Và bạn đã hoàn tất! Giao diện của bạn hiện hiển thị bằng RTL. Gần như vậy. Hai câu lệnh này sẽ làm cho hầu hết trang trông chính xác. Bây giờ, bạn cần xử lý các ngoại lệ.
Lật hướng văn bản, float và clear
Mọi vị trí trong CSS, nơi bạn đặt hướng văn bản và các phần tử float, đều cần được chú ý thủ công.
Tìm tất cả các bộ chọn cho text-align, float và clear. Nếu bất kỳ bộ chọn nào trong số này chỉ định một hướng, hãy lật giữa ‘right’ thành ‘left’. Hãy nhớ hình ảnh phản chiếu mà chúng ta đang cố gắng đạt được và nó sẽ giúp việc hiểu sự chuyển đổi này dễ dàng hơn.
Các đồ họa biểu thị hướng
Một điều khác cần chú ý là các đồ họa có ý nghĩa ‘hướng’. Ví dụ: nếu bạn đang tạo một slideshow, bạn có thể có các mũi tên cho các mục tiếp theo và trước đó. Hãy nhớ rằng trang web của bạn sẽ xuất hiện qua một tấm gương trong các ngôn ngữ RTL, vì vậy bạn cũng nên lật các đồ họa chỉ hướng. Nếu bạn đang sử dụng mũi tên chỉ sang phải cho ‘tiếp theo’ trong LTR, bạn nên cung cấp mũi tên chỉ sang trái cho ‘tiếp theo’ trong RTL.
Lựa chọn phông chữ tùy chỉnh
Ngôn ngữ RTL không có cùng phông chữ với các ngôn ngữ LTR. Nếu bạn đang sử dụng các phông chữ đẹp mắt và bố cục giao diện của bạn phụ thuộc vào chúng, bạn nên tìm các phông chữ thay thế cho các ngôn ngữ này. Nếu bạn chọn một phông chữ không tồn tại trong ngôn ngữ RTL, trình duyệt sẽ quay lại những gì nó biết. Tốt hơn là bạn nên chỉ định các phông chữ hiện có thay thế mà bạn thích.
Nếu bạn sử dụng các phông chữ web tiêu chuẩn, bạn sẽ ổn.
Cách kiểm tra giao diện của bạn bằng RTL
Khi bạn đang phát triển tệp CSS RTL của mình, bạn luôn nên kiểm tra những gì mình đang làm.
- Thay đổi ngôn ngữ trong tệp wp-config.php sang ngôn ngữ đó. Nếu bạn đang sử dụng WPML, chỉ cần thêm một ngôn ngữ RTL vào trang web của bạn.
Thêm ngôn ngữ RTL - Dịch các văn bản được mã hóa cứng của giao diện của bạn (ít nhất là những văn bản ở giao diện người dùng) sang ngôn ngữ đó. WPML cho phép bạn làm điều đó bằng cách sử dụng module Dịch chuỗi.
Dịch các văn bản của giao diện - Lấy nội dung mẫu bằng ngôn ngữ đó. Để dễ dàng chỉnh sửa bằng RTL trong trang quản trị WordPress, hãy truy cập vào hồ sơ của bạn, cuộn đến cài đặt ngôn ngữ quản trị và đặt ngôn ngữ giống với ngôn ngữ chỉnh sửa.
Chỉnh sửa nội dung ở chế độ RTL
Bạn không biết ngôn ngữ RTL nào? Chỉ cần sử dụng Google Translate. Bản dịch phần lớn sẽ vô nghĩa, nhưng cho mục đích phát triển CSS, điều đó là ổn.
Bây giờ, hãy xem qua các loại nội dung khác nhau trên trang web của bạn. Đảm bảo bao gồm các bài viết, trang, trang chủ và bất kỳ nội dung tùy chỉnh nào bạn tạo.
Để có kết quả tốt nhất, hãy tìm một người nói ngôn ngữ đó và nhờ họ kiểm tra tính hợp lý giúp bạn. Người bạn nói ngôn ngữ RTL của bạn sẽ nắm bắt được 5% vấn đề còn lại mà bạn sẽ bỏ lỡ. Điều này là ‘tốt nếu có’, vì vậy đừng dừng các nỗ lực RTL của bạn nếu bạn không biết ai để nhờ kiểm tra. Ngay khi bạn phát hành phiên bản hỗ trợ RTL của giao diện, bạn sẽ nhận được rất nhiều phản hồi từ khách hàng của mình. Nếu bạn thực hiện 95% nỗ lực, họ sẽ rất vui khi đóng góp các bản sửa lỗi cho 5% còn lại.
Tài liệu tặng kèm – trang quản trị giao diện của bạn bằng các ngôn ngữ RTL
Yêu cầu cơ bản để có một giao diện tương thích với RTL là giao diện người dùng (nội dung công khai) hiển thị chính xác bằng các ngôn ngữ RTL. Đây là điều cơ bản thực sự, nếu không có nó, không ai có thể sử dụng giao diện của bạn để xây dựng các trang web bằng các ngôn ngữ RTL.
Bên cạnh đó, nhiều người dùng sẽ muốn có trang quản trị WordPress bằng ngôn ngữ của họ. Điều này cũng có nghĩa là xem các màn hình quản trị của giao diện của bạn theo hướng RTL.
Cách dễ dàng để đạt được khả năng tương thích RTL này cho các màn hình quản trị của giao diện của bạn là sử dụng các lớp CSS WordPress tiêu chuẩn cho các phần tử GUI. Đúng là điều này có nghĩa là bạn không thể sử dụng các hiệu ứng CSS đẹp mắt để làm nổi bật GUI của mình. Nó cũng có nghĩa là GUI của bạn hòa trộn hoàn hảo vào trang quản trị WordPress và hiển thị chính xác ở dạng LTR / RTL.
Nếu bạn phải sử dụng CSS tùy chỉnh của mình cho các màn hình quản trị, hãy kiểm tra xem nó trông như thế nào trong ngôn ngữ RTL. Các quy tắc tương tự mà bạn tuân theo cho CSS giao diện người dùng cũng áp dụng cho back-end. Lật align, float và clear; tránh định vị tuyệt đối và chú ý đến hình ảnh.
Một tài liệu tham khảo tuyệt vời – giao diện WordPress mặc định
Xin lưu ý, tất cả các giao diện WordPress mặc định đều được điều chỉnh hoàn hảo cho các ngôn ngữ RTL. Mở giao diện mặc định và tìm tệp rtl.css. Bạn sẽ thấy những thay đổi mà nó đã thực hiện đối với CSS cho giao diện mặc định. Thông thường, những thay đổi này khá nhỏ và dễ làm theo.