Usando SVG e Illustrator para crear texto con curvas

Agregar una línea recta de texto en un iBook es bastante sencillo, pero ¿qué sucede si desea agregar algo de estilo a su libro con texto que sigue una línea curva? Ahí es cuando un poco de conocimiento de SVG y Adobe Illustrator va muy lejos. Al permitir que Illustrator genere el código SVG, ahorrará el tiempo de cálculo de la curva y la ubicación del texto por su cuenta.

Paso 1: Crea la curva en Illustrator

Comience lanzando Adobe Illustrator. Hacer clic Archivo> Nuevo para crear un nuevo archivo. Asegúrese de que el ancho y el alto de su archivo de Illustrator sean del mismo ancho y alto que su ventana gráfica en su archivo XHTML. En este ejemplo usaremos las dimensiones 612px por 792px:

Haga clic en el Lapicera en la paleta de herramientas. Haga clic en la ventana del tablero de arte para hacer un punto de anclaje y haga clic en otra ubicación en la pantalla para hacer un segundo punto de anclaje.

Haga clic y mantenga pulsado el Lapicera para revelar las herramientas adicionales, y seleccione Convertir el punto de anclaje. Haga clic y arrastre uno de los puntos de anclaje para hacer una curva..

Haga clic en el Tipo de herramienta y desplácese sobre el principio de la línea curva hasta que el cursor muestre una línea ondulada.

Haga clic en el tablero de arte y el cursor se posicionará en la línea curva. Escribe "¡Mira mi impresionante línea de curvas!" (o algo igualmente genial).

Paso 2: Configuración de las opciones

Aumente el tamaño del texto si es necesario, luego haga clic en Archivo> Guardar como. Elija "SVG" en el menú desplegable Formato y elija un nombre y una ubicación para su archivo antes de hacer clic en "Guardar". Algunas de las opciones de configuración de SVG no se aplican a nuestra situación; Vamos a repasar las configuraciones que necesitamos especificar. Establezca "Perfiles SVG" en "SVG 1.1". En el cuadro “Fuentes”, configure “Tipo” en “SVG” y “Subconjunto” en “Ninguno (Usar fuentes del sistema)”. Haga clic en el botón "Más opciones" en la esquina inferior izquierda. En el cuadro de "Opciones avanzadas", establezca "Propiedades de CSS" en "Atributos de presentación". Asegúrese de marcar solo las casillas junto a "Salida menos elementos ”y“ Uso Elemento para texto en ruta.

Haga clic en "Aceptar" y cierre Illustrator.

Paso 3: Preparando el archivo XHTML

Inicie su editor de texto y cree un nuevo archivo XHTML. Agregue el siguiente código al archivo:

     Ejemplo de SVG iBooks

Aparte de los espacios de nombres típicos de EPUB y XHTML, notará dos espacios de nombres nuevos, uno para "svg" y el otro para "xlink". Ambos espacios de nombres son necesarios para SVG. La ventana gráfica aquí coincide con el tamaño de nuestro archivo original de Illustrator. Si seleccionó diferentes dimensiones para su archivo de Illustrator, querrá cambiar el código de su ventana gráfica para que coincida con las dimensiones de Illustrator..

Paso 4: Agregar el código SVG

Agregue el siguiente código SVG dentro de cuerpo etiqueta.

Usando el espacio de nombres "svg:", definimos algunas cosas diferentes, como la versión de SVG que estamos usando y cómo manejar el espacio en blanco. El "id" puede ser lo que quieras.

Datos de ruta

Copiaremos cinco datos del archivo SVG de Illustrator y los colocaremos en la misma ubicación dentro del archivo XHTML. Abra el archivo SVG de Illustrator en su editor de texto. Copie los datos de ruta alfanuméricos ubicados dentro de las comillas junto a la d =.

Pegue los datos de la ruta dentro de las comillas al lado de la d = en su archivo XHTML. Los datos de la ruta SVG contienen la clave de la curva y proporcionan instrucciones sobre dónde moverse, cómo crear la curva y dónde finalizar la línea..

startOffset

De vuelta en el archivo SVG, copie el porcentaje al lado de startOffset = y pégalo dentro de la startOffset = citas en tu archivo XHTML.

los startOffset determina a qué distancia del principio de la línea debe comenzar el texto.

Familia tipográfica

Navegue de nuevo al archivo SVG y copie el nombre de la fuente dentro de las comillas al lado de font-family =. Haga clic en el archivo XHTML y pegue la fuente dentro de las comillas al lado de font-family =.

tamaño de fuente

Haga clic en el archivo SVG nuevamente y copie el número dentro de las comillas junto a font-size =. Haga clic en el archivo XHTML y pegue el tamaño dentro de las comillas al lado de font-size =.

Texto

Una vez más, navegue de nuevo al archivo SVG. Copie la línea de texto que aparece en la curva y péguela entre la apertura y el cierre svg: tspan etiquetas.

Paso 5: Pruebas

Echemos un vistazo rápido en Safari para ver cómo se ve. Abra el archivo XHTML en Safari para ver la línea con curvas.

Conclusión

Agregar texto curvado a su iBook puede darle vida a su texto, agregar emoción y un sentido de realismo a su proyecto.

Código