Właściwości logiczne w układach RTL
Nauczy się Pan/Pani tworzyć prawdziwie dwukierunkowy układ, który automatycznie odwraca się dla arabskiego i hebrajskiego dzięki właściwościom logicznym.
Właściwości logiczne w układach RTL to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 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 CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Konfigurowanie RTL w HTML
Zadeklaruj RTL w HTML za pomocą atrybutu dir i odpowiednio dobranego atrybutu lang:
<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>
dir="rtl" w CSS
Kierunek można również ustawić w CSS — jest to przydatne podczas testowania lub dla częściowych sekcji RTL:
<div dir="rtl">هذا العنصر باتجاه RTL</div>
Testowanie przełączania LTR/RTL
Szybki test: dodaj dir="rtl" do <html>. Przy właściwościach logicznych układ powinien poprawnie odzwierciedlić się lustrzanie. Przy właściwościach fizycznych zobaczysz, co wymaga poprawy.
Co automatycznie się dostosowuje
Po ustawieniu dir="rtl" następujące elementy automatycznie zmieniają kierunek dzięki właściwościom logicznym:
- Wyrównanie tekstu (start/end)
- Marginesy i dopełnienia (inline-start/end)
- Obramowania (inline-start/end)
- Elementy pływające (inline-start/end)
- Pozycjonowanie (inset-inline-start/end)
Co NIE dostosowuje się automatycznie
Nawet w przypadku właściwości logicznych w RTL wymagają uwagi:
- Obrazy tła zawierające treści zależne od kierunku
- Ikony SVG mające znaczenie kierunkowe (strzałki, chevrony)
- Przekształcenia, takie jak
translateX()— użyjtranslateX(calc(-1 * var(--offset)))wraz z flagą kierunku - Pozycjonowanie absolutne z jawnymi wartościami w pikselach
Odbijanie ikon SVG
CSS zapewnia prosty sposób odwracania ikon kierunkowych w RTL:
<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>
Zmienna CSS uwzględniająca kierunek
Sposób wykorzystania zmiennej CSS do definiowania wartości zależnych od kierunku:
<div dir="rtl" class="drawer">Drawer</div>
Praktyczny przykład RTL
Komponent karty wykorzystujący właściwości logiczne:
<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>
font-size a RTL
Niektóre czcionki arabskie wyglądają na większe lub mniejsze przy tym samym rozmiarze w pikselach co ich łacińskie odpowiedniki. W razie potrzeby zdefiniuj font-size osobno dla każdego systemu pisma:
<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>
Narzędzia do testowania
Narzędzia deweloperskie przeglądarki mogą emulować układy dwukierunkowe. Użyj także drzewa ułatwień dostępu w Chrome, aby sprawdzić, czy kolejność odczytywania odpowiada kolejności logicznej, a nie wizualnej, w przypadku czytników ekranu.
Lista kontrolna RTL w praktyce
Lista kontrolna przeglądu RTL:
- Wszystkie marginesy i dopełnienia używają właściwości logicznych
- Wszystkie obramowania używają inline-start/end
- Wyrównanie tekstu używa start/end
- Ikony kierunkowe są odwracane za pomocą scaleX(-1)
- W razie potrzeby pozycje absolutne używają inset-inline-*
- Przewijane kontenery przewijają się od właściwej krawędzi
Szybkie sprawdzenie
Jakie przekształcenie CSS jest najprostszym sposobem odbicia kierunkowej ikony strzałki SVG w układach RTL?
Podsumowanie
Ustaw dir="rtl" na elemencie html, aby uzyskać układ RTL. Właściwości logiczne automatycznie dostosowują marginesy, dopełnienia, obramowania i wyrównanie. Wartości pikselowe w przekształceniach i pozycjonowaniu absolutnym nadal wymagają ręcznego uwzględnienia RTL. Odwracaj ikony kierunkowe za pomocą scaleX(-1). Testuj układ, przełączając dir="rtl" na elemencie głównym.
Ucz się CSS 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 „Właściwości logiczne w układach RTL” jest bezpłatna?
Tak — pełny tekst „Właściwości logiczne w układach RTL” 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 CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Właściwości logiczne w układach RTL”?
Nauczy się Pan/Pani tworzyć prawdziwie dwukierunkowy układ, który automatycznie odwraca się dla arabskiego i hebrajskiego dzięki właściwościom logicznym. Ćwiczysz CSS 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ąć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS 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 4 z 4.
Ile czasu zajmuje lekcja „Właściwości logiczne w układach RTL”?
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 CSS Academy?
Tak. Każda lekcja CSS 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
- Dlaczego właściwości logiczne: umiędzynarodowienie
- Kierunki blokowy i liniowy
- Logiczne marginesy, dopełnienia i obramowania
- Właściwości logiczne w układach RTL