Tryby pisania i układ CSS

To nie jest artykuł o praktycznym lub kreatywnym zastosowaniu tej właściwości. Zamiast tego chcę pokazać, dlaczego zrozumienie trybów pisania jest tak ważne — nawet dla tych z nas, którzy rzadko muszą zmieniać tryb pisania strony lub komponentu. Obsługa wielu trybów pisania jest kluczem do sposobu, w jaki zostały zaprojektowane nasze nowe metody układu Flexbox i Grid Layout. Zrozumienie tego może pomóc w lepszym zrozumieniu działania tych metod układu.

Jakie są tryby pisania?

Tryb pisania dokumentu lub komponentu odnosi się do kierunku przepływu tekstu. W CSS do pracy z trybami pisania używamy właściwości writing-mode . Ta właściwość może przyjmować następujące wartości:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Jeśli czytasz ten artykuł w Smashing Magazine w języku angielskim, tryb pisania tego dokumentu to horizontal-tb , czyli pozioma góra do dołu . W języku angielskim zdania są pisane poziomo — pierwsza litera każdej linii zaczyna się od lewej.

Język, taki jak arabski, ma również tryb pisania w horizontal-tb . Jest pisany poziomo, od góry do dołu, natomiast pismo arabskie jest pisane od prawej do lewej, więc zdania w języku arabskim zaczynają się od prawej strony.

Chiński, japoński i koreański są pisane pionowo, przy czym pierwszy znak pierwszego zdania znajduje się w prawym górnym rogu. Po lewej stronie dodawane są następujące zdania. Dlatego używanym trybem pisania jest vertical-rl . Pionowy tryb pisania od prawej do lewej.

Mongolski jest również pisany pionowo, ale od lewej do prawej. Dlatego też, jeśli chcesz składać pismo mongolskie, użyj trybu pisania vertical-lr .

Pozostałe dwie wartości writing-mode są przeznaczone bardziej do celów kreatywnych niż do składu pisma pionowego. Używanie sideways-lr i sideways-rl powoduje obracanie tekstu na boki — nawet znaki zwykle pisane pionowo i pionowo. Te wartości są niestety obecnie obsługiwane tylko w Firefoksie. Poniższy CodePen pokazuje wszystkie różne wartości write writing-mode , będziesz musiał użyć Firefoksa, jeśli chcesz zobaczyć te sideways-* w akcji.

Tryby pisania mogą być używane podczas tworzenia dokumentu w języku pisanym w tym trybie pisania. Można ich również użyć twórczo, na przykład do ustawienia pionowego nagłówka z boku jakiejś treści. W tym artykule chciałbym jednak przyjrzeć się wpływowi, jaki obsługa języków pionowych i możliwość tekstu pionowego ma na układ CSS i ogólnie na cały CSS.

Zanim to zrobię — jeśli interesuje Cię używanie trybów pisania dla tekstu pionowego — oto kilka przydatnych zasobów:

• Witryna W3C Internacjonalizacja zawiera mnóstwo przydatnych informacji. Przeczytaj o skryptach RTL i tekście pionowym.
• Jen Simmons napisała doskonały artykuł o trybach pisania CSS, który zawiera również kilka przykładów z drukowania tych trybów w użyciu.
• Myśli o świecie i naszych systemach pisma - Chen Hui Jing
• Powrót do pionowego składu tekstu z trybem pisania — Chen Hui Jing
• Właściwość trybu pisania na MDN

Wymiary bloku i wbudowane

Kiedy zmieniamy tryb pisania dokumentu, zmieniamy kierunek przepływu bloków . Dlatego szybko staje się dla nas bardzo przydatne zrozumienie, co oznacza blok i inline.

Jedną z pierwszych rzeczy, których dowiadujemy się o CSS, jest to, że niektóre elementy są elementami blokowymi, na przykład akapit. Te elementy są wyświetlane jeden po drugim w kierunku bloku. Elementy śródliniowe, takie jak słowo w zdaniu, są wyświetlane jeden po drugim w kierunku śródliniowym. Pracując w poziomym trybie pisania, przyzwyczailiśmy się do tego, że wymiar blokowy biegnie od góry do dołu pionowo, a wymiar śródliniowy od lewej do prawej poziomo.

Ponieważ elementy blokowe i śródliniowe odnoszą się do trybu pisania naszego dokumentu, wymiar śródliniowy jest poziomy tylko wtedy, gdy jesteśmy w trybie pisania poziomym. Nie odnosi się do szerokości, ale do rozmiaru w tekście. Wymiar bloku jest pionowy tylko w trybie pisania poziomego. Dlatego nie odnosi się to do wzrostu, ale do rozmiaru bloku.

Właściwości logiczne, zależne od przepływu

Te terminy, rozmiar w tekście i rozmiar bloku, są również używane jako nazwy nowych właściwości CSS, które mają odzwierciedlać nasz nowy świat świadomy trybu pisania. Jeśli w poziomym trybie pisania użyjesz właściwości inline-size zamiast width , będzie ona działać dokładnie tak samo jak width - dopóki nie zmienisz trybu pisania swojego komponentu. Jeśli użyjesz width , która zawsze będzie wymiarem fizycznym, zawsze będzie to rozmiar komponentu w poziomie. Jeśli użyjesz inline-size , będzie to rozmiar w wymiarze inline, jak pokazuje poniższy przykład.

To samo dotyczy height . Właściwość height zawsze będzie odpowiadać rozmiarowi w pionie. Odnosi się do wysokości przedmiotu. Jednak właściwość block-size podaje rozmiar w wymiarze bloku , w pionie, jeśli jesteśmy w trybie pisania poziomym i poziomym w trybie pionowym.

Jak opisałem w moim artykule „Zrozumienie właściwości i wartości logicznych”, istnieją odwzorowania wszystkich właściwości fizycznych, które są powiązane z wymiarami ekranu. Kiedy zaczniesz o tym myśleć, wiele CSS jest określonych w odniesieniu do fizycznego układu ekranu. Ustawiamy pozycjonowanie, marginesy, dopełnienie i obramowanie za pomocą górnego, prawego, dolnego i lewego. Unosimy rzeczy w lewo i prawo. Czasami powiązanie rzeczy z fizycznym wymiarem będzie tym, czego chcemy, jednak coraz częściej myślimy o naszych układach bez odniesienia do fizycznej lokalizacji. Specyfikacja Logical Properties and Values ​​wprowadza ten niezależny od trybu pisania sposób pracy w całym CSS.

Tryby pisania, siatka i Flexbox

Kiedy nasze nowe metody układu wylądowały na scenie, przyniosły ze sobą agnostyczny sposób patrzenia na tryb pisania komponentu, który jest układany jako układ elastyczny lub siatkowy. Po raz pierwszy proszono ludzi o myślenie o początku i końcu, a nie o lewej i prawej stronie, górze i dole.

Kiedy po raz pierwszy zacząłem prezentować na temat CSS Grid, moje wczesne prezentacje były podsumowaniem wszystkich właściwości w specyfikacji. Wspomniałem, że właściwość grid-area może być użyta do ustawienia wszystkich czterech linii, aby umieścić element siatki. Kolejność tych wierszy nie była jednak taka, jaka jest taka sama jak górny, prawy, dolny i lewy, których używamy do ustawienia wszystkich czterech marginesów. Zamiast tego musimy użyć góra, lewo, dół, prawo - odwrotność tej kolejności! Dopóki nie zrozumiałem związku między trybami siatki i pisania, wydawało się to bardzo dziwną decyzją. Zdałem sobie sprawę, że to, co robimy, to ustawianie obu linii startu, a potem obu linii końcowych. Używanie górnego, prawego, dolnego i lewego działałoby dobrze, gdybyśmy byli w trybie pisania poziomego, jednak odwróć siatkę na bok, a to nie ma sensu. Jeśli użyjemy grid-area: 1 / 2 / 3 / 5; jak w pisaku poniżej linie są ustawione w następujący sposób:

• grid-row-start: 1; - blok start
• grid-column-start: 2 - inline start
• grid-row-end: 3 - koniec bloku
• grid-column-end: 5 - inline end

Wiersze i kolumny Flexbox

Jeśli użyjesz Flexbox i dodasz display: flex do kontenera, Twoje elementy będą wyświetlane jako wiersz, ponieważ początkowa wartość właściwości flex-direction to row . Wiersz będzie zgodny z wymiarem wbudowanym używanego trybu pisania. Dlatego jeśli twój tryb pisania jest horizontal-tb , wiersz biegnie poziomo. Jeśli kierunek tekstu w bieżącym skrypcie jest od lewej do prawej, elementy będą układać się od lewej, jeśli od prawej do lewej, będą one ustawiane w linii, zaczynając od prawej.

Użyj jednak pionowego trybu pisania, takiego jak vertical-rl i flex-direction: row spowoduje, że elementy zostaną ułożone pionowo, ponieważ kierunek inline jest pionowy. W następnym CodePen wszystkie przykłady mają flex-direction: row , zmienił się tylko tryb lub kierunek pisania.

Dodaj flex-direction: column i układ elementów w wymiarze blokowym trybu pisania. W trybie pisania poziomego wymiar bloku jest od góry do dołu, więc kolumna jest pionowa. W trybie pisania vertical-rl kolumna jest pozioma. Podobnie jak w poprzednim przykładzie, jedyną różnicą między poniższymi układami elastycznymi jest używany tryb pisania.

Automatyczne umieszczanie siatki

Podczas korzystania z automatycznego umieszczania w siatce zobaczysz zachowanie podobne do tego w układzie elastycznym. Elementy siatki są automatycznie umieszczane zgodnie z trybem pisania dokumentu. Domyślnie elementy są umieszczane w wierszach, które będą kierunkiem w wierszu - poziomo w trybie pisania poziomego i pionowo w trybie pionowym.

Spróbuj zmienić przepływ elementów do column jak w poniższym przykładzie. Elementy będą teraz płynąć w wymiarze blokowym - pionowo w trybie pisania poziomego i poziomo w trybie pionowym.

Umieszczenie na linii siatki

Umieszczanie oparte na wierszach uwzględnia również tryb pisania. Linie naszej siatki zaczynają się od 1, zarówno dla wierszy, jak i kolumn. Jeśli umieścimy element od linii kolumny 1 do linii kolumny 3 i znajdujemy się w trybie pisania poziomego z kierunkiem od lewej do prawej, ten element zostanie rozciągnięty od skrajnej lewej linii kolumny w poziomie przez dwie ścieżki siatki. W ten sposób obejmuje dwie kolumny.

Zmień tryb pisania na vertical-rl , a wiersz kolumny 1 będzie na górze siatki, element obejmujący dwie ścieżki w pionie. Nadal obejmuje dwie kolumny, ale teraz są one ustawione poziomo.

Wyrównanie w siatce i Flexbox

Jednym z pierwszych miejsc, w których wiele osób zetknie się ze sposobem, w jaki Flexbox radzi sobie z trybami pisania, będzie wyrównywanie elementów w układzie elastycznym. Jeśli weźmiemy przykład flex-direction: row powyżej i użyjemy właściwości justify-content , aby wyrównać wszystkie elementy do flex-end , elementy przesuną się na koniec swojego wiersza. Oznacza to, że w trybie pisania poziomego, od lewej do prawej, wszystkie elementy przesuwają się w prawo, ponieważ koniec tego wiersza znajduje się po prawej stronie. Jeśli kierunek jest od prawej do lewej, wszystkie poruszają się w lewo.

W trybie pisania pionowego przesuwają się na dół, zakładając, że jest na to miejsce. W tym przykładzie ustawiłem inline-size na komponentach, aby upewnić się, że mamy wolne miejsce w naszych elastycznych kontenerach, aby zobaczyć wyrównanie w akcji.

Wyrównanie jest nieco łatwiejsze do zrozumienia w układzie siatki, ponieważ zawsze mamy do dyspozycji dwie osie. Siatka jest dwuwymiarowa, te dwa wymiary są blokowe i wbudowane. Dlatego możesz zapamiętać jedną regułę, jeśli chcesz wiedzieć, czy używać właściwości zaczynających się od align- czy tych, które zaczynają się od justify- . W układzie siatki właściwości align- :- align-content , align-items , align-self są używane do wyrównania osi bloku. W trybie pisania poziomego oznacza to w pionie, aw trybie pisania w pionie poziomo.

Po raz kolejny nie używamy lewej i prawej strony ani góry i dołu, ponieważ chcemy, aby nasz układ siatki działał dokładnie w ten sam sposób, niezależnie od trybu pisania. Wyrównujemy więc za pomocą start i end . Jeśli wyrównamy, aby start od wymiaru blokowego, będzie to top w horizontal-tb , ale będzie right w vertical-rl . Spójrz na poniższy przykład, wartości wyrównania są identyczne w obu siatkach, jedyną różnicą jest używany tryb pisania.

Właściwości justify-content , justify-items , justify-self są zawsze używane do wyrównania w linii w układzie siatki. Będzie to pozioma w trybie pisania poziomego i pionowa w trybie pisania w pionie.

Wyrównanie Flexbox jest nieco skomplikowane przez fakt, że główna oś może być przełączana z wiersza na kolumnę. Dlatego w Flexboksie musimy myśleć o metodzie wyrównania jako osi głównej kontra osi poprzecznej. Właściwości align- są używane na osi poprzecznej. Na głównej osi wszystko, co masz, to justify-content , ponieważ w Flexbox zajmujemy się przedmiotami jako grupą. Na osi poprzecznej możesz użyć align-content w przypadkach, gdy masz wiele linii elastycznych i spację w kontenerze elastycznym, aby je rozmieścić. Możesz również użyć align-items wyrównania i align-self , aby przesunąć elementy elastyczne na osi poprzecznej względem siebie i ich linii elastycznej.

Więcej informacji na temat wyrównania w układzie CSS można znaleźć w moich poprzednich artykułach w Smashing Magazine:

• Jak wyrównać rzeczy w CSS
• Wszystko, co musisz wiedzieć o wyrównaniu w Flexbox

Świadomość trybu pisania i starsze CSS

Nie wszystkie CSS w pełni dogadały się z tym zależnym od przepływów, niezależnym od trybu pisania sposobem pracy. Miejsca, w których nie zaczyna się wyróżniać jako niezwykłe, tym częściej myślisz o rzeczach w kategoriach blokowych i liniowych, początku i końca. Na przykład w układzie wielokolumnowym określamy column-width , co tak naprawdę oznacza rozmiar w wierszu kolumny, ponieważ nie jest on mapowany na fizyczną szerokość podczas pracy w trybie pisania w pionie.

Jak widać, tryby pisania stanowią podstawę większości tego, co robimy w CSS, nawet jeśli nigdy nie używamy innego trybu pisania niż horizontal-tb .

Uważam, że niezwykle pomocne jest myślenie o układzie CSS w ten niezależny od trybu pisania sposób. Chociaż jest być może trochę za wcześnie, aby zmienić wszystkie nasze właściwości i wartości na logiczne, jesteśmy już w świecie zależnym od przepływu, gdy mamy do czynienia z nowymi metodami układu. Posiadanie modelu mentalnego typu blok i inline, początek i koniec, a nie przywiązanie do czterech rogów ekranu, wyjaśnia wiele rzeczy, z którymi spotykamy się podczas korzystania z FlexBox i siatki.