The Cat in the Hat SVG propose le tag. Bien qu'il fonctionne un peu comme un HTML normal , il accepte des attributs qui débloquent de puissantes capacités de mise en forme de texte.
L'un de ces attributs est textLength. Si nous définissons ceci sur 100, alors le texte encapsulé sera forcé à la longueur totale du conteneur SVG.
Voir le Pen SVG Text Lockup - Step 1 par Geoff Graham (@geoffgraham) sur CodePen.
Un autre de ces attributs est lengthAdjust. Cela s'applique uniquement lorsque (ou ) a un ensemble textLengthet gère la façon dont le texte est développé ou compressé pour s'adapter à cet espace. La valeur par défaut est spacingqui préserve les formes des lettres mais ajuste les espaces entre les caractères. Nous pouvons utiliser à la spacingAndGlyphsplace et cela ajustera l'extension ou la compression de la forme des caractères également lorsque l'espacement naturel est gênant.
Voir le Pen SVG Text Lockup - Step 2 par Geoff Graham (@geoffgraham) sur CodePen.
Comme , la balise accepte également un font-sizeattribut qui fait exactement ce que vous attendez: changez la taille du texte. Nous pouvons l'utiliser pour apporter des ajustements au texte où l'augmentation textLengthlaisse trop ou trop peu d'espace et lengthAdjustdéforme les caractères.
Combinés ensemble, ces trois attributs nous donnent la possibilité de créer des verrouillages de texte. Voici ce que nous obtenons à la suite de l'extrait de code ci-dessus avec du CSS supplémentaire pour un style supplémentaire:
Voir le Pen SVG Text Lockup par Geoff Graham (@geoffgraham) sur CodePen.
Autres verrouillages
Nous avons déjà écrit sur les verrouillages de type:
Un verrouillage de type est une conception typographique où les mots et les caractères sont stylés et arrangés très spécifiquement. Comme le design est littéralement verrouillé en place.
SVG est parfait pour ce genre de chose, en raison de la façon dont il se redimensionne. Le texte à l'intérieur de SVG n'est pas redistribué comme le fait le texte en HTML, il s'adapte à la manière unique de SVG, qui est souvent au rapport hauteur / largeur parfait pour lequel il a été conçu (bien que vous puissiez le contrôler).
Donc, si vous concevez quelque chose comme ça dans un logiciel d'édition vectorielle comme Adobe Illustrator:
Voir l'exemple de stylo d'un verrouillage de texte par Chris Coyier (@chriscoyier) sur CodePen.
Lire la suite.