SVG en Illustrator gebruiken om bochtige tekst te maken

Het toevoegen van een rechte tekstregel in een iBook is vrij eenvoudig, maar wat als je wat flair wilt toevoegen aan je boek met tekst die een gebogen lijn volgt? Dat is wanneer een beetje kennis over SVG en Adobe Illustrator een lange weg gaat. Door Illustrator de SVG-code te laten genereren, bespaart u zelf de tijd voor het berekenen van de curve en tekstplaatsing.

Stap 1: Maak de curve in Illustrator

Begin met het starten van Adobe Illustrator. Klik Bestand> Nieuw om een nieuw bestand te maken. Zorg ervoor dat de breedte en hoogte van uw Illustrator-bestand dezelfde breedte en hoogte hebben als uw viewport in uw XHTML-bestand. In dit voorbeeld gebruiken we de dimensies 612px by 792px:

Klik op de Pen gereedschap in het gereedschapspalet. Klik op het kunstbordvenster om een ankerpunt te maken en klik op een andere locatie over het scherm om een tweede ankerpunt te maken.

Klik en houd de knop ingedrukt Pen gereedschap om de extra hulpmiddelen te onthullen en selecteer Ankerpunt converteren. Klik en sleep een van de ankerpunten om een curve te maken.

Klik op de Type Tool en beweeg over het begin van de bochtige lijn totdat de cursor een golvende lijn toont.

Klik op het kunstbord en de cursor staat op de ronde lijn. Typ 'Bekijk mijn geweldige bochtige lijn !!' (of iets dat even cool is).

Stap 2: de opties instellen

Vergroot de tekst als dat nodig is en klik vervolgens op Bestand> Opslaan als. Kies "SVG" in de vervolgkeuzelijst Formaat en kies een naam en locatie voor uw bestand voordat u op "Opslaan" klikt. Sommige instellingen voor SVG-opties zijn niet van toepassing op onze situatie; laten we de instellingen bekijken die we moeten specificeren. Stel "SVG-profielen" in op "SVG 1.1". Zet in het vak "Lettertypen" "Type" op "SVG" en "Subsetting" op "None (Use System Fonts)". Klik op de knop 'Meer opties' in de linkerbenedenhoek. Stel in het vak "Geavanceerde opties" CSS-eigenschappen in op "Presentatiekeigenschappen". Zorg ervoor dat u alleen de selectievakjes naast 'Minder uitvoer' aanvinkt elementen "en" Gebruik element voor tekst op pad ".

Klik op "OK" en sluit Illustrator.

Stap 3: Het XHTML-bestand voorbereiden

Start uw teksteditor en maak een nieuw XHTML-bestand. Voeg de volgende code toe aan het bestand:

     SVG iBooks Voorbeeld

Afgezien van de typische EPUB- en XHTML-naamruimten, ziet u twee nieuwe naamruimten, één voor "svg" en de andere voor "xlink". Beide naamruimten zijn vereist voor SVG. De viewport komt hier overeen met de grootte van ons oorspronkelijke Illustrator-bestand. Als u verschillende dimensies voor uw Illustrator-bestand hebt geselecteerd, moet u uw viewport-code aanpassen aan de Illustrator-dimensies.

Stap 4: De SVG-code toevoegen

Voeg de volgende SVG-code toe binnen de lichaam label.

Met de naamruimte "svg:" definiëren we een paar verschillende dingen, zoals de versie van SVG die we gebruiken en hoe we om te gaan met witruimte. De "id" kan alles zijn wat je maar wilt.

Padgegevens

We gaan vijf stukjes informatie uit het Illustrator SVG-bestand kopiëren en ze op dezelfde locatie in het XHTML-bestand plaatsen. Open het Illustrator SVG-bestand in uw teksteditor. Kopieer de alfanumerieke padgegevens in de aanhalingstekens naast de d =.

Plak de padgegevens in de aanhalingstekens naast de d = in uw XHTML-bestand. De SVG-padgegevens bevatten de sleutel tot de curve, met instructies voor waar naartoe naartoe, hoe de curve te maken en waar de lijn eindigt.

startOffset

Terug in het SVG-bestand kopieert u het percentage naast startOffset = en plak het in de startOffset = citaten in uw XHTML-bestand.

De startOffset bepaalt hoe ver vanaf het begin van de regel de tekst moet beginnen.

font-family

Navigeer terug naar het SVG-bestand en kopieer de naam van het lettertype in de aanhalingstekens ernaast font-familie =. Klik op het XHTML-bestand en plak het lettertype in de aanhalingstekens naast font-familie =.

lettertypegrootte

Klik opnieuw op het SVG-bestand en kopieer het nummer in de aanhalingstekens ernaast font-size =. Klik op het XHTML-bestand en plak het formaat tussen de aanhalingstekens naast font-size =.

Tekst

Navigeer nogmaals terug naar het SVG-bestand. Kopieer de regel tekst die op de curve verschijnt en plak deze tussen openen en sluiten svg: tspan labels.

Stap 5: Testen

Laten we even kijken in Safari om te zien hoe het eruit ziet. Open het XHTML-bestand in Safari om de ronde lijn te zien.

Conclusie

Door bochtige tekst aan uw iBook toe te voegen, kunt u uw tekst tot leven brengen door emotie en een gevoel van realisme toe te voegen aan uw project.

Code