Dlaczego właściwości logiczne: umiędzynarodowienie
Pozna Pan/Pani przyczyny, dla których fizyczne właściwości CSS psują układy RTL, oraz sposób, w jaki właściwości logiczne rozwiązują ten problem.
Dlaczego właściwości logiczne: umiędzynarodowienie to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 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.
Problem z właściwościami fizycznymi
Tradycyjny CSS używa kierunków fizycznych: top, right, bottom, left. Sprawdzają się one w językach pisanych od lewej do prawej (LTR), takich jak angielski, ale zawodzą w językach pisanych od prawej do lewej (RTL), takich jak arabski i hebrajski, oraz w systemach pisma pionowego, takich jak tradycyjny japoński.
Fizyczne a logiczne
Porównaj:
- Fizyczne: top, right, bottom, left — stałe względem ekranu
- Logiczne: block-start, block-end, inline-start, inline-end — zależne od trybu pisma
Osie blokowa i inline
Każdy system pisma ma:
- Oś blokową: kierunek, w którym układają się bloki tekstu (pionowy w LTR/RTL, poziomy w piśmie pionowym)
- Oś inline: kierunek przepływu tekstu w wierszu (poziomy w LTR/RTL, pionowy w piśmie pionowym)
Układ LTR a RTL
W LTR (angielski): inline-start = left, inline-end = right. W RTL (arabski): inline-start = right, inline-end = left. Właściwości logiczne automatycznie dostosowują się bez używania zapytań media ani JavaScriptu.
Rzeczywisty koszt właściwości fizycznych
Witryna napisana z użyciem właściwości fizycznych wymaga osobnego arkusza stylów z nadpisaniami dla RTL albo nadpisania każdej właściwości margin, padding, border, position i text-alignment, która powinna zmienić stronę. Podwaja to nakład pracy związany z utrzymaniem kodu.
Tryb pisma wpływa na osie
Po ustawieniu writing-mode: vertical-rl (pionowy japoński lub koreański) oś blokowa staje się pozioma, a oś inline — pionowa. Właściwości logiczne dostosowują się automatycznie.
<div class="vertical-text">縦書きテキスト Vertical Text</div>
Zastosowanie w nowoczesnym CSS
Wszystkie główne przeglądarki obsługują właściwości logiczne. Specyfikacja CSS zaleca obecnie używanie właściwości logicznych dla każdej właściwości związanej z kierunkiem, który może zmieniać się wraz z trybem pisma lub kierunkiem tekstu.
Praktyczne znaczenie
Pojedyncza baza kodu, w której poprawnie użyto właściwości logicznych, obsługuje LTR, RTL i pismo pionowe bez powielania kodu. CSS po prostu korzysta z wartości direction i writing-mode ustawionych na elemencie głównym.
dir="rtl" w HTML
Ustaw kierunek pisma w HTML, a nie tylko w CSS:
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
Stopniowe wdrażanie
Nie trzeba od razu przepisywać całego CSS. Zacznij używać właściwości logicznych w nowych komponentach. Z czasem refaktoryzuj właściwości fizyczne w komponentach należących do obszarów wrażliwych na internacjonalizację.
Właściwość CSS direction
Właściwość CSS direction (ltr lub rtl) wpływa na kierunek przepływu inline. Działa razem z writing-mode, aby określić pełny kontekst systemu pisma elementu.
Szybkie sprawdzenie
Dlaczego fizyczne właściwości CSS, takie jak margin-left, powodują problemy w układach RTL?
Podsumowanie
Logiczne właściwości CSS używają modelu blokowego i inline zamiast fizycznych kierunków top/right/bottom/left. Dzięki temu jeden arkusz stylów może działać w systemach LTR, RTL i w piśmie pionowym. Właściwości direction i writing-mode definiują kontekst, do którego właściwości logiczne automatycznie się dostosowują.
Często zadawane pytania
Czy lekcja „Dlaczego właściwości logiczne: umiędzynarodowienie” jest bezpłatna?
Tak — pełny tekst „Dlaczego właściwości logiczne: umiędzynarodowienie” 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 „Dlaczego właściwości logiczne: umiędzynarodowienie”?
Pozna Pan/Pani przyczyny, dla których fizyczne właściwości CSS psują układy RTL, oraz sposób, w jaki właściwości logiczne rozwiązują ten problem. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Dlaczego właściwości logiczne: umiędzynarodowienie”?
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