The Cat in the Hat SVG oferă eticheta. Deși funcționează mult ca un normal în HTML, acceptă atribute care deblochează capacități puternice de formare a textului.
Unul dintre aceste atribute este textLength. Dacă setăm acest lucru 100, atunci textul înfășurat va fi forțat pe toată lungimea containerului SVG.
Vedeți Pen SVG Text Lockup - Pasul 1 de Geoff Graham (@geoffgraham) pe CodePen.
Un alt dintre aceste atribute este lengthAdjust. Acest lucru se aplică numai atunci când (sau ) are un set textLengthși gestionează modul în care textul este extins sau comprimat pentru a se potrivi cu acel spațiu. Valoarea implicită este cea spacingcare păstrează formele literelor, dar ajustează decalajele dintre caractere. Putem folosi spacingAndGlyphsîn schimb și asta va regla extinderea comprimării formei caracterelor, de asemenea, atunci când spațiul natural este incomod.
Vedeți Pen SVG Text Lockup - Pasul 2 de Geoff Graham (@geoffgraham) pe CodePen.
La fel ca , The tag - ul acceptă , de asemenea , un font-sizeatribut care face exact așa cum s-ar putea aștepta: modificați dimensiunea textului. Putem folosi acest lucru pentru a face ajustări la text, în cazul în care creșterea textLengthlasă prea mult sau prea puțin spațiu și lengthAdjustdeformează personajele.
Combinate împreună, aceste trei atribute ne oferă posibilitatea de a crea blocaje de text. Iată ce obținem ca rezultat al fragmentului de mai sus cu câteva CSS suplimentare pentru un stil suplimentar:
Vedeți Pen SVG Text Lockup de Geoff Graham (@geoffgraham) pe CodePen.
Alte blocări
Am mai scris despre blocările de tip înainte:
O blocare de tip este un design tipografic în care cuvintele și caracterele sunt stilate și aranjate foarte specific. La fel ca designul este literalmente blocat în loc.
SVG este perfect pentru acest gen de lucruri, datorită modului în care redimensionează. Textul din interiorul SVG nu revine la fel ca tipul din HTML, se redimensionează în modul unic în care face SVG, care este adesea la raportul de aspect perfect la care a fost conceput (deși îl puteți controla).
Deci, dacă proiectați așa ceva în software-ul de editare vectorială, cum ar fi Adobe Illustrator:
Vedeți Exemplul stiloului de blocare a textului de către Chris Coyier (@chriscoyier) pe CodePen.
Citeste mai mult.