Při zobrazování textu uvnitř SVG je třeba se odprostit od (celkem přirozeného) pohledu na texty jako sekvenci písmenek (či znaků obecně). Mnohem lepší je na text v SVG nahlížet jako grafický prvek obdélníkového tvaru, v jehož vnitřku jsou jistým způsobem rozmístěny další grafické prvky (znaky).
Nejen s tím souvisí, že text v SVG je opravdu brán jako grafický prvek a nějaké hrátky se zalamováním a podobně jsou zcela nemyslitelné.
Když si na toto zvyknete, můžete nakonec s textem uvnitř SVG-obrázků opravdu kouzlit, ale dá to trochu práce.
Základní použití je jednoduché – text uzavřete do párové značky <text>
a pomocí atributů x a y určíte, odkud se má v obrázku vypsat:
Všimněte si především, že ačkoli je text v jakémsi rámečku (viz zvýraznění pomocí CSS-pravidla outline), tak atributy umístění textu se týkají umístění linky (neboli baseline; souřadnice y) počátečního písmene textu (souřadnice x), v tomto případě tedy levého spodního rohu písmene A
. Nezapomeňte na to, až budete s textem zkoušet hýbat!
A
dopište třeba j
, abyste viděli, že svislé umístění textu se nezmění.
Výchozím nastavením umístění textu sice je úpatí prvního písmene, nicméně CSS-pravidlem text-anchor to jde změnit:
CSS-pravidla pro SVG jsou částečně stejná jako pro HTML a částečně specifická pro SVG. Narozdíl od HTML, kde se dají k elementu (tedy vlastně příslušnému podstromu) přidat buď pomocí atributu @style nebo provázáním přes @class či @id a podobně, se dají zadat také přímo jako atribut daného elementu (jak je vidět na předchozím slajdu), celkem tedy třemi způsoby:
<text text-anchor="middle">
<text style="text-anchor: middle;">
<text id="t1">
při nastavení jinde v dokumentu
<style> #t1 { text-anchor: middle; } </style>
Použití je asi na libovůli tvůrce, byť používání způsobů z HTML je takové, hmm, xmlčtější. Grafický editor při ruční tvorbě obrázku bude ale z pochopitelných důvodů téměř určitě preferovat první způsob, ostatně vymyšlený specificky pro potřeby SVG.
<font>
z HTML 90. let minulého století, akorát ještě horší :-) Nicméně SVG je primárně grafický formát, takže to dává smysl.
Texty v SVG jsou vyloženě grafické prvky, takže nepřekvapí, že mají také svůj tah a výplň. Výchozí nastavení je žádný tah a černá výplň (velikost fontu zvětšena na 44 pixelů):
Další varianty mají svůj osobitý grafický projev:
Dalšími CSS-pravidly, které ovlivňují vzhled textu, jsou pravidlo pro mezeru mezi znaky letter-spacing
a pravidlo pro mezeru mezi slovy word-spacing
:
CSS-pravidla letter-spacing a word-spacing tak trochu obchází (nebo doplňují) čistě SVG-atributy pro určení šíře textu @textLength a @lengthAdjust – roztáhnout (nebo namačkat :-) text do určené šířky nutně znamená zahýbat s mezerami mezi slovy a jednotlivými znaky. Ve výchozím nastavení se hýbe jen s mezerami (tj. @lengthAdjust="spacing"
):
Můžete si ale vyžádat i změnu velikosti znaků:
Teorie (i praxe) směru psaní je dosti složitá. Co by třeba mělo znamenat, že chcete češtinu psát vertikálně? Otočit všechno o
Historicky toto bylo zachyceno armádou vlastností, které byly v podstatě všechny zahozeny a nahrazeny velmi minimalistickým přístupem se dvěma pravidly – writing-mode
(možnosti horizontal-tb, vertical-rl, vertical-lr) a text-orientation
(možnosti mixed, upright, sideways; aplikují se pouze v případě vertikálního textu). Hodně štěstí při hledání prohlížeče, který zobrazí následující SVG stejně, jako kdyby to byl text v HTML:
direction
tomu moc nepomůže.
PS: Doplněk za pomlčkou u writing-mode
říká, jak se bude skládat vícero řádek za sebou – tb = top-bottom, rl = right-left, lr = left-right. Vzhledem k tomu, že SVG-1.1 víceřádkový text neumí, tak je to zatím celkem jedno.
Další – a prozatím i funkčnější – možností, jak zobrazit text v netradičním směru, je použití rotace v CSS:
Obě rotace jsou napsány pro výchozí střed rotace rotate(phi, xs, ys)
.)
Mnohem zábavnější je rotace jednotlivých glyfů v textu pomocí atributu @rotate
– v něm umístěný seznam úhlů (čísla oddělená čárkou) totiž určuje rotaci všech glyfů jeden po druhém:
Jak je vidět, i mezera se počítá mezi glyfy a pokud je úhlů méně než glyfů, jsou zbývající otočeny podle posledního zadaného úhlu.
I zhlediska SVG je text mimo jiné pořád také (jenom) text, takže na něj jdou aplikovat i další CSS-pravidla známá z HTML, především pak:
font-family
– výběr konkrétního fontu, případně generické rodiny fontů
font-size
– velikost fontu
font-kerning
– řízení umístění jednotlivých glyfů písma (pouze pro OpenType-fonty s informací o kerningu)
text-decoration
– v podstatě podtržení, nadtržení a přeškrtnutí
Čistě specifické pro SVG je ale mapování textu na konkrétní cestu v podstatě libovolného tvaru pomocí elementu <textPath>
. Než (pokud) se prosadí nová verze SVG, musíme cestu zadat zcela bokem a pouze se na ni odkázat atributem @href
:
PS: V rámci HTML5 Klidně můžete psát <textpath>
. U editorů SVG to ale asi neprojde, protože ty to nejspíš budou brát jako XML. (Pokud to nebude něco od firmy Adobe, tam si se standardy hlavu nikdy moc nelámali…)
Pokud cesta neslouží jinému účelu než řízení písma, asi ji budete chtít schovat pomocí elementu <defs>
:
PS: Když bude text na dostupnou cestu příliš dlouhý, bude nemilosrdně oříznut. Můžete pak zkusit nakombinovat různé způsoby omezení velikosti, ale když bude nepoměr příliš veliký, čitelné to nevyrobíte.
Dříve býval v SVG element <tref>
, nicméně byl vyřazen. Jeho funkcionalita se ale dá nahradit standardním použitím elementu <defs>
:
<use>
můžete textu přepsat pouze atributy, které nejsou nadefinované uvnitř <defs>
!
Kromě použití stejného textu na více místech se někdy může hodit nadefinovat všechny texty u sebe na jednom místě a skrz obrázek se na ně už jen odkazovat.
Text se dá v rámci obrázku umístit také pomocí atributů @dx a @dy, ale počítají se na první pohled možná poněkud překvapivě: Udávají relativní posun vůči pozici, na níž by se text původně nacházel.
@x
a/nebo @y
je automaticky dosazeno
Aby to bylo ještě zajímavější, když je obsahem atributů @dx
a/nebo @dy
více než jedno číslo, dojde k relativnímu posunu postupně jednotlivých glyfů jeden po druhém:
Při menším počtu hodnot než glyfů jsou trochu překvapivě (proti chování @rotate
) ostatní glyfy neposunuty (tedy posunuty s hodnotou 0).
Jak už název napovídá, elementy <tspan>
mají v SVG tak trochu podobnou funkcionalitu jako elementy <span>
v HTML – obecná podčást nadřazeného elementu, kterou potřebujeme z nějakého důvodu vyčlenit (třeba na ni aplikovat jiné styly):
Jinak mají elementy <tspan>
úplně stejné atributy jako elementy <text>
, tzn.
@x
, @y
– absolutní pozicování celého textu
@dx
, @dy
– relativní pozicování celého textu nebo jednotlivých glyfů
@rotate
– rotace celého textu nebo jednotlivých glyfů
@textLength
, @lengthAdjust
– „napasování“ textu do předepsaného prostoru
PS: Jak už jsme zmiňovali, SVG-1.1 nepodporuje automatické zalamování textu uvnitř vyhrazeného prostoru. Jediný současný způsob, jak dosáhnout podobného vzhledu, je tak „znásilnění“ elementů <tspan>
– každou řádku zavřít do samostatného tspanu a navzájem je vhodně napozicovat.