Bruke SVG & Illustrator til å lage Curvy Text

Å legge til en rett linje med tekst i en iBook er ganske grei, men hva om du vil legge til litt stil i boken din med tekst som følger en buet linje? Det er da en liten SVG- og Adobe Illustrator-kunnskap går langt. Ved å la Illustrator generere SVG-koden, sparer du tiden for å beregne kurven og teksten plassering på egen hånd.

Trinn 1: Opprett kurven i Illustrator

Start med å starte Adobe Illustrator. Klikk Fil> Ny å opprette en ny fil. Pass på at bredden og høyden på Illustrator-filen din har samme bredde og høyde som visningsporten i XHTML-filen din. I dette eksemplet bruker vi dimensjonene 612px med 792px:

Klikk på Pennverktøy i verktøylinjen. Klikk på kunstbrettvinduet for å lage et ankerpunkt og klikk et annet sted over skjermen for å lage et andre ankerpunkt.

Klikk og hold på Pennverktøy for å avdekke tilleggsverktøyene, og velg Konverter ankerpunkt. Klikk og dra et av ankerpunktene for å lage en kurve.

Klikk på Typeverktøy og svinger over begynnelsen av den svingete linjen til markøren viser en bølgete linje.

Klikk på kunstbrett og markøren vil bli plassert på den kurvede linjen. Skriv "Sjekk ut min fantastiske svingete linje!" (eller noe like kult).

Trinn 2: Angi alternativer

Øk størrelsen på teksten hvis nødvendig, og klikk deretter Fil> Lagre som. Velg "SVG" fra rullegardinmenyen Format og velg et navn og et sted for filen din før du klikker "Lagre". Noen av SVG-valginnstillingene gjelder ikke for vår situasjon; la oss gå over innstillingene vi må spesifisere. Sett "SVG Profiler" til "SVG 1.1". I boksen "Fonter" sett "Type" til "SVG" og "Subsetting" til "None (Use System Fonts)". Klikk på knappen "Flere alternativer" nederst i venstre hjørne. I boksen "Avanserte alternativer" angir du "CSS-egenskaper" til "Presentasjonsegenskaper". Pass på at du bare merker av i boksen ved siden av "Utgang færre elementer "og" Bruk element for tekst på vei ".

Klikk "OK" og lukk Illustrator.

Trinn 3: Klargjøre XHTML-filen

Start teksteditoren din og opprett en ny XHTML-fil. Legg til følgende kode i filen:

     SVG iBooks Eksempel

Bortsett fra de typiske EPUB- og XHTML-navneområdene, vil du legge merke til to nye navneområder, en for "svg" og den andre for "xlink". Begge disse navneområdene kreves for SVG. Visningsporten samsvarer med størrelsen på vår opprinnelige Illustrator-fil. Hvis du valgte forskjellige dimensjoner for Illustrator-filen, vil du endre visningsportkoden for å matche Illustrator-dimensjonene.

Trinn 4: Legge til SVG-koden

Legg til følgende SVG-kode inne i kropp stikkord.

Ved å bruke "svg:" -navnet, definerer vi noen få forskjellige ting, for eksempel versjonen av SVG vi bruker og hvordan du håndterer det hvite rommet. "ID" kan være alt du liker.

Bandata

Vi skal kopiere fem stykker informasjon fra Illustrator SVG-filen og plassere dem på samme sted inne i XHTML-filen. Åpne Illustrator SVG-filen i tekstredigeringsprogrammet. Kopier alfanumeriske banen data plassert i anførselstegn ved siden av d =.

Lim inn banedataene inne i sitatene ved siden av d = i XHTML-filen din. SVG-banen data holder nøkkelen til kurven, gir instruksjoner for hvor du skal flytte til, hvordan du lager kurven og hvor du skal avslutte linjen.

startOffset

Tilbake i SVG-filen, kopier prosentandelen ved siden av startOffset = og lim det inn i startOffset = sitater i XHTML-filen din.

De startOffset bestemmer hvor langt fra begynnelsen av linjen teksten skal begynne.

font-family

Naviger tilbake til SVG-filen og kopier navnet på skrifttypen inne i sitatene ved siden av font-family =. Klikk på XHTML-filen og lim inn skriftstedet i anførselstegn ved siden av font-family =.

skriftstørrelse

Klikk på SVG-filen igjen og kopier nummeret inne i sitatene ved siden av font-size =. Klikk på XHTML-filen og lim inn størrelsen inne i sitatene ved siden av font-size =.

Tekst

Igjen, navigere tilbake til SVG-filen. Kopier tekstlinjen som vises på kurven og lim den inn mellom åpning og lukking svg: tspan tags.

Trinn 5: Testing

La oss ta en rask titt i Safari for å se hvordan det ser ut. Åpne XHTML-filen i Safari for å se den kurvede linjen.

Konklusjon

Hvis du legger til svingete tekst i din iBook, kan du få teksten din til liv, legge til følelser og en følelse av realisme i prosjektet.

Kode