Podcast CSS – 012: Właściwości logiczne .
Częstym wzorcem interfejsu użytkownika jest etykieta tekstowa z dodatkową ikoną w tekście.
Ikona znajduje się po lewej stronie tekstu i jest z nich widoczna
udostępnione przez margin-right na ikonie.
Jest jednak pewien problem,
ponieważ będzie to działać tylko wtedy, gdy pisany jest kierunkiem tekstu od lewej do prawej.
Jeśli kierunek tekstu został zmieniony na „od prawej do lewej”, czyli jak czyta się w języku arabskim, ikona zostanie umieszczona przy tekście.
Jak uwzględniasz to w usłudze porównywania cen? Właściwości logiczne umożliwiają rozwiązanie takich sytuacji. Chromebooki zapewniają wiele innych korzyści, a także bezpłatne, automatyczne wsparcie w zakresie internacjonalizacji. Pomagają stworzyć odporny i promujący integrację społeczną interfejs.
Terminologia
Właściwości fizyczne górnej, prawej, dolnej i lewej strony odnoszą się do fizycznych wymiarów widocznego obszaru. Możesz je sobie wyobrazić na mapie jako róża kompasowa. Z drugiej strony właściwości logiczne odnoszą się do krawędzi pola, ponieważ odnoszą się one 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, i daje nam o wiele większą swobodę stylizowania interfejsów.
Zablokuj przepływ
Przepływ bloków to kierunek, w którym umieszczane są bloki treści. Jeśli na przykład tekst składa się z 2 akapitów, ruch blokowy będzie wskazywać miejsce, w którym zostanie umieszczony drugi akapit. W dokumencie w języku angielskim proces blokowy odbywa się od góry do dołu. Spójrzmy na to w kontekście akapitów tekstu, które następują po sobie, od góry do dołu.
Wbudowany przepływ
Przepływ tekstu w tekście to sposób, w jaki zmienia się tekst w zdaniu.
W dokumencie w języku angielskim proces wbudowany jest w obiekt od lewej do prawej.
Jeśli chcesz zmienić język dokumentu na swojej stronie internetowej na arabski (<html lang="ar">),
wówczas proces śródtekstowy będzie odbywał się od prawej do lewej.
Tekst przepływa w kierunku określonym przez tryb zapisu w dokumencie.
Kierunek układania tekstu możesz zmienić za pomocą właściwości writing-mode.
Tę opcję można zastosować do całego dokumentu lub do poszczególnych elementów.
Względny przepływu
W przeszłości w usługach porównywania cen
Mogliśmy zastosować tylko właściwości takie jak margines tylko do kierunku ich boków.
Na przykład atrybut margin-top jest stosowany do fizycznego 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,
proces blokowania ma odpowiednie reguły dotyczące marginesów.
Rozmiary
Aby zapobiec przekroczeniu określonej szerokości lub wysokości, utwórz regułę podobną do tej:
.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.
Przy własności logicznych reguła maksymalnej szerokości i wysokości będzie wyglądać tak:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Początek i koniec
Zamiast korzystać z kierunków takich jak góra, prawo, dół i lewo, użyjemy początku i końca. Umożliwiają one rozpoczęcie blokowe, zakończenie w tekście, zakończenie bloku i uruchamianie w tekście. Pozwalają one stosować właściwości CSS, które reagują na zmiany w trybie pisania.
Aby np. wyrównać tekst do prawej strony, możesz użyć takiego kodu CSS:
p {
text-align: right;
}
Jeśli celem nie jest dopasowanie się do prawa fizycznego,
ale raczej na początku kierunku czytania,
to nie jest pomocne.
Przy wartościach logicznych bardziej przydatne są wartości start i end, które odpowiadają kierunkowi tekstu.
Reguła wyrównania tekstu wygląda teraz tak:
p {
text-align: end;
}
Odstępy i pozycjonowanie
Właściwości logiczne funkcji margin, padding i inset
pozycjonowanie elementów i określenie, jak te elementy współgrają ze sobą w różnych trybach pisania.
Właściwości związane z marginesami i dopełnieniem są nadal bezpośrednimi mapowaniami wskazówek dojazdu.
ale ich główna różnica polega na tym, że tryb pisania zmienia się wraz ze zmianą.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Zwiększa to przestrzeń w pionie przy użyciu elementu padding i wypchnie ją w lewo za pomocą parametru margin.
Właściwość top przesuwa też ją w dół.
Z odpowiednimi odpowiednikami właściwości logicznych będzie to wyglądać 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 pewnej przestrzeni wewnętrznej z parametrem padding i wypchnięcie go z elementu margin.
Właściwość inset-block przenosi ją do środka od początku bloku.
Właściwość inset-block nie jest jedyną opcją skrótów z właściwościami logicznymi.
Zasadę tę można sprecyzować,
używając skróconych wersji właściwości marginesów i dopełnienia.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Granice
Dodawanie komponentów border i border-radius można też dodawać za pomocą właściwości logicznych.
Aby dodać obramowanie u dołu i z prawej strony z promieniem prawej strony, możesz utworzyć 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 takich jak:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
Fragment end-end w polu border-end-end-radius to koniec bloku i koniec wbudowany.
Jednostki
Właściwości logiczne wprowadzają 2 nowe jednostki: vi i vb.
Jednostka vi stanowi 1% rozmiaru widocznego obszaru w kierunku treści wbudowanych.
Jej nielogiczny odpowiednik właściwości to vw.
Jednostka vb stanowi 1% widocznego obszaru w kierunku bryły.
Jej nielogiczny odpowiednik właściwości to vh.
Te jednostki są zawsze mapowane na kierunek czytania.
Jeśli na przykład chcesz, by element zajmował 80% dostępnej wbudowanej przestrzeni w widocznym obszarze,
przy użyciu jednostki vi automatycznie przełączy ten rozmiar na górną na dół, jeśli tryb pisania będzie ustawiony w pionie.
Pragmatyczne użycie właściwości logicznych
Właściwości logiczne i tryby zapisu nie służą tylko do internacjonalizacji. Dzięki nim możesz uzyskać bardziej uniwersalny interfejs.
Jeśli masz wykres, który na osi X i Y ma etykiety, tekst na etykiecie Y może być odczytywany pionowo.
Etykieta osi Y w prezentacji zawiera wartość writing-mode o wartości vertical-rl,
możesz użyć tych samych wartości margin dla obu etykiet.
Wartość margin-block-start dotyczy obu etykiet
ponieważ początek bryły znajduje się po prawej stronie osi Y i na górze dla osi X.
Boki zaczynające blok mają czerwone obramowanie, aby można je było zobaczyć.
Rozwiązywanie problemów z ikonami
Omówiliśmy właściwości logiczne, tę wiedzę można wykorzystać w rozwiązywaniu problemów projektowych.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Na prawo od elementu ikony został zastosowany margines.
Aby odstęp między ikoną a tekstem był zgodny ze wszystkimi kierunkami czytania,
należy użyć 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 się wyświetlać i będzie znajdować się w odpowiednim odstępie.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o właściwościach logicznych
Wskaż, jak podczas pisania ręką Twój nadgarstek porusza się wzdłuż której osi logicznej?
inlineblockZaznacz wszystkie elementy, które mogą skorzystać z 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 logiczna strona słowa jest podkreślona?