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

22. června 2005

•

Dobře známým problémem webu je dostupnost, či spíše nedostupnost konkrétního písma na konkrétním klientském zařízení. Obzvláště u stránek s důrazem na prezentační stránku je potřeba mít k dispozici písma použitá v původním grafickému návrhu, aniž by bylo nutné převádět velké množství textu na obrysové křivky. Proto mezi pokročilé prvky formátu SVG patří i možnost definice vlastního písma.

Specifikace SVG 1.1 počítá s využitím takzvaných WebFonts definovaných Cascading Style Sheets (CSS) level 2. Jak je uvedeno na webu W3C, poměrně komplexně definované WebFonts mají v současnosti jednu nevýhodu – totiž tu, že CSS2 nevyžaduje striktně jejich kompletní podporu. Výsledkem je, že různé implementace podporují různé formáty, což nás, samozřejmě, staví zpět před původně nadnesený problém.

Tento problém řeší obecný formát písma definovaný už v SVG 1.0, takzvané SVG fonts. Mimochodem, pro generování těchto písem existuje v projektu Batik prográmek dovolující jejich konverzi z široce rozšířeného formátu TTF.

Písmo v SVG fonts z důvodu maximální jednoduchosti obsahuje takzvané nehintované definice písmových obrysů (unhinted font outlines). Pokud znáte historický vývoj počítačové grafiky, pak již jistě víte, že obecně známou nevýhodou takto definovaných písem je horší kvalita a čitelnost při vykreslování v menších velikostech. Je tedy vhodné je používat na titulky nebo třeba různé grafické hříčky s tvary znaků, ale při vytváření informačního textového obsahu se spolehnout na systémová písma, respektive na WebFonts.

Klíčovou vlastností SVG písem je ale zaručená dostupnost ve všech prohlížečích dodržujících standard SVG 1.x.

Písmo může být vloženo ve stejném SVG dokumentu spolu s grafikou, nebo v externím souboru obsahujícím pouze toto písmo. Zde je příklad použití:

<?xml version=“1.0″ encoding=“utf-8″ ?>
<svg width=“300px“ height=“200px“ version=“1.1″ xmlns = „http://www.w3.org/2000/svg“>
<title>
font-embed – ukázka umístění
SVG fontu přímo uvnitř gr. souboru
</title>
<defs>
<font horiz-adv-x=“313″>
<!– Converted by Batik ttf2svg –>
<font-face font-family=“Larabie Anglepoise“
font-weight=“normal“ font-style=“normal“
units-per-em=“1000″ panose-1=“0 0 4 0 0 0 0 0 0 0″
ascent=“703″ descent=“-300″ alphabetic=“0″/>
<missing-glyph horiz-adv-x=“500″
d=“M63 0V700H438V0H63ZM125 63H375V638H125V63Z“/>
<glyph unicode=“S“ glyph-name=“S“
horiz-adv-x=“385″
d=“M371 1H29V144H264Q264 151 264 166Q265 180 265 188
Q265 212 249 212H132Q83 212 55 247Q29 279 29 329
V566H335V422H136V375Q136 360 144 356Q148 355 168 355
H279Q327 355 352 309Q371 273 371 221V1Z“/>
<glyph unicode=“V“ glyph-name=“V“
horiz-adv-x=“351″
d=“M365 563L183 -33L0 563H101L183 296L270 563H365Z“/>
<glyph unicode=“G“ glyph-name=“G“
horiz-adv-x=“367″
d=“M355 1H18V564H355V420H125V144H248V211H156V355H355V1Z“/>
<hkern g1=“V“ g2=“G“ k=“-40″/>
</font>
</defs>
<text x=“10″ y=“177″ font-size=“155″
font-family=“‚Larabie Anglepoise‘, sans-serif“ >
SVG+
</text>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“298″ height=“198″
fill=“none“ stroke=“blue“ stroke-width=“2″ />
</svg>

Jak vytvořit vlastní písmo v SVG (originální SVG, cca 1 kB)

Dále můžete vidět, jak uložit písmo do samostatného SVG souboru a jak se na něj posléze odkazovat pomocí vlastnosti CSS @font-face. Toto je soubor s SVG písmem:

<?xml version=“1.0″ encoding=“utf-8″ ?>
<svg version=“1.1″ xmlns = „http://www.w3.org/2000/svg“>
<title>
svg-font – písmo umístěné
v samostatném souboru SVG
</title>
<defs>
<font id=“larabie“ horiz-adv-x=“313″>
<!– Converted by Batik ttf2svg –>
<font-face font-family=“Larabie Anglepoise“
font-weight=“normal“ font-style=“normal“
units-per-em=“1000″ panose-1=“0 0 4 0 0 0 0 0 0 0″
ascent=“703″ descent=“-300″ alphabetic=“0″/>
<missing-glyph horiz-adv-x=“500″
d=“M63 0V700H438V0H63ZM125 63H375V638H125V63Z“/>
<glyph unicode=“S“ glyph-name=“S“
horiz-adv-x=“385″
d=“M371 1H29V144H264Q264 151 264 166Q265 180 265 188
Q265 212 249 212H132Q83 212 55 247Q29 279 29 329
V566H335V422H136V375Q136 360 144 356Q148 355 168 355
H279Q327 355 352 309Q371 273 371 221V1Z“/>
<glyph unicode=“V“ glyph-name=“V“
horiz-adv-x=“351″
d=“M365 563L183 -33L0 563H101L183 296L270 563H365Z“/>
<glyph unicode=“G“ glyph-name=“G“
horiz-adv-x=“367″
d=“M355 1H18V564H355V420H125V144H248V211H156V355H355V1Z“/>
<hkern g1=“V“ g2=“G“ k=“-40″/>
</font>
</defs>
</svg>

Zde se ukazuje, jak externě uložené písmo použít (bohužel nefunguje v ASV3):

<?xml version=“1.0″ encoding=“utf-8″ ?>
<svg width=“300px“ height=“200px“ version=“1.1″ xmlns = „http://www.w3.org/2000/svg“>
<defs>
<title>
svg-font-use – ukázka použití
SVG písma z externího souboru
</title>
<style type=“text/css“>
<![CDATA[
@font-face {
   font-family: ‚Larabie Anglepoise‘;
   font-weight: normal;
   font-style: normal;
   src: url(„svg-font.svg#larabie“) format(svg)
}
]]>
</style>
</defs>
<text x=“100″ y=“100″
font-family=“Larabie Anglepoise“
font-size=“100″>
SVG font
</text>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“298″ height=“198″
fill=“none“ stroke=“blue“ stroke-width=“2″ />
</svg>

Prvek `font`

Každý prvek font musí mít vnořený prvek font-face popisující různé charakteristiky písma.

Atributy:

horiz-origin-x – X souřadnice referenčního bodu pro každý znak v právě definovaném SVG písmu. (Nepovinný atribut – výchozí hodnota je přirozeně 0.)
horiz-origin-y – Y souřadnice referenčního bodu pro každý znak v právě definovaném SVG písmu. (Nepovinný atribut – výchozí hodnota je 0.)
horiz-adv-x – výchozí hodnota pro posun virtuálního textového kurzoru na místo dalšího znaku poté, co se vykreslí předchozí znak.
vert-adv-y – ekvivalent hodnoty horiz-adv-x pro svisle orientovaný text.
vert-origin-x – ekvivalent hodnoty horiz-origin-x pro svisle orientovaný text.
vert-origin-y – ekvivalent hodnoty horiz-origin-y pro svisle orientovaný text.

Prvek `glyph`

Tento prvek popisuje vlastní obrysy znaku (glyfu). V jednodušším případě jsou obrysy definovány obecnou křivkou pomocí atributu d, se shodným významem jako u prvku path.

Může zde být i obecná SVG grafika, což ale k praktickému využití zatím moc nedoporučuji, jelikož implementace tohoto způsobu je daleko složitější a obávám se, že mnoho současných prohlížečů si na něm vyláme zoubky.

Atributy:

unicode – jeden nebo více Unicode znaků definujících textovou sekvenci, odpovídající tomuto glyfu. (Pokud se snad pozastavujete nad výrazem sekvence, vzpomeňte si na takové typografické fajnovosti, jako třeba slitky (ligatures), a rázem bude jasno, k čemu je to vlastně dobré.) Příklad: unicode="ffl".
glyph-name – jméno znaku (uvnitř daného písma jedinečné). Může být použito v případech, kdy jeden znak má v daném písmu několik alternativ. (Pokud byste potřebovali lepší představu, vezměte si sázecí program InDesign a podívejte se v něm zblízka na paletu glyfů pro nějaké kvalitní OpenType písmo, například „Minion Pro“ – viz ilustrační obrázek.) Jména glyfů mohou být použita při definici kerningu.
d – definice obrysu písma pomocí stejné syntaxe, jako v případě elementu path. Velmi zajímavé to začíná být, když si uvědomíte, že je povolena i kombinace atributu d a obecné SVG grafiky (ta je případně umístěna uvnitř XML prvku glyph). Zde se skrývají obrovské grafické možnosti. Jak už jsem naznačoval, zatímco vykreslování obrysu definovaného pomocí d bude relativně snadné a v podstatě velmi podobné obyčejnému písmu, druhý případ bude pro SVG prohlížeč dosti složitý a samozřejmě výkonově daleko náročnější.
lang – jazykový kód podle normy RFC3066, může být použit v případech, kdy různé jazyky mají odlišnou podobu téhož znaku.
horiz-adv-x – posun virtuálního textového kurzoru na místo dalšího znaku poté, co se vykreslí předchozí znak.
vert-adv-y – svislý posun virtuálního textového kurzoru na místo dalšího znaku poté, co se vykreslí předchozí znak (pro svisle orientovaný text).
vert-origin-x – X souřadnice referenčního bodu pro svisle orientovaný text (nepovinný atribut).
vert-origin-y – Y souřadnice referenčního bodu pro svisle orientovaný text (nepovinný atribut).
arabic-form – použití pro arabská písma, možné hodnoty jsou: initial, medial, terminal, isolated.

Prvek `missing-glyph`

Definuje grafiku, která se vykreslí v případě, že uživatel omylem požaduje zobrazit znak, který v daném fontu není definován. Atributy jsou shodné s prvkem glyph.

Prvky `hkern` a `vkern`

Pokud jste se náhodou s termínem kerning dosud nesetkali, pak vězte, že se jedná o rozestup mezi konkrétní dvojicí znaků. Smyslem kerningu je napomoci lepšímu vzhledu a čitelnosti textu co nejlepším určením těchto rozestupů mezi různými dvojicemi znaků.

Prvky hkern a vkern dovolují autorovi písma určit horizontální, respektive vertikální kerning (rozestup) mezi dvěma konkrétními znaky, u kterých by normální metoda určení rozestupu (využívající výpočet ze šířky znaků) neposkytla uspokojivé výsledky – klasickým příkladem z učebnic mohou být například dvojice „AV“ nebo „Va“.

Aby kerning mohl fungovat, musí být splněny určité logické podmínky – oba znaky musí pocházet ze stejného písma a musí mít shodné i všechny následující atributy: font-family, font-size, font-style, font-weight, font-variant, font-stretch, font-size-adjust a font.

Atributy:

u1 – seznam možných Unicode znaků (oddělených čárkami), tvořících první polovinu kerningového páru (seznam možných kandidátů je souhrnem znaků uvedených v obou atributech u1 plus g1).
g1 – seznam jmen znaků (oddělených čárkami) z první poloviny kerningového páru.
u2 – jako u1, ale pro druhou polovinu páru.
g2 – jako g1, ale pro druhou polovinu páru.
k – „k“ jako magická konstanta určující, o kolik se zmenší mezera mezi znaky kerningového páru (kladná hodnota zmenšuje mezeru).