Kurz SVG – typografie (pokročilá práce s textem)

1. června 2005

•

Mezi opravdové grafické lahůdky patří i pokročilé typografické schopnosti formátu SVG. Velmi zběžně už jsme na Intervalu probrali základní textové prvky. Tentokrát se podíváme na takové speciality, jako je například umístění textu podél obecné křivky…

Mnohokráte už jsem vážené čtenáře přesvědčoval o výjimečnosti grafického formátu SVG, který je skutečně hoden velkého písmene G ve svém názvu. Toto tvrzení platí i v oblasti práce s písmem.

Pro výměnu grafických dat existují samozřejmě další formáty s obdobnými schopnostmi – mám teď na mysli především EPS level 3, respektive PDF – velmi komplikované formáty určené především pro profesionální předtiskovou přípravu. I když se různě diskutuje o jejich možném nahrazení SVG, nemyslím si, že je to reálné nebo žádoucí.

Síla SVG spočívá v trochu jiných oblastech, mezi něž lze počítat především kompatibilitu s XML a s tím spojenou relativní jednoduchost, průhlednost a otevřenost, snadnost úprav a vytváření, interaktivitu a podobně.

Průběh vykreslování textu

Nejprve si povíme něco málo o terminologii normy SVG a postupu vykreslování, což nám pomůže lépe pochopit další pasáže. Přestože se nyní budu zabývat textem daleko podrobněji než v předchozích článcích, mějte, prosím, na zřeteli, že v zájmu lepší stravitelnosti tohoto textu se stále dopouštím mnohých zjednodušení. Především pomíjím schopnosti SVG tisknout exotické ne-latinkové texty jako jsou hebrejština, arabština, japonština a spol. V našich krajích schopnost vykreslovat text vertikálně a podobně pravděpodobně stejně nevyužijete.

Terminologie

text on a path: Text na křivce (cestě) – jednotlivá písmenka vykreslovaného textového řetězce se umísťují podél zadané obecné křivky. Pokud už jste někdy pracovali s programy typu Illustrator nebo InDesign, možná jste využili odpovídající funkci (například „Path Type Tool“ v AI).
reference orientation: Referenční směr, ve kterém je „postaven“ aktuálně vykreslovaný znak (tedy směr od účaří znaku k jeho hlavě) – jak asi tušíte, referenční směr bude většinou shodný se zápornou osou Y (což je současně i výchozí hodnota). Zajímavější vše samozřejmě bude u textu na křivce – orientace bude vždy kolmicí ke křivce v aktuální poloze pomyslného textového kurzoru (current text position).
current text position: Aktuální poloha pro vykreslování textu. SVG prohlížeč ji po vykreslení jednoho každého znaku upraví podle aktuálních parametrů textu a nastaví na místo pro vykreslení znaku dalšího.
text chunk: Textový blok – začíná vždy, když je uvnitř SVG textu definována nová absolutní poloha.

Velkým plusem SVG grafiky je, že veškeré textové prvky jsou ve správně implementovaném prohlížeči vykreslovány stejnou metodou jako jakýkoli jiný grafický prvek v SVG. Tedy pracuje se ve shodném souřadnicovém systému, s možností využití všech dostupných metod vyplňování, ořezávání a maskování.

Zdůrazňuji, v SVG je absolutně jedno, zda se jedná o výplň či tah. Což je častokráte v příkrém kontrastu se schopnostmi aplikací – jen si zkuste pár grafických editorů a zcela určitě zjistíte, že ne vždy lze aplikovat barvové přechody či textury na text (a u obrysů textu jsou omezení ještě daleko větší).

Textové prvky v SVG-XML specifikaci

Nyní si stručně a heslovitě připomeňme základní prvky text a tspan. Příklady jsou otestovány v prohlížečích ASV 3 a Batik 1.5.

Prvek `text`

Základním prvkem pro vkládání textu je text. Pro formátování se používají atributy zavedené v normě CSS a další, zavedené v SVG specifikaci k zápisu pokročilých vlastností.

Prvek `tspan`

Tento element slouží k formátování jednotlivých textových řádků nebo částí těchto řádků. Jeho hlavním účelem je takzvané logické (sémantické) strukturování textového obsahu, při kterém prvek text představuje hlavní blok textu, který je právě prvky tspan rozdělen například na řádky, nebo třeba na bloky s odlišným formátováním.

Logickým dotažením této úvahy se dostaneme k tomu, že SVG prohlížeče, které dovolují označování a výběr textu v SVG grafice a následně například jeho kopírování do systémové schránky, by rozhodně měly umožnit výběr celého prvku text v jednom celku.

Faktem, který jsem dostatečně nezdůraznil, je, že zmíněné prvky text a tspan mohou oba používat v podstatě stejné atributy, které si shrneme o kousíček nížeji. Toto připomínám hlavně v souvislosti se standardem SVG Tiny 1.1, který byl nedávno nativně implementován i v moderním webovém prohlížeči Opera 8. SVG Tiny 1.1 totiž umožňuje používat pouze element text.

<text x=“250″ y=“150″
font-family=“Helvetica“ font-size=“55″
fill=“blue“ >
toto je grafický text uvnitř SVG
</text>

Atributy:

x, y – absolutní poloha textu (ve výchozím stavu se text vykresluje od tohoto referenčního bodu doprava – relativní zarovnávání k tomuto bodu lze ovšem změnit – viz níže)
font-family – tento atribut nastavuje použité písmo podle pravidel obvyklých v CSS
font-style – normal, italic, oblique
font-variant – normal, small-caps
font-weight – „tučnost“ písma: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
font-stretch – vodorovná deformace písma: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
font-size – velikost písma
kerning – mezery mezi písmeny, bere se z definice písma (hodnota „auto“) nebo se nastaví na nějakou konstantní hodnotu
letter-spacing – tato hodnota se přičítá k hodnotě kerningu
word-spacing – mezery mezi slovy
text-decoration – underline, overline, line-through, blink, none
dx = (posun)+ Udává dodatečný (relativní) posun znaků uvnitř aktuálního textového prvku. Můžete zde uvést i více hodnot než jen jednu. Každá další (x.) hodnota odpovídá ručnímu kerningu (odsazení) mezi písmenem na pozici (x) a (x-1).
dy = (posun)+ Je přesně analogický k chování atributu „dx“, jenom posouvá znaky nahoru či dolů oproti jejich standardnímu účaří. Můžete takto vytvořit například horní nebo dolní indexy a podobně.
rotate = (úhel)+ Dodatečné pootočení všech znaků v aktuálním textovém prvku. Opět může obsahovat více hodnot, pak analogicky (n.) hodnota pootočí (n.) znak. V případě použití více hodnot, ovšem méně než je znaků celkem, by měly znaky bez přiřazené hodnoty zůstat neotočeny (úhel 0). Zdůrazňuji znovu, že v případě uvedení pouze jedné hodnoty budou natočeny všechny znaky – nikoli pouze ten první. (Tento moment není úplně zřejmý a zřejmě díky tomu má s interpretací rotate spousta prohlížečů problémy.)

Tento kód zvětší mezipísmenné mezery ve slově „Latin“ a slovo „Hebrew“ zobrazí s převráceným pořadím písmen:

<text y=“50″>
<tspan x=“5″ dx=“0 2 2 2 2 5 0 0 0 5 22 -12 -11 -8.5 -8.5 -12″>
Latin and Hebrew
</tspan>
</text>

Následující příklad demonstruje atribut rotate:

<text y=“150″>
<tspan x=“5″ rotate=“0 0 0 0 25 75 0 90″>
Really cool!
</tspan>
</text>

Funkce speciálních formátovacích prvků SVG textu (originální SVG, cca 1 kB)

Následující atributy určují zarovnávání textu ve vodorovném a svislém směru okolo referenčního bodu:

text-anchor – vodorovné zarovnání jednoho textového bloku (text chunk) relativně vůči danému referenčnímu bodu. Možné hodnoty: start, middle, end, inherit (doleva, na střed, doprava, dědičné – přebírá se hodnota od nadřazených prvků).
baseline-shift – svislý posun znaků využijete většinou pro horní a dolní indexy. Možné hodnoty: baseline, sub, super, inherit (účaří, dolní index, horní index, dědičné) nebo číselná hodnota v aktuálním souřadnicovém systému anebo v procentech výšky řádku (ta je v SVG definována jako rovná velikosti písma – font-size). Tento atribut lze použít pro prvky tspan, tref, altGlyph, textPath.

SVG má ještě další, poměrně velmi komplikované možnosti jak ovlivnit vertikální posun účaří (baseline) písma pomocí atributů dominant-baseline a alignment-baseline. Jsem přesvědčen, že jejich praktické využití je poměrně nízké, takže se jim zde vyhneme.

Prvek `tref`

Vlastní znakový informační obsah prvku text může být tvořen přímo vloženými znaky, nebo nepřímo odkazem na znaky umístěné na jiném místě. A tento odkaz se specifikuje právě pomocí prvku tref.

Atributy:

xlink:href – URI odkaz na pojmenovaný prvek obsahující text

Dále mohou být použity všechny atributy stejně jako u prvku tspan: x, y, dx, dy a rotate. Mimochodem, animací tref lze bezpracně dosáhnout zajímavých efektů.

<?xml version=“1.0″ encoding=“utf-8″ ?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1//EN“
   „http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=“300px“ viewBox=“0 0 1000 300″
   xmlns=“http://www.w3.org/2000/svg“ version=“1.1″
   xmlns:xlink=“http://www.w3.org/1999/xlink“>
<title>tref – demonstrace textového prvku ‚tref'</title>
<defs>
<text id=“ReferencedText“>
Nepřímo odkazovaná znaková data
</text>
</defs>
<text x=“100″ y=“100″ font-size=“45″ fill=“blue“ >
Přímo vložená znaková data
</text>
<text x=“100″ y=“188″ font-size=“45″ fill=“red“ >
<tref xlink:href=“#ReferencedText“/>
<tref x=“100″ dy=“48″ xlink:href=“#ReferencedText“/>
</text>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“998″ height=“298″
fill=“none“ stroke=“blue“ stroke-width=“2″ />
</svg>

Demonstrace textového prvku "tref"
Demonstrace textového prvku „tref“ (originální SVG, cca 1 kB)

Text umístěný na obecné křivce

Bezpochyby velmi atraktivní schopnost SVG patří ovšem mezi ty implementačně náročnější. Podle mých testů umí vykreslovat tento prvek prohlížeče ASV, Batik a KSVG. O všech jste se mohli již na Intervalu dočíst.

Text, jenž má být umístěn na křivce, se uzavře do elementu textPath s atributem xlink:href, který odkazuje na prvek path s definicí křivky.

Vzdálenost podél křivky

Při umísťování textu na křivku je potřeba vypočítat délku měřenou podél konkrétní křivky. Jelikož se nejedná o jednoduché výpočty, norma nenutí prohlížeče implementovat absolutně přesné řešení.

Namísto toho se nabízí alternativní možnost použít dodatečný atribut pathLength, ve kterém autor prohlížeči sdělí skutečnou délku dotyčné křivky, která pak bude zpětně prohlížečem použita pro umísťování objektů podél křivky. Použitím tohoto atributu by se měly zcela eliminovat možné drobné rozdíly mezi prohlížeči od různých výrobců.

Kreslicí příkazy moveto mají pro účely výpočtu délky křivky hodnotu 0.

Prvek `textPath`

Atributy:

xlink:href – URI odkaz na prvek path, obsahující křivku, podle které se bude text umísťovat. Hodnoty souřadnic se zpracovávají tak, jako by byly ve stejném souřadnicovém systému jako aktuální prvek text (nikoli v systému, kde je definován prvek path).
startOffset – tímto atributem se nastaví aktuální poloha textu jako posun (offset) měřený od počátku křivky. Tuto vzdálenost je možné měřit v aktuálním souřadnicovém systému, anebo v procentech – přičemž 100 % je logicky celková délka křivky. Tuto hodnotu lze animovat a dosáhnout tak snadno velmi zajímavých efektů.
method – možné hodnoty: align, stretch – metoda, kterou se text natáčí (přizpůsobuje) podél křivky. Při první variantě se jednotlivé glyfy nedeformují. Praktickým důsledkem bude mimo jiné to, že například u písem napodobujících vzhled ručně psaného textu – a u kterých na sebe většina znaků plynule navazuje – bude tato návaznost porušena. U druhé metody se znaky pomocí warpingu deformují a zmíněné psací písmo zůstane hezky plynule propojeno. Jistě si živě dokážete představit náročnost této metody, což z ní činí skutečný prubířský kámen prohlížečů. (Oříšek natolik tvrdý, že v současnosti neexistuje prohlížeč, který by zmíněný warping uměl.)

<?xml version=“1.0″ encoding=“utf-8″ ?>
   <!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1//EN“
„http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg width=“300px“ viewBox=“0 -100 1000 300″ version=“1.1″
   xmlns=“http://www.w3.org/2000/svg“
   xmlns:xlink=“http://www.w3.org/1999/xlink“>
<defs>
<path id=“krivka“
d=“M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100″ />
</defs>
<title>textPath – text umístěný na křivce</title>
<desc>
parametr method=“stretch“ zatím (2005-05)
bohužel nezvládá žádný prohlížeč
</desc>
<use xlink:href=“#krivka“ fill=“none“ stroke=“red“ />
<text font-family=“‚Times CE‘, ‚Times New Roman‘, serif“
font-size=“72″ font-weight=“normal“ fill=“blue“ >
<textPath xlink:href=“#krivka“ method=“stretch“ >
text
<tspan dy=“-30″ fill=“red“ >
nahoru,
</tspan>
<tspan dy=“30″>
dolů a tak dále
</tspan>
</textPath>
</text>
<!– obrys platna –>
<rect x=“1″ y=“-99″ width=“998″ height=“398″
fill=“none“ stroke=“blue“ stroke-width=“2″ />
</svg>