Tekstvergrendeling - CSS-trucs

Anonim
 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 textLengthen behandelt de manier waarop de tekst wordt uitgebreid of gecomprimeerd om in die ruimte te passen. De standaardwaarde is spacingdat de lettervormen behouden blijven, maar de tussenruimte tussen tekens aanpast. We kunnen in spacingAndGlyphsplaats 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-sizeattribuut 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 textLengthte veel of te weinig ruimte laat en lengthAdjustde 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.