Podstawowy atrybut dir
Atrybut dir z wartością 'rtl' jest podstawą każdego projektu RTL. Zwykle ustawia się go na znaczniku <html> lub <body> i wpływa na wyrównanie tekstu, domyślną kolejność komórek tabeli oraz kierunek właściwości CSS, takich jak 'text-align'. Bez tego atrybutu treść pozostaje wyrównana do lewej, co jest nienaturalne dla języków RTL. Ponadto należy nadpisać 'dir' na poziomie kontenera, gdy występują mieszane kierunki. Brak lub nieprawidłowy atrybut dir prowadzi do trudnych do odczytania układów, dlatego należy go priorytetyzować.
Odwrócony układ i logiczne właściwości CSS
Zamiast właściwości fizycznych, takich jak 'left' i 'right', należy używać logicznych właściwości CSS, takich jak 'margin-inline-start' i 'padding-inline-end'. Dostosowują się one automatycznie do kierunku pisma i eliminują konieczność ręcznego nadpisywania. Odwrócony układ oznacza, że pasek nawigacyjny zaczyna się po prawej stronie, a treść po lewej. Dzięki wartościom logicznym, takim jak 'float: inline-start' czy 'text-align: start', osiągniesz to bez zapytań o media. Nowoczesne właściwości CSS Grid i Flexbox, takie jak 'justify-content: flex-start', działają poprawnie w zależności od atrybutu dir. Zawsze testuj z rzeczywistą treścią, ponieważ właściwości logiczne nie są interpretowane jednakowo przez wszystkie przeglądarki.
Liczby i osadzony tekst łaciński
W tekstach RTL liczby i osadzone znaki łacińskie pozostają wyrównane od lewej do prawej. Stanowi to wyzwanie, ponieważ mogą zakłócać kierunek czytania. Użyj atrybutu 'unicode-bidi' lub 'direction: ltr' dla takich elementów, aby zapewnić spójne wyświetlanie. W przypadku formatów dat i liczb warto dostosować kolejność do kultury RTL. Zwróć także uwagę na układ formularzy, gdzie pola wprowadzania liczb powinny pozostać wyrównane do lewej. Staranna obsługa tego mieszanego kierunku zapobiega wizualnym przerwom i poprawia czytelność.
Czcionki i typografia
Wybór czcionki ma kluczowe znaczenie: arabski, perski i hebrajski wymagają czcionek z odpowiednim wsparciem glifów. Popularne opcje to 'Noto Naskh Arabic', 'Vazir' dla perskiego i 'Noto Sans Hebrew'. Zdefiniuj fallbacki, np. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Zwróć uwagę na odpowiednie rozmiary czcionek i odstępy między wierszami, ponieważ czcionki RTL są często węższe lub bardziej złożone. Unikaj kursywy, ponieważ w wielu pismach arabskich nie występuje. Przetestuj wygląd na różnych urządzeniach, aby upewnić się, że czcionki są poprawnie ładowane i czytelne.
Ikony i odbicie lustrzane
Ikony wskazujące kierunek (np. strzałki, symbole do przodu/do tyłu) muszą zostać odbite w układach RTL. Można to osiągnąć za pomocą transformacji CSS, takich jak 'transform: scaleX(-1)' lub przez użycie zestawów ikon, które automatycznie obsługują RTL (np. Font Awesome z atrybutem 'dir'). Symbole bez odniesienia do kierunku (np. dom, ustawienia) pozostają bez zmian. Upewnij się, że odbicie nie zniekształca semantyki. Przetestuj wszystkie ikony w widoku RTL, ponieważ niezamierzone odbicia mogą wpływać na użyteczność.
