Moduri de scriere și aspect CSS

Acesta nu este un articol despre aplicarea practică sau creativă a acestei proprietăți. În schimb, vreau să demonstrez de ce înțelegerea modurilor de scriere este atât de importantă - chiar și pentru cei dintre noi care rareori trebuie să schimbe modul de scriere al unei pagini sau al unei componente. Suportul pentru mai multe moduri de scriere este cheia modului în care au fost concepute noile noastre metode de layout Flexbox și Grid Layout. Înțelegerea acestui lucru poate debloca o mai bună înțelegere a modului în care funcționează aceste metode de aspect.

Ce sunt modurile de scriere?

Modul de scriere al unui document sau al unei componente se referă la direcția în care curge textul. În CSS, pentru a lucra cu moduri de scriere, folosim proprietatea writing-mode . Această proprietate poate lua următoarele valori:

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

Dacă citiți acest articol pe Smashing Magazine în limba engleză, atunci modul de scriere al acestui document este horizontal-tb sau orizontal de sus în jos . În engleză, propozițiile sunt scrise pe orizontală - prima literă a fiecărei linii începând din stânga.

O limbă precum arabă are și un mod de scriere horizontal-tb . Este scris pe orizontală, de sus în jos, totuși grafia arabă este scrisă de la dreapta la stânga, așa că propozițiile în arabă încep din dreapta.

Chineză, japoneză și coreeană sunt scrise pe verticală, primul caracter al primei propoziții fiind în dreapta sus. Propozițiile următoare fiind adăugate la stânga. Prin urmare, modul de scriere utilizat este vertical-rl . Un mod de scriere verticală care rulează de la dreapta la stânga.

Mongola se scrie și pe verticală, dar de la stânga la dreapta. Prin urmare, dacă doriți să tipăriți un script mongol, veți folosi modul de scriere vertical-lr .

Celelalte două valori ale writing-mode sunt concepute mai mult pentru scopuri creative decât pentru compunerea scripturilor verticale. Utilizarea sideways-lr și sideways-rl transformă textul în lateral - chiar și caracterele scrise în mod normal vertical și vertical. Valorile, din păcate, sunt acceptate doar în Firefox momentan. Următorul CodePen arată toate valorile diferite ale writing-mode , va trebui să utilizați Firefox dacă doriți să le vedeți pe cele sideways-* în acțiune.

Modurile de scriere pot fi utilizate atunci când se creează un document care utilizează o limbă scrisă folosind acel mod de scriere. Ele pot fi, de asemenea, folosite în mod creativ, de exemplu, pentru a seta un titlu vertical în partea laterală a unui conținut. În acest articol, totuși, vreau să arunc o privire asupra impactului pe care suportarea limbilor verticale și posibilitatea textului vertical îl are asupra aspectului CSS și asupra CSS în general.

Înainte de a face acest lucru, dacă sunteți interesat de utilizarea modurilor de scriere pentru textul vertical, iată câteva resurse utile:

• Site-ul de internaționalizare W3C are o mulțime de informații utile. Citiți despre scripturile RTL și textul vertical.
• Jen Simmons a scris un articol excelent despre modurile de scriere CSS, care include, de asemenea, câteva exemple de tipărire ale acestor moduri utilizate.
• Gânduri despre lume și sistemele noastre de scriere - Chen Hui Jing
• Compoziție verticală cu modul de scriere revizuit - Chen Hui Jing
• Proprietatea modului de scriere pe MDN

Dimensiunile bloc și în linie

Când schimbăm modul de scriere al unui document, ceea ce facem este să comutăm direcția fluxului de bloc . Prin urmare, devine rapid foarte util pentru noi să înțelegem ce se înțelege prin bloc și inline.

Unul dintre primele lucruri pe care le învățăm despre CSS este că unele elemente sunt elemente de bloc, de exemplu, un paragraf. Aceste elemente se afișează unul după altul în direcția blocului. Elementele inline, cum ar fi un cuvânt dintr-o propoziție, se afișează unul după altul în direcția inline. Lucrând într-un mod de scriere orizontală, ne obișnuim cu faptul că dimensiunea blocului se desfășoară vertical de sus în jos, iar dimensiunea în linie de la stânga la dreapta pe orizontală.

Deoarece elementele bloc și inline se referă la modul de scriere al documentului nostru, cu toate acestea, dimensiunea inline este orizontală numai dacă ne aflăm într-un mod de scriere orizontal. Nu se referă la lățime, ci în schimb la dimensiunea inline. Dimensiunea blocului este doar verticală atunci când se află într-un mod de scriere orizontală. Prin urmare, nu se referă la înălțime, ci la dimensiunea blocului.

Proprietăți logice, relative la flux

Acești termeni, dimensiunea în linie și dimensiunea blocului sunt, de asemenea, folosiți ca nume ale noilor proprietăți CSS concepute pentru a reflecta noul nostru mod de scriere. Dacă, într-un mod de scriere orizontală utilizați proprietatea inline-size în loc de width , aceasta va acționa exact în același mod ca width - până când comutați modul de scriere al componentei dvs. Dacă utilizați width care va fi întotdeauna o dimensiune fizică, aceasta va fi întotdeauna dimensiunea componentei pe orizontală. Dacă utilizați inline-size , aceasta va fi dimensiunea în dimensiunea inline, așa cum arată exemplul de mai jos.

Același lucru este valabil și pentru height . Proprietatea height va fi întotdeauna dimensiunea verticală. Se referă la cât de înalt este articolul. Proprietatea block-size , însă, dă dimensiunea în dimensiunea blocului , pe verticală dacă suntem într-un mod de scriere orizontală și pe orizontală în unul vertical.

După cum am descris în articolul meu „Înțelegerea proprietăților și valorilor logice”, există mapări pentru toate proprietățile fizice, cele care sunt legate de dimensiunile ecranului. Odată ce începeți să vă gândiți la asta, o mare parte din CSS este specificată în raport cu aspectul fizic al unui ecran. Setăm poziționarea, marginile, umplutura și chenarele folosind partea de sus, dreapta, jos și stânga. Plutim lucrurile în stânga și în dreapta. Uneori, legarea lucrurilor de dimensiunea fizică va fi ceea ce ne dorim, cu toate acestea, din ce în ce mai mult ne gândim la amenajările noastre fără a face referire la locația fizică. Specificația proprietăți și valori logice implementează acest mod de lucru agnostic al modului de scriere direct în CSS.

Moduri de scriere, grilă și Flexbox

Când noile noastre metode de layout au aterizat pe scenă, au adus cu ele un mod agnostic de a privi modul de scriere al componentei care este așezată ca un aspect flexibil sau grid. Pentru prima dată, oamenii au fost rugați să se gândească la început și la sfârșit, mai degrabă decât la stânga și la dreapta, sus și jos.

Când am început să prezint pentru prima dată subiectul CSS Grid, prezentările mele timpurii au fost o prezentare a tuturor proprietăților din specificație. Am menționat că proprietatea grid-area ar putea fi folosită pentru a seta toate cele patru linii pentru a plasa un element de grilă. Ordinea acelor linii nu a fost, totuși, familiarul sus, dreapta, jos și stânga pe care le folosim pentru a seta toate cele patru margini. În schimb, trebuie să folosim sus, stânga, jos, dreapta - inversul acestei ordini! Până când am înțeles legătura dintre modurile grilă și scriere, aceasta mi s-a părut o decizie foarte ciudată. Am ajuns să realizez că ceea ce facem este să stabilim ambele linii de start, apoi ambele linii de final. Utilizarea de sus, dreapta, jos și stânga ar funcționa bine dacă am fi într-un mod de scriere orizontală, totuși rotiți grila pe o parte și asta nu are sens. Dacă folosim grid-area: 1 / 2 / 3 / 5; ca în stiloul de mai jos, liniile sunt stabilite după cum urmează:

• grid-row-start: 1; - bloc de pornire
• grid-column-start: 2 - start inline
• grid-row-end: 3 - capăt de bloc
• grid-column-end: 5 - capăt în linie

Rânduri și coloane Flexbox

Dacă utilizați Flexbox și adăugați display: flex într-un container, articolele dvs. se vor afișa ca un rând, deoarece valoarea inițială a proprietății flex-direction este row . Un rând va urma dimensiunea inline a modului de scriere utilizat. Prin urmare, dacă modul de scriere este horizontal-tb un rând rulează orizontal. Dacă direcția textului scriptului curent este de la stânga la dreapta, elementele se vor alinia începând de la stânga, dacă este de la dreapta la stânga, acestea se vor alinia începând din dreapta.

Cu toate acestea, utilizați un mod de scriere verticală, cum ar fi vertical-rl și flex-direction: row va face ca articolele să se așeze vertical, deoarece direcția inline este verticală. În următorul CodePen, toate exemplele au flex-direction: row , doar modul sau direcția de scriere s-a schimbat.

Adăugați flex-direction: column și aspectul elementelor în dimensiunea bloc a modului dvs. de scriere. Într-un mod de scriere orizontală, dimensiunea blocului este de sus în jos, deci o coloană este verticală. Cu un mod de scriere vertical-rl o coloană este orizontală. Ca și în exemplul anterior, singura diferență între aspectele flexibile de mai jos este modul de scriere utilizat.

Plasare automată în grilă

Când utilizați plasarea automată în grilă, veți vedea un comportament similar cu cel din aspectul flexibil. Elementele din grilă se plasează automat în funcție de modul de scriere al documentului. Implicit este plasarea elementelor pe rânduri, care va fi direcția inline - orizontal într-un mod de scriere orizontal și vertical în unul vertical.

Încercați să schimbați fluxul de articole în column ca în exemplul de mai jos. Elementele vor curge acum în dimensiunea blocului - vertical într-un mod de scriere orizontală și orizontal în unul vertical.

Plasare plasată în linie grilă

Plasarea bazată pe linii respectă și modul de scriere. Liniile grilei noastre încep de la 1, atât pentru rânduri, cât și pentru coloane. Dacă poziționăm un articol de la linia coloanei 1 la linia coloanei 3 și suntem într-un mod de scriere orizontal cu o direcție de la stânga la dreapta, acel element se va întinde de la linia coloanei cea mai din stânga pe două piste de grilă orizontal. Se întinde astfel două coloane.

Schimbați modul de scriere la vertical-rl și linia coloanei 1 va fi în partea de sus a grilei, elementul acoperind două piste pe verticală. Încă se întinde pe două coloane, dar coloanele rulează acum pe orizontală.

Aliniere în Grid și Flexbox

Unul dintre primele locuri în care mulți oameni vor fi intrat în contact cu modul în care Flexbox s-a ocupat de modurile de scriere, ar fi atunci când aliniază elementele într-un aspect flexibil. Dacă luăm exemplul flex-direction: row mai sus și folosim proprietatea justify-content pentru a alinia toate elementele pentru a flex-end , articolele se mută la sfârșitul rândului lor. Aceasta înseamnă că într-un mod de scriere orizontală cu direcționare de la stânga la dreapta articolele se deplasează toate la dreapta, deoarece capătul rândului respectiv este în dreapta. Dacă direcția este de la dreapta la stânga, atunci toate se deplasează la stânga.

În modul de scriere verticală, se deplasează în jos, presupunând că există spațiu pentru a face acest lucru. Am stabilit o inline-size pentru componentele din acest exemplu pentru a ne asigura că avem spațiu liber în containerele noastre flexibile pentru a vedea alinierea în acțiune.

Alinierea este puțin mai ușor de înțeles în aspectul grilei, deoarece avem întotdeauna cele două axe cu care să ne jucăm. Grila este bidimensională, acele două dimensiuni sunt bloc și inline. Prin urmare, vă puteți aminti o regulă dacă doriți să știți dacă să utilizați proprietățile care încep cu align- sau cele care încep cu justify- . În aspectul align- , proprietățile align-:- align-content , align-items , align-self sunt folosite pentru a face alinierea axelor blocului. Într-un mod de scriere orizontală înseamnă vertical, iar într-un mod de scriere verticală orizontal.

Încă o dată, nu folosim stânga și dreapta sau sus și jos, deoarece dorim ca aspectul grilei noastre să funcționeze exact în același mod, indiferent de modul de scriere. Deci ne aliniem folosind start și end . Dacă ne aliniem pentru a start pe dimensiunea blocului, aceasta va fi top când este în horizontal-tb , dar va fi right când este în vertical-rl . Aruncați o privire în exemplul de mai jos, valorile de aliniere sunt identice în ambele grile, singura diferență este modul de scriere utilizat.

Proprietățile justify-content , justify-items , justify-self sunt întotdeauna folosite pentru alinierea inline în aspectul grilei. Aceasta va fi orizontală într-un mod de scriere orizontală și verticală într-un mod de scriere verticală.

Alinierea Flexbox este oarecum complicată de faptul că axa principală poate fi comutată de la rând la coloană. Prin urmare, în Flexbox, trebuie să ne gândim la metoda de aliniere ca axa principală versus axa transversală. Proprietățile de align- sunt utilizate pe axa transversală. Pe axa principală, tot ce aveți este justify-content deoarece ne ocupăm de articole ca grup în Flexbox. Pe axa transversală, puteți utiliza align-content în cazurile în care aveți mai multe linii flexibile și spațiu în containerul flexibil pentru a le distanța. De asemenea, puteți utiliza align-items și align-self pentru a muta elementele flexibile pe axa transversală în relație între ele și linia lor flexibilă.

Pentru mai multe despre alinierea în aspectul CSS, vedeți articolele mele anterioare din Smashing Magazine:

• Cum să aliniați lucrurile în CSS
• Tot ce trebuie să știți despre aliniere în Flexbox

Conștientizarea modului de scriere și CSS mai vechi

Nu toate CSS-urile au ajuns pe deplin din urmă cu acest mod de lucru agnostic al modului de scriere, legat de flux. Locurile în care nu a început să iasă în evidență ca fiind neobișnuite cu cât te gândești mai mult la lucruri în termeni de bloc și inline, start și sfârșit. De exemplu, într-un aspect cu mai multe coloane, specificăm column-width , ceea ce înseamnă cu adevărat dimensiunea în linie a coloanei, deoarece nu este mapată la lățimea fizică atunci când lucrăm într-un mod de scriere verticală.

După cum puteți vedea, modurile de scriere stau la baza mult din ceea ce facem în CSS, chiar dacă nu folosim niciodată un alt mod de scriere decât horizontal-tb .

Mi se pare incredibil de util să mă gândesc la aspectul CSS în acest mod agnostic al modului de scriere. Deși este poate puțin devreme să trecem toate proprietățile și valorile noastre la cele logice, suntem deja într-o lume relativă a fluxului atunci când avem de-a face cu noi metode de layout. Faptul ca modelul tău mental să fie unul de bloc și inline, început și sfârșit, mai degrabă decât legat de cele patru colțuri ale ecranului, clarifică multe dintre lucrurile pe care le întâlnim când folosim FlexBox și grila.