The Cat in the Hat SVG ofrece la etiqueta. Si bien funciona de manera muy similar a lo normal en HTML, acepta atributos que desbloquean poderosas capacidades de modelado de texto.
Uno de esos atributos es textLength. Si configuramos esto en 100, entonces el texto envuelto se forzará a la longitud completa del contenedor SVG.
Consulte Bloqueo de texto SVG de lápiz: paso 1 de Geoff Graham (@geoffgraham) en CodePen.
Otro de esos atributos es lengthAdjust. Esto solo se aplica cuando (o ) tiene un conjunto textLengthy maneja la forma en que el texto se expande o comprime para ajustarse a ese espacio. El valor predeterminado es el spacingque conserva las formas de las letras pero ajusta los espacios entre caracteres. Podemos usar spacingAndGlyphsen su lugar y eso ajustará expandir o comprimir la forma de los caracteres también para cuando el espaciado natural sea incómodo.
Consulte Bloqueo de texto SVG de lápiz: paso 2 de Geoff Graham (@geoffgraham) en CodePen.
Al igual , la etiqueta también acepta un font-sizeatributo que hace exactamente como se podría esperar: cambiar el tamaño del texto. Podemos usar eso para hacer ajustes al texto donde el aumento textLengthdeja demasiado o muy poco espacio y lengthAdjustdeforma a los personajes fuera de control.
Combinados, estos tres atributos nos dan la capacidad de crear bloqueos de texto. Esto es lo que obtenemos como resultado del fragmento anterior con algo de CSS adicional para un estilo adicional:
Vea el Bloqueo de texto SVG de lápiz por Geoff Graham (@geoffgraham) en CodePen.
Otros encierros
Hemos escrito sobre bloqueos de tipos antes:
Un tipo de bloqueo es un diseño tipográfico en el que las palabras y los caracteres tienen un estilo y una disposición muy específica. Como si el diseño estuviera literalmente bloqueado en su lugar.
SVG es perfecto para este tipo de cosas, debido a la forma en que cambia de tamaño. El texto dentro de SVG no se reajusta como lo hace el tipo en HTML, se escala de la manera única que lo hace SVG, que a menudo tiene la relación de aspecto perfecta en la que fue diseñado (aunque puede controlar eso).
Entonces, si diseña algo como esto en un software de edición de vectores como Adobe Illustrator:
Vea el ejemplo de lápiz de bloqueo de texto de Chris Coyier (@chriscoyier) en CodePen.
Leer más.