The Cat in the Hat
SVG biedt de tag aan. Hoewel het ongeveer hetzelfde functioneert als normaal
in HTML, accepteert het attributen die krachtige tekstvormende mogelijkheden ontgrendelen.
Een van die attributen is textLength
. Als we dit instellen op 100
, wordt de ingepakte tekst gedwongen tot de volledige lengte van de SVG-container.
Zie de Pen SVG-tekstvergrendeling - Stap 1 door Geoff Graham (@geoffgraham) op CodePen.
Een ander een van die attributen is lengthAdjust
. Dit is alleen van toepassing als (of
) een set heeft
textLength
en behandelt de manier waarop de tekst wordt uitgebreid of gecomprimeerd om in die ruimte te passen. De standaardwaarde is spacing
dat de lettervormen behouden blijven, maar de tussenruimte tussen tekens aanpast. We kunnen in spacingAndGlyphs
plaats daarvan gebruiken en dat zal de vorm van de tekens ook uitzetten of comprimeren voor wanneer de natuurlijke afstand onhandig is.
Zie Pen SVG Text Lockup - Step 2 door Geoff Graham (@geoffgraham) op CodePen.
Zoals , de
tag accepteert ook een
font-size
attribuut dat precies doet wat je zou verwachten: verander de grootte van de tekst. We kunnen dat gebruiken om aanpassingen aan de tekst aan te brengen waar het vergroten textLength
te veel of te weinig ruimte laat en lengthAdjust
de tekens vervormt.
Gecombineerd geven deze drie attributen ons de mogelijkheid om tekstvergrendelingen te creëren. Dit is wat we krijgen als resultaat van het bovenstaande fragment met wat extra CSS voor extra styling:
Zie de Pen SVG Text Lockup door Geoff Graham (@geoffgraham) op CodePen.
Andere vastlopen
We hebben eerder geschreven over type lockups:
Een type lockup is een typografisch ontwerp waarbij de woorden en tekens heel specifiek zijn gestileerd en gerangschikt. Alsof het ontwerp letterlijk op zijn plaats zit.
SVG is perfect voor dit soort dingen, vanwege de manier waarop het formaat verandert. Tekst in SVG wordt niet opnieuw geplaatst zoals tekst in HTML, het schaalt op de unieke manier waarop SVG dat doet, die vaak de perfecte hoogte-breedteverhouding heeft waarvoor het is ontworpen (hoewel u dat kunt regelen).
Dus als je zoiets ontwerpt in vectorbewerkingssoftware zoals Adobe Illustrator:
Zie het penvoorbeeld van een tekstvergrendeling door Chris Coyier (@chriscoyier) op CodePen.
Lees verder.