dir=rtl dla tekstu pisanego od prawej do lewej
Włączanie układu RTL dla języka arabskiego, hebrajskiego i innych języków RTL
dir=rtl dla tekstu pisanego od prawej do lewej to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Działanie atrybutu dir
Atrybut dir deklaruje bazowy kierunek tekstu elementu. dir="ltr" (od lewej do prawej, domyślny w większości języków) lub dir="rtl" (od prawej do lewej, w arabskim, hebrajskim, perskim i urdu).
Ustawianie na html dla RTL w całej witrynie
W witrynach arabskich, hebrajskich, perskich i urdu należy ustawić dir="rtl" na elemencie głównym. Odwraca to domyślny przepływ każdego bloku: tekst jest wyrównywany do prawej, listy mają wcięcie z prawej, paski przewijania znajdują się po lewej, a układy automatycznie odbijają się lustrzanie w nowoczesnym CSS.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Tekst dwukierunkowy
Tekst o mieszanych kierunkach (np. arabski z osadzonymi angielskimi nazwami marek) jest automatycznie obsługiwany przez algorytm dwukierunkowości Unicode. Kierunek bazowy (określony przez dir) kontroluje rozmieszczenie jednokierunkowych segmentów na poziomie wiersza; poszczególne ciągi znaków są wyświetlane zgodnie z naturalnym kierunkiem swoich skryptów.
Logiczne właściwości CSS
Nowoczesny CSS korzysta z logicznych właściwości, które dostosowują się do kierunku: margin-inline-start (lewa strona w LTR, prawa w RTL), padding-inline-end, border-inline-start. Zastąpienie left/right przez start/end pozwala używać jednego arkusza stylów w obu kierunkach.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox i Grid dostosowują się automatycznie
Kierunek wiersza Flexboxa uwzględnia dir: w RTL elementy przepływają od prawej do lewej. Kolumny szablonu Grid również zmieniają kolejność. Oznacza to, że większość układów zbudowanych za pomocą flex lub grid działa w RTL bez dodatkowego CSS zależnego od kierunku — nowoczesne układy są niezależne od kierunku.
Ikony, które powinny się odwracać
Ikony kierunkowe (strzałka wstecz, strzałka dalej, cofanie i ponawianie) muszą odwracać się w RTL. Należy użyć CSS transform: scaleX(-1) wewnątrz [dir="rtl"] albo udostępnić osobne warianty SVG dla RTL. Ikony niezwiązane z kierunkiem (wyszukiwanie, ustawienia, koło zębate) pozostają bez zmian.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Wyrównanie tekstu
Należy preferować text-align: start zamiast text-align: left — start oznacza lewą stronę w LTR i prawą w RTL. To samo dotyczy end. Wyrównanie zależne od kierunku eliminuje klasę błędów pojawiających się podczas dodawania obsługi RTL.
Nadpisanie dir dla pojedynczego elementu
Ustawienie dir="auto" na elemencie pozwala przeglądarce wykryć kierunek na podstawie pierwszego znaku o jednoznacznym kierunku: <p dir="auto">{user.name}</p> obsługuje nazwy wprowadzane przez użytkowników, które mogą być arabskie, angielskie lub mieszane, bez specjalnego traktowania każdego przypadku.
Osadzanie tekstu dwukierunkowego
Elementy bdi (izolacja dwukierunkowa) i bdo (nadpisanie kierunku dwukierunkowego) zapewniają szczegółową kontrolę nad tym, jak algorytm dwukierunkowości traktuje konkretny tekst — jest to przydatne podczas wiernego odtwarzania danych wprowadzonych przez użytkownika lub wymuszania określonego kierunku fragmentu kodu w tekście ciągłym.
Pola formularzy
Pola input dziedziczą dir po elemencie nadrzędnym. W przypadku tekstu wprowadzanego przez użytkownika, którego kierunek może się zmieniać (np. w aplikacji czatu dla osób posługujących się różnymi językami), należy ustawić dir="auto" na poszczególnych polach, aby każde z nich było wyświetlane poprawnie na podstawie swojej zawartości.
Testowanie układów RTL
Przeglądarki pozwalają wyświetlić podgląd RTL przez tymczasowe ustawienie document.documentElement.dir = "rtl" w konsoli DevTools. Należy sprawdzić kierunek ikon, odstępy wewnętrzne i zewnętrzne, położenie paska przewijania oraz to, czy żaden element nie używa zakodowanych na stałe left/right tam, gdzie powinny być start/end.
Kierunek CSS różni się od kierunku układu
Właściwość CSS direction i atrybut HTML dir mają taki sam wpływ na większość układu. Należy preferować atrybut HTML, ponieważ odczytują go technologie wspomagające, programy pocztowe i inne narzędzia, podczas gdy właściwość CSS wpływa tylko na renderowanie w przeglądarkach.
Sprawdzenie wiedzy
Dlaczego podczas obsługi języków RTL preferuje się logiczne właściwości CSS, takie jak margin-inline-start, zamiast margin-left?
Podsumowanie
dir="rtl" na elemencie <html> odwraca bazowy kierunek w witrynach arabskich, hebrajskich, perskich i urdu. Logiczne właściwości CSS (margin-inline-start, padding-block-end) dostosowują się automatycznie. Układy Flexbox/Grid odbijają się lustrzanie bez zmian. Należy odwracać ikony kierunkowe, używać text-align: start/end oraz stosować dir="auto" dla treści użytkownika o nieznanym kierunku.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „dir=rtl dla tekstu pisanego od prawej do lewej” jest bezpłatna?
Tak — pełny tekst „dir=rtl dla tekstu pisanego od prawej do lewej” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „dir=rtl dla tekstu pisanego od prawej do lewej”?
Włączanie układu RTL dla języka arabskiego, hebrajskiego i innych języków RTL Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „dir=rtl dla tekstu pisanego od prawej do lewej”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Atrybut lang i czytniki ekranu
- dir=rtl dla tekstu pisanego od prawej do lewej
- Elementy bdi i bdo
- charset i obsługa Unicode — znaki specjalne