Använd SVG & Illustrator för att skapa Curvy Text

Att lägga till en rak linje i en iBook är ganska okomplicerad, men vad händer om du vill lägga till lite stil i din bok med text som följer en krökt linje? Det är då en liten SVG- och Adobe Illustrator-kunskap går långt. Genom att låta Illustrator generera SVG-koden, sparar du tidpunkten för att beräkna kurvan och textplacering på egen hand.

Steg 1: Skapa kurvan i Illustrator

Börja med att starta Adobe Illustrator. Klick Fil> Ny att skapa en ny fil. Se till att bredden och höjden på din Illustrator-fil är samma bredd och höjd som ditt visningsport i din XHTML-fil. I det här exemplet använder vi dimensionerna 612px med 792px:

Klicka på Penverktyg i verktygspaletten. Klicka på kartongfönstret för att skapa en ankarpunkt och klicka på en annan plats över skärmen för att göra en andra ankarpunkt.

Klicka och håll ner Penverktyg för att avslöja de extra verktygen och välj Konvertera ankarpunkten. Klicka och dra en av ankarpunkterna för att skapa en kurva.

Klicka på Typverktyg och sväva över början av kurvlinjen tills markören visar en vågig linje.

Klicka på konstkortet och markören kommer att placeras på den kurviga linjen. Skriv "Kolla in min fantastiska kurviga linje !!" (eller något lika coolt).

Steg 2: Ställa in alternativen

Öka textens storlek om det behövs, klicka sedan på Arkiv> Spara som. Välj "SVG" från rullgardinsmenyn Format och välj ett namn och en plats för din fil innan du klickar på "Spara". Några av SVG Options-inställningarna gäller inte vår situation. låt oss gå över de inställningar vi behöver ange. Ange "SVG Profiler" till "SVG 1.1". I rutan "Typsnitt" anger du "Typ" till "SVG" och "Subsetting" till "None (Use System Fonts)". Klicka på knappen "Fler alternativ" i nedre vänstra hörnet. I rutan "Avancerade alternativ" anger du "CSS-egenskaper" till "Presentationsegenskaper". Se till att du bara markerar rutorna bredvid "Output fewer element "och" Använd element för text på väg ".

Klicka på "OK" och stäng Illustrator.

Steg 3: Förbereda XHTML-filen

Starta din textredigerare och skapa en ny XHTML-fil. Lägg till följande kod i filen:

     SVG iBooks Exempel

Bortsett från de typiska EPUB- och XHTML-namnområdena märker du två nya namnområden, en för "svg" och den andra för "xlink". Båda dessa namnområden krävs för SVG. Utsikten här matchar storleken på vår ursprungliga Illustrator-fil. Om du har valt olika dimensioner för din Illustrator-fil vill du ändra din visningskod för att matcha Illustrator-dimensionerna.

Steg 4: Lägg till SVG-koden

Lägg till följande SVG-kod inuti kropp märka.

Med hjälp av namnet "svg:" definierar vi några olika saker, till exempel den version av SVG vi använder och hur vi hanterar vitt utrymme. "ID" kan vara allt du vill.

Bandata

Vi ska kopiera fem bitar av information från Illustrator SVG-filen och placera dem på samma plats i XHTML-filen. Öppna Illustrator SVG-filen i din textredigerare. Kopiera alfanumeriska sökdata som finns i citat bredvid d =.

Klistra in sökdata i citat bredvid d = i din XHTML-fil. SVG-bandata innehåller nyckeln till kurvan, ger instruktioner för var du ska flytta till, hur du skapar kurvan och var du ska avsluta linjen.

startOffset

Tillbaka i SVG-filen, kopiera procentandelen bredvid startOffset = och klistra in den i startOffset = citat i din XHTML-fil.

De startOffset bestämmer hur långt från början av raden texten ska börja.

typsnittsfamilj

Navigera tillbaka till SVG-filen och kopiera namnet på teckensnittet i citat bredvid font-family =. Klicka på XHTML-filen och klistra in teckensnittet i citat bredvid font-family =.

textstorlek

Klicka på SVG-filen igen och kopiera numret i citat bredvid font-size =. Klicka på XHTML-filen och klistra in storleken i citat bredvid font-size =.

Text

Återigen, navigera tillbaka till SVG-filen. Kopiera raden av text som visas på kurvan och klistra in den mellan öppningen och stängningen svg: tspan taggar.

Steg 5: Testning

Låt oss ta en snabb titt i Safari för att se hur det ser ut. Öppna XHTML-filen i Safari för att se den kurviga linjen.

Slutsats

Lägga till kurvig text i din iBook kan få din text till liv, lägga till känslor och en realism för ditt projekt.

Koda