Share
În acest sfat rapid vă voi arăta cum să afișați text pe o pagină web care rulează de sus în jos, în loc de stânga spre dreapta (sau de la dreapta la stânga). Există două abordări, una fiind mai bună decât cealaltă, deci hai să intrăm și să aruncăm o privire!
Dacă sunteți familiarizat cu CSS, ați putea gândi instinctiv acest lucru transforma ar fi cel mai bun mod de a aborda această problemă, dar permiteți-mi să vă arăt de ce nu este ideal. Vom începe cu unele conținut (unele titluri și un paragraf), apoi vom aplica o transforma, împreună cu a transformare origine astfel încât să se rotească de la punctul corect, apoi o compensare pentru ao păstra pe ecran:
Această abordare funcționează în ceea ce privește rotirea textului, dar fluxul de documente nu este afectat, astfel încât h2 în cazul nostru, acum stă în partea de sus a conținutului de dedesubt. Cu toate acestea, ne dă un rezultat rezumat.
A doua noastră abordare va păstra fluxul documentelor astfel încât să rămână în conformitate cu dimensiunile h2, indiferent de direcția textului. Vom folosi proprietatea modului writing, după cum urmează:
h2 modul de scriere: vertical-rl;
În acest caz i-am dat o valoare vertical-rl, care aplică o direcție de afișare verticală și o direcție text de la dreapta la stânga. Aruncati o privire:
Mult mai bine. Veți observa că și cursorul se schimbă, ceea ce nu se întâmplă cu transformarea CSS.
S-ar putea să fi observat că am folosit o valoare rl (din dreapta la stânga), în timp ce suntem obișnuiți să citim scriptul latin la stânga la dreapta. Dar asta pentru că am schimbat-o Blocarea direcției fluxului. dacă le dăm pe noi h2 o valoare de înălțime setată, veți vedea înfășurarea textului și veți realiza că în acest caz avem nevoie de linii de citire din partea dreaptă a paginii spre stânga:
Acest lucru ne face să avem nevoie să definim ce biți din toate aceste aliniere trebuie să curgă și în ce direcții. Scripturile bazate pe latină curg de sus în jos (acesta este Blocarea direcției fluxului). Textul lor citește de la stânga la dreapta (acesta este Direcția fluxului în linie). Și personajele lor au o linie de bază în partea de jos, în timp ce arată în sus (aceasta este Caracterul direcției). Asa:
Alte scripturi, cum ar fi bazate pe limba arabă, pe bază de Han (cum ar fi chineză și japoneză) și bazate pe mongolă, pot afișa text folosind aceste trei fluxuri în orice combinație de direcții.
Modul de scriere a fost conceput pentru a sprijini toate scripturile și sistemele de scriere ale lumii. Am menționat sistemele bazate pe mongolă, de exemplu, ele sunt afișate pe verticală, dar curg de la stânga la dreapta.
Alte valori pentru modul de scriere, pe care le puteți utiliza astăzi, includ:
Accentsconagua
vertical-lr unde textul rulează vertical, dar începe în partea stângă a containerului care rulează drept.orizontal-tb unde textul rămâne orizontal, dar curge de sus în jos. Acest lucru (ați observat) este un comportament implicit.Iată un alt lucru pe care să-l examinați: o poezie chineză, folosind vertical-rl modul de scriere. Conținutul său este plutind drept, astfel încât să începeți în partea dreaptă a paginii și citiți spre stânga. Dar ceea ce veți observa probabil că personajele sunt încă orientate în poziție verticală. Caracterele latine ar fi orientate diferit cu aceleași reguli. Acest lucru este deliberat:
"Standardul Unicode atribuie o proprietate fiecărui caracter, iar browserele pot folosi aceasta pentru a determina orientarea implicită a unui caracter dat." - W3C
Puteți personaliza mai mult orientarea caracterelor utilizând text-orientare proprietate.
Modul de scriere CSS are un suport excelent pentru browser în momentul redactării, deși unele aspecte ale acestuia sunt încă în curs de dezvoltare. Tot ce ma vedeti fac in acest tutorial pot fi folosite in productie chiar acum.
Indiferent dacă utilizați acest lucru pentru rezultate practice sau estetice, să vedem ce ați făcut în comentarii!
