2026-06-03 · Redakcja Baduno · 6 blog.readMin · Blog & Wiedza
Projektowanie RTL: Co się zmienia, gdy kierunek czytania się odwraca
Arabski i hebrajski czyta się od prawej do lewej – wywracając do góry nogami domyślne założenia projektowe. Raport z praktyki z naszego systemu projektowego.
Więcej niż odbicie lustrzane
Naiwne podejście – ‚po prostu wszystko odbić' – szybko zawodzi: liczby i łacińskie nazwy marek pozostają od lewej do prawej, symbole odtwarzacza multimediów zachowują swój kierunek, numery telefonów się łamią. Projektowanie RTL oznacza decydowanie dla każdego elementu, czy jest logiczny (zgodny z kierunkiem czytania), czy fizyczny (stały kierunkowo).
CSS: właściwości logiczne
Nowoczesna logika CSS sprawia, że RTL jest możliwy do opanowania: margin-inline-start zamiast margin-left, inset-inline-end zamiast right, text-align:start zamiast left. Kto od początku pisze logicznie, drugi kierunek czytania dostaje prawie za darmo – kto modernizuje, walczy z setkami wyjątków. Ta strona konsekwentnie używa właściwości logicznych; każda wersja RTL powstaje z tego samego arkusza stylów co niemiecka.
Typografia i gęstość
Pismo arabskie nie ma wielkich liter, inne wysokości i głębokości, a przy tym samym rozmiarze czcionki wygląda na mniejsze i gęstsze. Dobra typografia RTL wymaga własnych, specjalistycznych fontów, często o jeden-dwa punkty większego stopnia i większej interlinii. Efekty rozstrzeliwania liter, popularne w alfabecie łacińskim, nie działają w piśmie łącznym.
Testowanie z native speakerami
Żaden automatyzm nie zastąpi spojrzenia osoby, która żyje w tym piśmie: łamania wierszy w wyrazach złożonych, liczby w tekście ciągłym, mieszane kierunki w formularzach – klasy błędów są subtelne. Dlatego nasz proces kontroli zawsze obejmuje wizualny przegląd RTL, a nie tylko korektę tekstu.
Nawigacja: Gdzie logika się wywraca
W środowiskach RTL struktury nawigacyjne muszą być przemyślane na nowo. Poziomy pasek menu zaczyna się po prawej stronie, pierwsza pozycja menu jest najbardziej po lewej – kolejność pozostaje logiczna od prawej do lewej. Menu rozwijane domyślnie otwierają się w lewo dół zamiast w prawo dół, ponieważ punkt zaczepienia znajduje się po prawej stronie. Panele boczne, które w układzie LTR są umieszczone po lewej, w przypadku RTL przesuwają się na prawo. Szczególną ostrożność należy zachować w przypadku menu hamburgerowego: sama ikona (trzy poziome linie) jest neutralna kierunkowo, ale jej umiejscowienie (górny lewy vs górny prawy) musi być zmienione. Częstym błędem są podmenu, które wciąż pokazują kierunek LTR, ponieważ nie są kontrolowane przez logiczne właściwości CSS. W naszym systemie projektowym definiujemy komponenty nawigacyjne w całości za pomocą inset-inline-start/end, dzięki czemu automatycznie przełączają się między LTR a RTL. Praktyczny przykład: Nawigacja okruszkowa (breadcrumb) w trybie RTL wyświetla bieżącą stronę po lewej, a stronę główną po prawej – strzałki separatorów również muszą zmienić swój kierunek. Stosujemy tutaj CSS-content z wbudowanymi strzałkami, które w zależności od wartości dir używają innej encji.
Mieszane kierunki: Liczby i znaki
Liczby, numery telefonów, adresy e-mail oraz łacińskie nazwy marek zachowują orientację LTR, nawet jeśli otaczający tekst jest RTL. Prowadzi to do tak zwanych sekcji dwukierunkowych, w których kierunek czytania zmienia się w środku zdania. Domyślnie algorytm dwukierunkowy Unicode (Bidi) obsługuje takie mieszane teksty, ale należy upewnić się, że przełącznik kierunku jest poprawny. Użyj atrybutu dir na poziomie elementu mieszanego lub użyj znaków takich jak LRM (Left-to-Right Mark) i RLM (Right-to-Left Mark). Przykład: W hebrajskim zdaniu „Telefon: 01234 56789” ciąg liczb musi być czytany od lewej do prawej. Bez poprawnego oznaczenia przeglądarka może przerwać ciąg znaków lub wyświetlić go nieprawidłowo. W formularzach kluczowe jest, aby etykieta znajdowała się po prawej, a pole wejściowe po lewej, ponieważ użytkownik zaczyna czytać od prawej. Nasze podejście: Dla każdego elementu tekstowego z osadzonym materiałem łacińskim w szablonie RTL umieszczamy wrapper <span dir="ltr"> z końcowym LRM, aby następny znak RTL prawidłowo znalazł się na końcu.
Arabski i hebrajski czyta się od prawej do lewej – wywracając do góry nogami domyślne założenia projektowe. Raport z praktyki z naszego systemu projektowego.
Symbole: Stałe kierunkowo czy logiczne?
Ikony i piktogramy często niosą ze sobą ukryte kierunki: Strzałki do przodu wskazują w prawo, strzałki do tyłu w lewo. Muszą one zostać odwrócone w interfejsach RTL, w przeciwnym razie nawigacja będzie sprzeczna z intuicją. Jednak nie wszystkie ikony są zależne od kierunku: Trójkąt odtwarzania (play) pozostaje zawsze taki sam (ponieważ reprezentuje fizyczną akcję), podobnie ikona e-maila czy telefonu. Zasada ogólna: Kierunek logiczny (kolejność czasowa, kierunek czytania, kierunek nawigacji) musi zostać odwrócony; fizyczne lub symboliczne znaczenie – nie. W rozwoju używamy transformacji CSS dla ikon: scaleX(-1) dla wszystkich logicznie kierunkowych SVG, sterowane przez klasę [dir=rtl] .icon--directional. Dzięki temu unikamy podwójnych zasobów. Uwaga: Strzałki karuzeli, które wskazują w prawo, w trybie RTL muszą wskazywać w lewo, ponieważ „następna” strona znajduje się teraz po lewej. To samo dotyczy pasków postępu: Postęp powinien rosnąć od prawej do lewej. W naszym systemie projektowym takie komponenty są zaimplementowane z użyciem właściwości logicznych (inline-size zamiast width), dzięki czemu poziom wypełnienia automatycznie wiąże się z początkiem paska postępu.
Obrazy: co odzwierciedlać, co rysować na nowo?
Grafiki i ilustracje często zawierają symbole kulturowe lub zależne od kierunku: zegary wskazówkowe (w kontekście RTL lustrzane odbicie wydaje się normalne), uściski dłoni, osie czasu. Nie każdy obraz musi być w całości odbity – odwrócony ruch wskazówek zegara mógłby być odebrany jako nieprawidłowy, ponieważ rzeczywistość fizyczna pozostaje niezmieniona. Jednak oś czasu od lewej do prawej w kontekście RTL powinna przebiegać od prawej do lewej. Loga i obrazy marki zazwyczaj pozostają niezmienione, ponieważ podlegają ustalonej identyfikacji wizualnej. Wyzwaniem jest automatyczne dostarczanie odpowiednich obrazów. Dla każdej grafiki przechowujemy odpowiednik RTL jako osobny zasób lub używamy transformacji CSS w prostych przypadkach. W złożonych scenariuszach (np. infografiki z tekstem) konieczne jest ręczne przeprojektowanie. Nasz workflow: Projektant graficzny oznacza każdy obraz jako „neutralny kierunkowo”, „możliwy do odbicia” lub „indywidualny” w CMS. Dostarczanie odbywa się za pomocą warunku odczytującego atrybut dir elementu nadrzędnego. Przykład: Ilustracja regału z książkami w alfabecie łacińskim musiałaby zostać odbita, aby grzbiety książek znajdowały się po prawej stronie – na pierwszy rzut oka może to być zaskakujące, ale jest spójne.
SEO i hreflang: znaczniki specyficzne dla RTL
Dla wyszukiwarek prawidłowe oznakowanie języka i kierunku jest niezbędne. Oprócz atrybutu języka (lang), atrybut dir musi być ustawiony na każdej stronie, aby przeglądarka i wyszukiwarka poprawnie interpretowały kierunek czytania. Na wielojęzycznych stronach RTL oznakowanie hreflang jest szczególnie krytyczne: strona arabska (ar) musi poprawnie wskazywać na swoje niemieckie lub angielskie odpowiedniki. Błędne wpisy hreflang prowadzą do nieprawidłowego indeksowania, ponieważ Google nie wnioskuje automatycznie kierunku czytania. Ponadto warto rozważyć oddzielne mapy witryn dla wersji LTR i RTL, aby wzmocnić sygnały. Częstym błędem jest używanie ogólnych tagów bez uwzględnienia kierunku pisma. Stawiamy na dynamiczne generowanie hreflang, które z bazy językowej wyprowadza zarówno kody językowe, jak i regionalne. Dla dialektów arabskich konieczne jest regionalne zróżnicowanie, ponieważ konsumenci i algorytmy mają różne oczekiwania. Dodatkowo używamy tagu canonical, aby uniknąć niespójności między odzwierciedlonymi a nieodzwierciedlonymi treściami. Nasz przepływ pracy automatycznie sprawdza, czy atrybut dir w nagłówku HTML jest zgodny z wpisami hreflang. Arabski tekst bez dir="rtl" może być nieprawidłowo wyświetlany przez przeglądarki, co zwiększa współczynnik odrzuceń. Wydajność SEO jest zatem wpływana nie tylko przez teksty, ale także przez poprawne oznakowanie kierunku czytania.
Dostępność: Wyzwania RTL dla technologii asystujących
Potrzeby czytników ekranu i innych technologii asystujących zmieniają się wraz z kierunkiem czytania. Czytniki ekranu, takie jak JAWS czy VoiceOver, oczekują atrybutu dir, aby określić właściwą kolejność odczytywania. Jeśli go brakuje, mogą odczytać treści wielojęzyczne w niewłaściwej kolejności. Również punkty orientacyjne ARIA pozostają takie same, ale pozycja w DOM powinna idealnie podążać za kierunkiem czytania: główne menu powinno znajdować się w kodzie źródłowym przed główną treścią – w przypadku RTL oznacza to stronę prawą jako pierwszą. Kolejną kwestią są kolejności fokusu: indeksy tabulacji na stronach RTL muszą przebiegać logicznie od prawej do lewej. Używaj natywnych elementów HTML, które automatycznie dostosowują nawigację klawiaturą. Teksty alternatywne obrazów powinny być specyficzne językowo i odzwierciedlać perspektywę kultury docelowej. Przykład: grafika przedstawiająca uścisk dłoni w języku arabskim powinna być opisana jako „dwie krzyżujące się dłonie”, ponieważ konotacja kulturowa jest inna. Zalecamy przeprowadzanie audytów dostępności zarówno w widoku LTR, jak i RTL. Obejmuje to sprawdzenie kontrastów, które mogą wyglądać inaczej w typografii RTL. Nasz zespół korzysta z automatycznych narzędzi w połączeniu z ręcznymi testami przeprowadzanymi przez native speakerów, aby zapewnić inkluzywność doświadczenia użytkownika.
blog.faqT
Czy muszę odbić wszystkie obrazy, gdy tworzę wersję RTL?
Nie. Należy odbijać tylko obrazy z wyraźnym kierunkiem czytania, takie jak osie czasu, strzałki lub ciągłe diagramy. Loga, portrety, grafiki z obiektami fizycznymi (zegar, globus) pozostają niezmienione, w przeciwnym razie znaczenie zostanie zniekształcone. Decyzję podejmuj indywidualnie dla każdego przypadku.
Jak najefektywniej testować RTL w trakcie rozwoju?
Użyj narzędzi deweloperskich przeglądarki, aby ustawić atrybut dir na elemencie html na "rtl", i sprawdź każdy komponent pod kątem prawidłowego ułożenia. Rozszerz proces przeglądu kodu o dedykowane sprawdzenie RTL z udziałem native speakerów, które obejmuje wizualne nieprawidłowości i nieprawidłowe przepływy tekstu dwukierunkowego.
