Podcast o CSS – 012: Właściwości logiczne
Bardzo typowym wzorcem interfejsu jest etykieta tekstowa z ikoną elementu wbudowanego.
Ikona znajduje się po lewej stronie tekstu i ma niewielką przerwę między nimi, którą zapewnia margin-right na ikonie.
Mamy jednak problem,
bo ta funkcja działa tylko wtedy, gdy kierunek tekstu jest od lewej do prawej.
Jeśli kierunek tekstu został zmieniony na „od prawej do lewej”, czyli w przypadku języków takich jak arabskie, ikona będzie umieścić się obok tekstu.
Jak to uwzględnić w usłudze porównywania cen? Właściwości logiczne pomagają rozwiązać te problemy. Zapewniają między innymi bezpłatną, automatyczną pomoc w zakresie internacjonalizacji. Pomagają one stworzyć odporny, inkluzywny interfejs.
Terminologia
Właściwości fizyczne górnej, prawej, dolnej i lewej części odnoszą się do fizycznych wymiarów widocznego obszaru. Możesz wyobrazić sobie to jako różę kompasową na mapie. Właściwości logiczne odnoszą się natomiast do krawędzi ramki, ponieważ odnoszą się do przepływu treści. Mogą się więc zmieniać, gdy zmieni się kierunek tekstu lub tryb pisania. To duża zmiana w stosunku do stylów kierunkowych, która daje nam o wiele większą elastyczność w projektowaniu interfejsów.
Zablokuj przepływ
Przepływ bloków to kierunek, w którym są umieszczane bloki treści. Na przykład, jeśli tekst ma dwa akapity, blok tekstu zostanie umieszczony w drugim. W dokumencie angielskim blok jest pisany od góry do dołu. Myśl o tym w kontekście akapitów tekstu następujących po sobie, od góry do dołu.
Przepływ wbudowany
Przepływ w tekście to sposób, w jaki tekst przepływa w zdaniu.
W dokumencie w języku angielskim układ wbudowany jest od lewej do prawej.
Jeśli zmienisz język dokumentu swojej strony internetowej na arabski (<html lang="ar">), tekst śródtekstowy będzie wyglądał od prawej do lewej.
Tekst przesuwa się w kierunku określonym przez tryb pisania w dokumencie.
Kierunek, w którym jest rozkładany tekst, możesz zmienić za pomocą właściwości writing-mode.
Można ją zastosować do całego dokumentu lub do poszczególnych elementów.
Względne przepływu
Dawniej w CSS
mieliśmy możliwość stosowania właściwości takich jak marża tylko do kierunku ich boków.
Na przykład zapis margin-top jest stosowany do fizycznej górnej części elementu.
W przypadku właściwości logicznych margin-top zmienia się w margin-block-start.
Oznacza to, że niezależnie od języka i kierunku tekstu przepływ bloku ma odpowiednie reguły dotyczące marginesów.
Rozmiary
Aby element nie przekraczał określonej szerokości lub wysokości, napisz regułę w ten sposób:
.my-element {
max-width: 150px;
max-height: 100px;
}
Odpowiedniki zależne od przepływu to max-inline-size i max-block-size.
Możesz też używać min-block-size i min-inline-size zamiast min-height i min-width.
Po zastosowaniu właściwości logicznych reguła maksymalnej szerokości i wysokości wyglądałaby tak:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Początek i koniec
Zamiast używać kierunków takich jak góra, prawo, dół i lewo, użyj opcji początku i końca. Dzięki temu będziesz mieć możliwość bloku rozpoczęcia, zakończenia w tekście, block-end i inline-start. Pozwalają stosować właściwości CSS, które reagują na zmiany trybu pisania.
Aby na przykład wyrównać tekst do prawej, możesz użyć tego arkusza CSS:
p {
text-align: right;
}
Jeśli Twoim celem nie jest wyrównanie tekstu w kierunku czytania,
lecz do początku kierunku czytania, nie będzie to pomocne.
W przypadku wartości logicznych bardziej przydatne są wartości start i end, które odpowiadają kierunku tekstu.
Reguła wyrównania tekstu wygląda teraz tak:
p {
text-align: end;
}
Odstępy i pozycjonowanie
Właściwości logiczne margin, padding i inset ułatwiają pozycjonowanie elementów oraz określanie sposobu, w jaki wchodzą one ze sobą w interakcje w różnych trybach pisania.
Właściwości związane z marginesem i dopełnieniem wciąż stanowią bezpośrednie odwzorowanie kierunków, ale główna różnica polega na tym, że po zmianie trybu pisania zmieniają się one razem z nim.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Spowoduje to dodanie pustej przestrzeni w pionie z elementem padding i wypchnięcie jej z lewej strony za pomocą margin.
Właściwość top przesuwa ją też w dół.
W przypadku odpowiedników właściwości logicznych wyglądałoby to tak:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Spowoduje to dodanie przestrzeni w tekście z elementem padding i wypchnięcie go z elementu wiersza poleceń margin.
Właściwość inset-block przesuwa ją do wewnątrz od początku bloku.
Właściwość inset-block nie jest jedyną opcją z właściwościami logicznymi.
Regułę tę można dodatkowo zagęścić za pomocą skróconych wersji właściwości marginesu i dopełnienia.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Borders
border i border-radius można też dodać za pomocą właściwości logicznych.
Aby dodać obramowanie u dołu i z prawej strony z promieniem prawej, możesz napisać taką regułę:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
Możesz też użyć właściwości logicznych w ten sposób:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
Element end-end w border-end-end-radius to koniec bloku i elementu wbudowanego.
Jednostki
Właściwości logiczne wprowadzają 2 nowe jednostki: vi i vb.
Jednostka vi zajmuje 1% rozmiaru widocznego obszaru w kierunku linii.
Odpowiednikiem właściwości nielogicznej jest vw.
Jednostka vb zajmuje 1% widocznego obszaru w kierunku bryły.
Odpowiednikiem właściwości nielogicznej jest vh.
Te jednostki są zawsze mapowane na kierunek czytania.
Jeśli na przykład chcesz, by element zajmował 80% dostępnego obszaru wbudowanego w widoczny obszar, użycie jednostki vi automatycznie przełączy ten rozmiar z góry na dół, jeśli tryb pisania jest ustawiony w pionie.
Używanie właściwości logicznych w pragmatyczny sposób
Właściwości logiczne i tryby pisania nie służą tylko do internacjonalizacji. Dzięki nim możesz stworzyć bardziej uniwersalny interfejs.
Jeśli masz wykres z etykietami na osi X i Y, tekst na etykiecie Y powinien być czytany pionowo.
Etykieta osi Y w wersji demonstracyjnej ma writing-mode o wartości vertical-rl, dlatego możesz używać tych samych wartości margin w przypadku obu etykiet.
Wartość margin-block-start dotyczy obu etykiet, ponieważ początek bloku znajduje się po prawej stronie osi Y i u góry na osi X.
Boki na początku bloku mają czerwone obramowanie, dzięki któremu można je zobaczyć.
Rozwiązywanie problemu z ikoną
Omówiliśmy właściwości logiczne, więc tę wiedzę można wykorzystać do rozwiązania problemu projektowania.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Margines został zastosowany z prawej strony elementu ikony.
Aby odstępy między ikoną a tekstem obsługiwały cały kierunek czytania, użyj właściwości margin-inline-end.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Niezależnie od kierunku czytania ikona będzie prawidłowo umiejscowiona i odpowiednio rozmieszczona.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o właściwościach logicznych
Kiedy piszesz ręką, nadgarstek porusza się wzdłuż której logicznej osi?
inlineblockZaznacz wszystkie elementy, które mogą skorzystać na właściwości logicznych
flex-start, block-end i inline-startblock-start i inline.inline-size i max-block-size.border-end-end-radius.Która z logicznej strony słowa jest podkreślona?