Share
Mai devreme dimineață, trebuia să creez un text vertical pentru un proiect pe care lucrez. După ce am încercat câteva idei, m-am dus la Twitter pentru a afla ce fel de gânduri aveau discipolii noștri despre acest subiect. Au fost destule răspunsuri și idei extraordinare pe care le vom trece astăzi!
* Notă - vă rugăm să consultați "Metoda 6" de mai jos pentru mai multe detalii despre utilizarea corectă.Abonați-vă la pagina noastră YouTube pentru a viziona toate tutorialele video!
Prefer să vizionați acest videoclip pe scenariu?
Accentsconagua
Deci, este posibil să se adauge un mod posibil (deși nu este recomandat) de a obține text vertical
N
E
T
T
U
T
S
Nu utilizați această metodă. E lame și nefericită.
Cu această metodă, împachetăm fiecare literă într-o perioadă, apoi setăm-o afişa la bloc în CSS.
Text verticale N E T T U T S
Problema cu această soluție - alta decât marcarea înfricoșătoare - este că este un proces manual. Dacă textul este generat dinamic de la un CMS, nu aveți noroc. Nu utilizați această metodă.
Instinctul meu inițial a fost acela de a adăuga dinamic deschidere cu JavaScript. În acest fel, abordăm problemele menționate în metoda a doua.
JS Bin NETTUTS
Această metodă este cu siguranță o îmbunătățire. Mai sus, noi Despică textul într-o matrice și apoi înfășurați fiecare literă într-un rând deschidere. În timp ce am putea folosi ceva de genul a pentru declarație, sau $ .map pentru a filtra prin matrice, o soluție mult mai bună și mai rapidă este de a uni și de a înfășura manual textul în același timp.
Deși mai bine, această soluție nu este recomandată.
Să plecăm de la JavaScript dacă putem. Ce se întâmplă dacă am aplicat o lățime elementului container și am forțat textul să se înfășoare? Asta ar putea funcționa.
JS Bin NETTUTS
În acest scenariu, aplicăm o lățime foarte îngustă h1 tag-ul, și apoi faceți-l marimea fontului egală cu acea valoare exactă. În sfârșit, prin stabilirea cuvânt-wrap egal cu break-cuvânt, putem forța fiecare literă pe propria linie. in orice caz, word-wrap: break-word face parte din specificația CSS3 și nu este compatibilă în toate browserele.
Excluzând browserele mai vechi, aceasta rezolvă aparent problema noastră ... dar nu în întregime. Demo de mai sus pare să funcționeze, dar este prea riscant să se joace cu valorile pixelilor. Să încercăm ceva la fel de simplu ca și transformarea majusculelor în litere mici.
Hopa; cu această metodă, trebuie să fim foarte atenți atunci când vine vorba de valorile specifice pe care le-am stabilit. Nu se recomandă.
spațiul dintre litere Ca măsură de precauție și pentru a extinde metoda a patra, de ce nu aplicăm destul de mari spațiul dintre litere pentru a rezolva această problemă?
JS Bin Nettuts
Aceasta pare să repare problema, deși, din nou, folosim un pic de CSS3 aici.
ems Alternativ, există o soluție cu un singur strat. Amintiți-vă când am aflat că aplicarea overflow: ascuns la un element părinte ar face în mod miraculos să-i conțină plutitorii? Această metodă este cam așa! Cheia este de a utiliza ems și plasați un spațiu între fiecare literă.
JS Bin N e t u u t
Destul de curat, nu? Și, în acest fel, puteți aplica orice dimensiune a fontului dorită. Pentru că noi folosim ems - care este egal cu x înălțime din fontul ales - atunci avem o flexibilitate mult mai mare.
Dar, încă o dată, mai multe scrisori se vor termina pe o linie. Trebuie să fii în siguranță; de aceea am aplicat arbitrar de mare spațiul dintre litere pentru a vă asigura că nu există niciodată mai mult de o literă pe o linie.
După cum știu, acest lucru este soluția cea mai bună, cea mai compatibilă cu browserul compatibil cu browserul.
Spatiu alb O ultimă modalitate de a realiza acest efect este să profitați de avantajul spatiu alb proprietate.
J E F F R E Y
Prin setare spatiu alb la pre, care instruiește textul să se comporte ca și cum ar fi fost în a pre etichetă. Ca atare, ea onorează orice spațiu pe care l-ați adăugat.
Nu ar trebui să existe o regulă CSS3 pentru a îndeplini această sarcină? Dacă aș fi putut stabili ceva în felul următor: font-display: bloc de litere; care ar instrui fiecare scrisoare să fie făcută ca un bloc de fel?
Tu ce crezi? Aveți alte alternative pe care ar trebui să le luăm în considerare? Mulți oameni au sugerat utilizarea rotației textului pentru a îndeplini sarcina, dar este important să rețineți că și acest lucru rotește și textul cu nouăzeci de grade, ceea ce nu este ceea ce încercăm să realizăm.
