Szöveg

Az SVG-ben elkészített képeket szabadon elláthatjuk feliratokkal is. Ez az előző fejezet után már nem lenne megoldhatatlan feladat, mert tetszőleges vonalat meg tudunk rajzolni. Lehetne éppenséggel egy betű körvonala ilyen rajz. Ennek a módszernek a használata azonban nem tanácsos, mert minden olyan előnyt elveszítünk vele, amit a szabályosan, az erre szolgáló elemmel megrajzolt szövegek birtokolnak. Nagyon hasznos tulajdonsága az ilyen szövegeknek, hogy az ábrán kijelölhetőek és szabadon másolhatóak. Ezen kívül az internetes keresők is meg tudják találni az így készített feliratokat, ami egy hagyományos módon készítet kép esetén egyáltalán nem lehetséges. Az, hogy a betűk, szavak kereshetőek és meg is találhatóak, lehetővé teszi akár komplett weboldalak SVG-ben történő elkészítését is anélkül, hogy bármilyen hátrányt szenvedne a tulajdonos a kereshetőség terén. Ebben a fejezetben szövegek elhelyezéséről lesz szó.

A szöveges adatok kiírására a <text> elem szolgál. Az eddigiektől eltérően ez nem egy üres XML elem, mint az összes eddig megismert, hanem szöveges tartalma is van. Azaz külön kell nyitó és lezáró elemet készítenünk hozzá. Ezek közt helyezkedik el a megjelenítendő szöveg:
<text x= ""  
  y= ""  
  style= "" >
Ez a szöveg kerül kiírásra.
</text>  

Az x és y attribútumban kell megadni, hogy hol helyezkedjen el a szöveg. Ha másként nem rendelkezünk, akkor a megadott pontok a szöveg kezdetét adják meg, vagyis azt a vízszintes vonalat, melyre a szöveg kerülni fog és azt a pontot, ahol a szöveget elkezdjük kiírni. A vízszintes vonal nem betűk legalsó részét adja meg, ez az a vonal, amire a vonalas füzetekben írunk. Erről a vonalról például az f és a g betűk szára lelóg.
A dx, dy és rotate attribútumok betűnkénti állítási lehetőségeket nyújtanak. Mindhárom attribútumban felsorolhatunk számértékeket, melyek sorban egy-egy betűre vonatkoznak. Az első szám az első betűre, a második a másodikra, stb. A számok megadják, hogy az eredetihez képest a következő összes betű mennyivel legyen eltolva x és y irányban, ill. mekkora szöggel legyen elforgatva.
A style attribútumban pedig a szövegekre általánosan használatos CSS tulajdonságokat állíthatjuk be.

10/1. feladat:

Írd ki az "SVG" szöveget a (40,60) ponttól kezdve.


Szöveg tulajdonságai

Ebben a részben röviden a legfontosabb stílusjellemzőkről lesz szó. Ezek általában használhatóak minden szövegre, azonban van olyan eset is, amikor nem működnek megfelelően. Ilyenkor érdemes megpróbálkozni azzal, hogy a kérdéses tulajdonságot nem a style attribútum részeként, hanem különálló attribútumként adod meg. Van olyan eset, amikor ez megoldja a problémát. Általában elmondható, hogy a betűk használata sokszor okoz problémákat, különös tekintettel az ékezetekre és a speciális karakterekre. Ennek oka, hogy néhány karakter nem szerepel minden betűtípusban. Tipikus példa erre a magyar hosszú ékezetes betűk közül az Ő és az Ű.
Sokszor a probléma elhárításához elegendő valamelyik tulajdonság megadása is. Ilyen az első feladat ebben a fejezetben. A megoldásban csupa nagybetűvel szerepel az SVG szó. Internet Explorer használatakor azonban csupa kis betűvel jelenik meg. Ha beállítunk valamilyen betűtípust, a hiba megszűnik.
Az említett okok minden olyan ábrán, ahol használunk betűket is, le kell ellenőrizni, hogy milyen környezetben működik megfelelően a kiírás. Ha valamilyen speciális eredményt kapunk, akkor ezt az ábra mellett fel kel tüntetni.

Általában kiküszöbölhetők a problémák néhány szabály betartásával. Egyrészt meg kell adni a karakterkódolást, ami esetünkben UTF-8. Azaz az eddigi fejlécet kell használni, de a karakterkészlet megadása most kötelező. Nem szabad megfeledkezni az ennek megfelelő mentésről. Annak érdekében, hogy minden betű megjeleníthető legyen célszerű a betűtípus megadásakor valamelyik általános készletet (is) megjelölni.

Ahogyan az összes eddigi jellemzőnél most is CSS formátumban kell megadni a stílusjellemzőket, ugyanúgy, mint az eddigi alakzatok esetében. Minden tulajdonság megadható most is, ami alakzatok kitöltésére ill. körvonalára vonatkozott. Gyakorlatilag szabad kezet kapunk saját betűstílusok készítésére. A szabadságot azonban nem minden esetben kell teljesen kihasználni, mindig figyelembe kell venni, hogy hova szánunk egy-egy feliratot.

A következő részben rövid összefoglalót találsz a legfontosabb jellemzőkről és jellegzetes értékeikről. Ez nem egy teljesen részletezett leírás, az összes használható értékről a specifikációban találsz részletes információkat.

font-family

Ez a jellemző tartalmazhatja a használandó betűkészlet nevét ill. általános betűcsalád megjelölését is. Ha több lehetőséget szeretnénk megadni, akkor szóközzel kell őket elválasztani. Három általános betűcsalád létezik, ezeket az alábbi táblázat tartalmazza:
serif Talpas betűket tartalmazó készletek.
sans-serif Talp nélküli betűkészletek.
monospace Azonos betűszélességű készletek (olyan, mintha írógép írta volna).
Általában valamilyen betűcsaládot mindig érdemes megjelölni, mert valószínűbb, hogy helyes lesz a szöveg megjelenítése.

font-size

Ez a tulajdonság definíció szerint azt adja meg, hogy két betűvonal között mekkora a távolság, azaz a betűk méretét állíthatjuk be vele.

text-anchor

Ezzel a tulajdonsággal megadhatjuk, hogy a szövegünk eleje, közepe vagy vége igazodjon az x attribútumban megadott ponthoz.
start A szöveg eleje az igazítási pont.
middle A szöveg középre lesz igazítva.
end A szöveg vége igazodik.

font-style

Beállítható, hogy dőltbetűs legyen-e a szöveg.
italic Dőlt betűtípus.
normal Nincsenek megdöntve a betűk.

text-decoration

Valamilyen vonal elhelyezése a szövegen.
none Nincs aláhúzás.
underline Aláhúzott szöveg.
overline Vonal a szöveg fölött.
line-through Áthúzott szöveg.

font-weight

A betű vastagságát határozhatjuk meg.
bold Félkövér betűk.
normal Normál betűszélesség.

10/2. feladat:

Írd ki a "Ha-ha-ha" szöveget a (10,60) pontba. A betű legyen


Több stílust tartalmazó szöveg

Mivel egy <text> elemben egyféle stílust határozhatunk meg, adódhatnak gondok akkor, amikor például egy mondatban csak egyetlen szót szeretnénk vastag betűvel szedni. Ilyenkor a <tspan> elemet kell használni. Ennek segítségével a szövegre vonatkozó beállításokat módosíthatjuk úgy, hogy a külső elemben megadott jellemzők felülíródnak. Ezek az új jellemzők annál a szövegnél fognak megjelenni, amelyik a <tspan> kezdő és lezáró kódeleme között helyezkedik el. Ha a szöveget "több sorba" szeretnénk írni, akkor is hasznos ez az elem.

<tspan x= ""  
  y= ""  
  dx= ""  
  dy= ""  
  rotate= ""  
  style= "" >
Ez a szöveg kerül módosításra.
</tspan>  

Az elem csak egy <text>-be beágyazva használható, de egyszerre többet is használhatunk belőle.

Az x és y attribútumok segítségével megadhatjuk, hogy hol kezdődjön el a szöveg. Ha nem adunk meg nekik értéket, akkor automatikusan folytatódik a már megkezdett helyen az írás, csak más stílussal. A dx, dy és rotate attribútumok a <text> elemnél leírtak szerint működnek.

A style elemben megadhatunk egy baseline-shift tulajdonságot is, melynek segítségével az elemben lévő szöveg alsó ill. felső index lesz. Alsó indexet a sub értékkel lehet készíteni, míg felső indexhez a super értéket kell adni.

10/3. feladat:

Írd ki a "SZINES" szót úgy, hogy minden betű más színű legyen és mindegyik más magasságban helyezkedjen el. Ezen kívül minden tulajdonságot tetszőlegesen adhatsz meg.

10/4. feladat:

Írd ki az alábbi két sort:

Ez egy aláhuzott szó.
Ez pedig a következő sor.

Az első sorban az "alahuzott" szó legyen aláhúzva. A második sorban használj félkövér betűket.


Függőleges szöveg

Előfordulhat olyan eset, amikor függőleges irányú szöveg elhelyezésére van szükségünk. Erre több módszer is rendelkezésünkre áll.

A legkézenfekvőbb lehetőség, hogy elforgatjuk a szöveget egy transzformáció segítségével. Ehhez nem kell ismernünk a szöveget, egyszerűen egy alakzatot forgatunk.

A szövegek tulajdonságait kihasználva is meg tudjuk változtatni az írás irányát. Erre szolgál a writing-mode tulajdonság, melyet a style attribútumban helyezhetünk el. Ennek értékét kell tb-re állítani, hogy függőleges szöveget kapjunk. A két betű a top-to-bottom (fentről lefelé) rövidítése. Az alapbeállítás az rl, mely balról jobbra haladó szöveget jelöl. Ez a típus általában megfelel az elvárásainknak.

Ha függőleges a szövegünk, akkor még egy döntést hozhatunk (de csak akkor, ha a függőleges írásmódot választottuk). Meghatározhatjuk, hogy a betűk iránya milyen legyen. A writing-mode beállításával a szöveg ugyan függőleges lett, de a betűk nem függőlegesen állnak. Ezen a glyph-orientation-vertical tulajdonság beállításával lehet változtatni. Alapbeállítása auto, ez jelenti az elforgatott betűket. Ezen kívül lehet 0, 90, 180 és 270 is az érték. Ilyenkor ekkora szöggel forgatja el a betűket a böngésző az eredeti (függőleges állású) állapotukhoz képest

10/5. feladat:

Készíts egy 200×500-as rajzlapot. Írd ki rá az alábbi három mondatot függőlegesen. A mondatok értelme szerinti módszereket alkalmazd az elforgatásukhoz.

Ez itt egy szoveg forgatva.
A writing-mode beállítás.
Vízszintes betűkkel.


Görbe mentén elhelyezett szöveg

Egy szöveget elkészíthetünk úgy is, hogy nem egy függőleges vagy vízszintes vonalon sorakoznak a betűk, hanem egy tetszőleges görbe mentén. Ehhez a <textPath> elemre van szükség, amely körbefogja a görbére kiírandó szöveget. Ezt az elemet egy <text>-be kell beágyazni, hasonlóan <tspan> elemhez. Egyetlen attribútumot kell megadnunk, amely egy hivatkozás az elkészített görbére. A megadás a <use> elemnél megismert xlink:href attribútumban történik. Hogy használni tudjuk a görbét, el kell készítenünk, és nevet is kell neki adni. A hivatkozáskor a név elé egy # jelet kell tenni. Erről részletesen a "Csoportosítás, elnevezés" fejezetben volt szó.

A görbén a szöveg az elejétől kezdve fog elhelyezkedni. Ezen a tulajdonságon módosíthatunk, ha a <textPath> elemben felveszünk egy újabb attribútumot, a startOffset nevűt. Ebben százalékos formában adhatjuk meg, hogy melyik ponthoz legyen igazítva a szöveg. A szövegek igazításánál volt szó róla, hogy az igazítási ponthoz lehet a szöveg elejét, közepét ill. a végét is illeszteni. Ez a megadás azt mondja meg, hogy a görbe mely pontjához illeszkedjen a szöveg eleje, közepe vagy vége.

10/6. feladat:

A 9/6. feladatban megrajzolt simított Bézier-görbére helyezd el a "Nem egyenes vonalban vannak a szavak." mondatot. A szöveget igazítsd középre. A görbét nem kell kirajzolni.