The Cat in the Hat SVG tilbyr merkelappen. Selv om den fungerer som en normal i HTML, godtar den attributter som låser opp kraftige tekstformingsfunksjoner.
En av disse egenskapene er textLength. Hvis vi setter dette til 100, vil teksten innpakket i bli tvunget til full lengde på SVG-beholderen.
Se Pen SVG Text Lockup - Step 1 av Geoff Graham (@geoffgraham) på CodePen.
En annen av disse egenskapene er lengthAdjust. Dette gjelder bare når (eller ) har et sett textLengthog håndterer måten teksten utvides eller komprimeres for å passe det rommet. Standardverdien er den spacingsom bevarer bokstavformene, men justerer mellomrom mellom tegn. Vi kan bruke i spacingAndGlyphsstedet, og det vil justere utvidelse av komprimering av figurenes figurer også når den naturlige avstanden er vanskelig.
Se Pen SVG Text Lockup - Step 2 av Geoff Graham (@geoffgraham) på CodePen.
Som den tag godtar også en font-sizeegenskap som gjør akkurat som du kan forvente: endre størrelsen på teksten. Vi kan bruke det til å gjøre justeringer i teksten der økende textLengthetterlater for mye eller for lite plass og lengthAdjustvrider tegnene ut av veien.
Kombinert sammen gir disse tre attributtene oss muligheten til å opprette tekstlåsinger. Her er hva vi får som et resultat av utdraget ovenfor med litt ekstra CSS for ekstra styling:
Se Pen SVG Text Lockup av Geoff Graham (@geoffgraham) på CodePen.
Andre låsinger
Vi har skrevet om type lockups før:
En type lockup er et typografisk design der ordene og tegnene er stylet og ordnet veldig spesifikt. Som design er bokstavelig talt låst på plass.
SVG er perfekt for denne typen ting på grunn av måten den endrer størrelse på. Tekst i SVG flyter ikke som type i HTML, den skaleres på den unike måten SVG gjør, som ofte er i det perfekte sideforholdet den ble designet på (selv om du kan kontrollere det).
Så hvis du designer noe slikt i vektorredigeringsprogramvare som Adobe Illustrator:
Se penneksemplet på en tekstlåsing av Chris Coyier (@chriscoyier) på CodePen.
Les mer.