The Cat in the Hat SVG ponúka značku. Aj keď v HTML funguje veľmi podobne ako bežné , akceptuje atribúty, ktoré odomknú výkonné možnosti tvarovania textu.
Jedným z týchto atribútov je textLength. Ak nastavíme túto hodnotu na 100, potom bude zabalený text vynútený na celú dĺžku kontajnera SVG.
Prečítajte si Blokovanie textu pera SVG - krok 1, ktorý vytvoril Geoff Graham (@geoffgraham) na stránke CodePen.
Ďalším z týchto atribútov je lengthAdjust. To platí iba v prípade, že (alebo ) má množinu textLengtha spracováva spôsob, akým je text rozšírený alebo komprimovaný tak, aby sa zmestil do tohto priestoru. Predvolená hodnota je, spacingktorá zachová tvary písmen, ale upraví medzery medzi znakmi. spacingAndGlyphsNamiesto toho môžeme použiť a tým upravíme rozbalenie a stlačenie tvaru znakov aj v prípade, že je prirodzený rozostup nepríjemný.
Prečítajte si Blokovanie textu pera SVG - krok 2, ktorý vytvoril Geoff Graham (@geoffgraham) na stránke CodePen.
Rovnako ako je značka tiež akceptuje font-sizeatribút, ktorý robí presne tak, ako by sa dalo očakávať: zmeniť veľkosť textu. To môžeme použiť na vykonanie úprav textu, pri ktorých zväčšenie textLengthponecháva príliš veľa alebo príliš málo miesta a lengthAdjustwarpuje postavy z rany.
V kombinácii s týmito tromi atribútmi nám dáva možnosť vytvárať blokovania textu. Tu je to, čo dostaneme ako výsledok úryvku vyššie s ďalšími CSS pre extra styling:
Prečítajte si Blokovanie textu pera SVG od Geoffa Grahama (@geoffgraham) na stránkach CodePen.
Ostatné blokovania
O blokovaní typu sme už písali:
Blokovanie typu je typografický dizajn, v ktorom sú slová a znaky štylizované a usporiadané veľmi konkrétne. Rovnako ako dizajn je doslova zamknutý na svojom mieste.
SVG je ideálny pre tento druh vecí, kvôli spôsobu jeho zmeny veľkosti. Text vo vnútri SVG sa nepreformuluje tak, ako to robí typ v HTML, upravuje sa jedinečným spôsobom, ako to robí SVG, ktorý má často dokonalý pomer strán, v akom bol navrhnutý (aj keď to môžete ovládať).
Takže ak niečo také navrhujete v softvéri na úpravu vektorov, ako je Adobe Illustrator:
Pozrite si ukážku pera blokovania textu od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Čítaj viac.