CSS V DIGITÁLNÍ KARTOGRAFII ČERBA Otakar Západočeská univerzita, Fakulta aplikovaných věd, Katedra matematiky Univerzitní 22, Plzeň, 306 14 Tel.: ++420 377 632 681 Fax: ++420 377 632 602 ota.cerba@seznam.cz 1. Úvod Jak dokládají příklady z praxe (viz třetí sekce článku), v oblasti digitální kartografie se jako formát pro vizualizaci vektorových dat stále více prosazuje jeden z derivátů značkovacího jazyka XML (extensible Markup Language) SVG (Scalable Vector Graphics). SVG je otevřený vektorový formát určený především pro popis a distribuci vektorových dat v prostředí internetu. Pomocí jednoduchých elementů typu linie, kruh, polygon apod. a jejich vlastností lze velice snadno vytvářet složité vektorové objekty. Formát SVG se využívá nejen v digitální kartografii, ale také v prostředí komerční grafiky, e- bussinesu nebo zábavního průmyslu, kde uplatnění najdou především nejrůznější efekty, filtry a možnosti animace. Standard SVG vytváří a spravuje W3C (World Wide Web Consortium) 1. Vývoj tohoto formátu započal v roce 1999, verze 1.0 byla k dispozici o dva roky později v září 2001. Počátkem roku 2003 byla vydána v současnosti nejnovější verze 1.1 2, jejíž hlavní předností je rozdělení SVG do několika modulů, včetně speciálních modulů pro mobilní zařízení. Ve stádiu přípravy (W3C Working Draft) se nalézá verze 1.2. Jednou z velkých výhod SVG je možnost propojení a komunikace s dalšími aplikacemi z rodiny SGML/XML (Standard Generalized Markup Language) a ostatními webovými standardy. Jedná se například o GML (Geography Markup Language), HTML (HyperText Markup Language), XHTML (extensible HyperText Markup Language), MathML (Mathematical Markup Language), XForms, SMIL (Synchronized Multimedia Integration Language5), XSLT (XML Transformations), DOM (Document Object Model), RDF (Resource Description Framework) nebo skriptovací jazyky. Tento příspěvek ukazuje možnosti kombinace SVG a kaskádových stylů (CSS, Cascading Style Sheets). Kaskádové styly patří do skupiny tzv. stylových jazyků, kam se kromě CSS řadí jazyky XSL (extensible Stylesheet Language), FOSI (Formatting Output Specification Instance) nebo DSSSL (Document Style Semantics and Specification Language) a další. Základní myšlenkou stylových jazyků je striktní oddělení obsahu dokumentu od jeho vzhledu. Součástí dokumentu mají být pouze logické elementy, v případě digitální kartografie především souřadnice a obsah jednotlivých prvků mapy. Definice způsobu zobrazení (volba barev, průhlednost, velikost a typ písma, síla a typ čáry, průběh animace apod.) obsahuje dokument zapsaný v nějakém stylovém jazyku. Kaskádové styly jsou technikou, která je známá především z oblasti tvorby webových stránek. Pomocí kaskádových stylů lze přiřadit převážně vizuální vlastnosti (např. barvu pozadí, velikost písma, umístění prvku apod.) jednotlivým elementům HTML (XHTML). V současnosti existují specifické formy designu webových stránek, které jsou založeny na možnostech pozicování pomocí CSS. Historie používání kaskádových stylů se datuje od roku 1996, kdy byla konsorciem W3C vydána první specifikace (doporučení) CSS1 W3C Recommendation 3. Důvodem vytvoření CSS bylo znečištění HTML, kdy byl tento původně značkovací jazyk doplněný o velké množství nejrůznějších, často nestandardizovaných a nepodporovaných vizualizačních atributů. Od roku 1998 jsou k dispozici kaskádové styly druhé úrovně CSS2 4, dnes již existuje první revize CSS2 CSS 2.1 5. V současnosti se intenzivně pracuje na vytvoření standardu CSS3, jehož hlavní znakem bude stejně jako u nejnovější verze SVG modularita. Jednotlivé moduly budou obsahovat řadu nových vlastností, selektorů, pseudoelementů, pseudotříd. Důležitá bude také možnost používání jmenných prostorů (Namespaces), které dosáhly značného rozšíření v XML aplikacích. V tomto článku se budeme věnovat kaskádovým stylům druhé generace, které obsahují řadu pokročilejších funkcí a technik (například pro práci s XML je důležitá možnost zobrazování obsahu atributů pomocí vlastnosti content) a jsou obecně používanější než CSS1. Kombinace kaskádových stylů a jazyka HTML je poměrně běžná a často využívaná. Mnohem méně známé je používání kaskádových stylů společně s XML. 1 http://www.w3.org/ 2 http://www.w3.org/tr/svg11/ 3 http://www.w3.org/tr/rec-css1/ 4 http://www.w3.org/tr/rec-css2/ 5 http://www.w3.org/tr/css21/
Jazyk XML na rozdíl od HTML neobsahuje žádné informace o zobrazování dokumentu. Proto právě kombinace XML dokumentu a stylového jazyka plně odpovídá filosofii XML, tedy oddělení obsahové a zobrazovací části dokumentu. Problémem propojení CSS a XML je především malá podpora mezi softwarovými produkty. Pouze u dvou aplikací XML se můžeme setkat se širšími možnostmi zobrazení dokumentu pomocí kaskádových stylů. Jedná se o jazyky XHTML a SVG. Propojením XHTML s CSS, které je zpracováno v mnoha různých publikacích a článcích zabývající se tvorbou www stránek, se v tomto článku nebudeme zabývat. 2. Princip kaskádových stylů Zápis CSS pravidel je velmi jednoduchý skládá se ze selektoru a deklarace (pravidla). Selektor udává prvek dokumentu, na který se má následující deklarace použít. Není nutné jako selektor použít konkrétní prvek. Selektorem může být také element se specifikovaným atributem nebo hodnotou atributu. Mezi další možnosti selektorů patří třída (atribut elementu class) nebo identifikátor elementu (atribut id). Jednotlivé selektory je možné seskupovat a zapisovat jako tzv. kontextové selektory. Deklarace se zapisují za selektor do složených závorek, přičemž jednotlivé vlastnosti prvku se o sebe oddělují středníkem. Každá deklarace se skládá z vlastnosti a její hodnoty, přičemž obojí odděluje dvojtečka. Více o kaskádových stylech (viz [1]). SELEKTOR {DEKLARACE} SELEKTOR {VLASTNOST: HODNOTA} SELEKTOR {VLASTNOST: HODNOTA1 HODNOTA2 HODNOTA3} SELEKTOR {VLASTNOST1: HODNOTA1; VLASTNOST2: HODNOTA2; VLASTNOST3: HODNOTA3} Způsob zápisu kaskádových stylů je pro XHTML (popř. HTML) a SVG stejný oba jazyky mají stejný princip, jsou založené na XML (popř. SGML). Soubor vlastností, které můžeme kaskádovými styly ovlivňovat, ovšem není pro oba jazyky stejný XHTML a SVG obsahují jinou množinu elementů a atributů. Seznam atributů určených ke zpracování kaskádovými styly je k dispozici ve specifikaci SVG. 3. Připojení CSS k SVG dokumentu Existují čtyři základní možnosti připojení kaskádového stylu k SVG dokumentu (podle [7]). Všechny uvedené příklady nastaví modrou barvu výplně a červené ohraničení elementu, přičemž síla čáry je dva pixely. XML prezentační atributy 6 SVG obsahuje možnost připojení zobrazovacích vlastností jako atributů jednotlivých elementů. <rect x="10" y="10" width="70" height="40" fill="blue" stroke="red" strokewidth="2px"/> Inline styly Styl je připojený ke každému elementu zvlášť pomocí jediného atributu style. Tento a také předchozí způsob stylování se používá nejčastěji a to včetně vyspělých komerčních aplikací. Bohužel připojení stylu přímo ke každému elementu zvlášť popírá základní výhody používání stylových jazyků, kdy pomocí stylu propojíme prvky, které chceme shodně zobrazit a také oddělení obsahu a způsobu zobrazení dokumentu. <rect x="10" y="10" width="70" height="40" style="fill:blue; stroke:red; stroke-width:2px"/> Interní styly V tomto případě je styl také součástí SVG souboru nachází se na počátku dokumentu uvnitř elementu defs. Výhodou tohoto způsobu zápisu je snadná orientace v kaskádových stylech, protože všechna pravidla jsou umístěna do jedné 6 V případě, že je na jeden prvek aplikováno více stylů, má tento způsob zápisu nejvyšší prioritu.
části dokumentu. Bohužel díky připojení stylu ke konkrétnímu dokumentu nelze aplikovat jeden CSS soubor na více SVG dokumentů. <defs> <style type="text/css"> <![CDATA[ ]]> rect </style> </defs> {fill:blue; stroke:red; stroke-width:2px;} Kvůli odlišnému způsobu zápisu XML a CSS se doporučuje interní styly umístit do speciální sekce CDATA. Pokud budou styly umístěny samostatně, parsery (programy pro kontrolu syntaxe, které jsou častou integrovanou součástí SVG prohlížečů) zaznamenají chybu. Externí styly Stylový soubor je zapsán v samostatném souboru, který je k vlastnímu SVG dokumentu připojený. Tato forma zápisu stylu má několik předností: - Zkrácení celkové délky SVG souboru (velikost SVG dokumentu lze navíc snížit používáním seskupovacího elementu g, kterým můžeme spojit elementy se stejnými zobrazovacími pravidly), - případné změny stylu lze provádět bez zásahů do zdrojového SVG kódu, - je možné připojení jediného stylu k několika SVG dokumentům, přičemž změna ve stylu se okamžitě projeví ve všech souborech, k nimž je styl připojený, - pouze v tomto případě lze dokonale naplnit hlavní funkci stylových jazyků dokonalé oddělení obsahu dokumentu a zobrazovacích pravidel. /* příklad externího stylu */ /* styl je uložený v souboru styl.css ve stejném adresáři jako soubor SVG */ rect {fill:blue; stroke:red; stroke-width:2px;} <!-- ukázka připojení externího stylu --> <?xml version="1.0"?> <?xml-stylesheet href="styl.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg11.dtd"> <svg width="300" height="200">
<!-- SVG dokument dále pokračuje --> Připojení externího stylu obsahuje dva povinné atributy. - href URI (Uniform Resource Identifier) cesta ke stylovému souboru. - type MIME (Multipurpose Internet Mail Extensions) typ stylu. Specifikaci stylového souboru můžeme doplnit o další čtyři volitelné parametry. - title název připojeného stylu. - media označení výstupního média. - charset znaková sada použitá ve stylovém souboru. - alternate může nabývat pouze dvou hodnot yes a no, které určují, zda je o alternativní styl. V oblasti kartografie v současnosti existuje mnoho příkladů propojení CSS a SVG. Ne vždy se ovšem jedná o správné a efektivní aplikace stylového jazyka. Cvičná letecká navigační mapa 7 - Dokument obsahuje inline styly u každého elementu zvlášť důsledek generování SVG z externího programu (Charts). Vienna Social patterns and structures 8 - Soubor tematických map obsahuje zajímavě připojené styly, které jsou do aplikace vloženy pomocí mechanismu entit. Jedná se o klasické inline styly, které jsou definovány společně s entitami v rámci DTD (Document Type Definition). Mapa sítě Českých drah 9 - Tato mapa sice obsahuje interní styly, ale byl zde zvolený poměrně nešťastný přístup. Ke každému logickému elementu je styl připojený zvlášť. Nesetkáme se zde se seskupováním elementů stejného významu (například železniční tratě nebo stanice) ani s připojením jediného stylu k celé skupině, čímž by se zmenšila velikost souboru. Navíc jsou ještě odlišeny styly pro zobrazení linie, plochy a písma. SVG Travel Map 10 - Animovaná SVG mapa světa, která obsahuje metainformace ve formátu RDF a především externí kaskádové styly (kromě vlastnosti display, která je k elementům připojena přímo pomocí atributu style). 4. Výhody a nevýhody používání kaskádových stylů Jak ukazuje následující sekce dokumentu, lze aplikováním různých externích souborů kaskádových stylů velice rychle a jednoduše vytvářet z jediného SVG souboru různé formy kartografických výstupů. Mezi jednoduché operace s mapou, které je možné pomocí CSS realizovat, patří možnost zapínání a vypínání datových vrstev a změny vizualizačních vlastností prvku (změna barvy, průhlednosti, síly linie, typu linie apod.). K dalším výhodám kombinace SVG a CSS patří nízké náklady na tvorbu map i jiných vektorových kreseb. SVG i CSS jsou jednoduché textové soubory, které lze vytvářet i editovat pomocí libovolného textového editoru, počínaje jednoduchými programy typu NotePad až po profesionální WYSIWYG 11 editační systémy. V současnosti také velké množství GIS a Desktop Mapping software dokáže SVG soubory se styly exportovat. Fakt, že CSS ani SVG nejsou binární soubory, usnadňuje práci s SVG dokumenty s kaskádovými styly. Textové soubory dokáže zpracovávat většina současných počítačů bez rozdílu platformy. Kromě snadného zápisu umožňuje forma textového souboru také snadnou čitelnost a srozumitelnost souborů. 7 http://mormegil.wz.cz/flying/charts/a2-pr-ils24.svg 8 http://www.carto.net/neumann/cartography/vienna/ 9 http://www.cdrail.cz/gvd/mapa/mapa.svgz 10 http://aaronland.info/xsl/svg/svg-travel-map/ 11 What You See Is What You Get komplexní editační systémy s grafickým uživatelským rozhraním
Prohlížení SVG souborů s kaskádovými styly zajišťují buď specializované programy (Batik 12 ) nebo plug-iny do běžných prohlížečů www stránek (Adobe SVG Viewer 13 ). K jedné SVG mapě lze připojit několik různých stylů. Tímto způsobem lze snadno reagovat na specifické vizualizační požadavky uživatelů stejných dat bez zásahu do vlastních dat. Pomocí různých stylů můžeme mapu přizpůsobit pro zobrazení na barevném monitoru, na displeji mobilního zařízení, na tiskárně nebo dokonce mapu barevně vylepšit pro jedince s poruchou barevného vidění. Naopak aplikace jednoho externího stylu na více dokumentů vede ke sjednocení vzhledu těchto dokumentů. Tato vlastnost se dobře uplatní při tvorbě elektronických atlasů nebo souborů map. Nelze opomenout také dostatek kvalitní dokumentace. Zvláště jazyk CSS je popsán v mnoha publikacích, které jsou často k dispozici i v českých překladech. Navíc velké množství zdrojů z oblasti tvorby webu je zdarma k dispozici na internetu. V předchozích odstavcích byla několikrát zmíněna také jedna ze stěžejních výhod propojení SVG a CSS oddělení obsahu od zobrazovacích pravidel. Hlavním nedostatkem používání kaskádových stylů je především jejich jednoduchost a orientace pouze na vizualizační pravidla. Ovšem právě tento nedostatek se může změnit ve výhodu, jestliže CSS aplikujeme na dokument, který popisuje grafické prvky, kdy není nutné, aby stylový jazyk obsahoval transformační šablony, možnosti dotazování apod. Kaskádové styly tedy rozhodně nepředstavují alternativu stylového jazyka XSLT (XSL Transformation), který je v oblasti XML v současnosti nejpoužívanější. CSS na rozdíl od XSLT nedokáže měnit strukturu dokumentu, ani vytvářet výstupní soubor v jiném jazyce pomocí jazyka XSLT bychom například z SVG dokumentu dokázali získat seznam souřadnic ve formátu běžného textového souboru. Nevýhodu spojení CSS a SVG představuje nutnost používání dvou odlišných syntaxí jazyků. Zápis kaskádových stylů nepodléhá na rozdíl od jazyka XSLT pravidlům XML, ale je svým způsobem nestandardní. Problémem může být také organizace komplikovanějších CSS souborů, zvláště pokud s nimi pracuje více vývojářů (kartografů). K částečné eliminaci potíží spojených s orientací ve složitých dlouhých souborech může přispět dodržování následujících pokynů: - přehlednost zápisu, - využívání dědičnosti a kaskádování, - konkrétní pojmenování selektorů (nikoli trida2987, ale například Silnice), - seskupování podobných pravidel (do souboru je vhodné zapisovat pravidla pro významově stejné elementy nebo pro prvky vyjádřené stejnou kartografickou metodou vedle sebe), - používání komentářů (komentáře mohou sloužit jak vysvětlující poznámky nebo jako oddělovače částí CSS souborů). SVG i kaskádové styly postihuje také problém, který je společný pro celý internet. Jedná se o nedostatečnou podporu a nedodržování standardů ze strany výrobců software. V oblasti SVG je velkým nedostatkem nemožnost použití alternativních stylů v jednom dokumentu. Ačkoli XML tuto konstrukci umožňuje, výrobci software pro SVG tuto možnost zatím ignorují. Stejně postupuje výrobce majoritního prohlížeče www stránek. V případě podpory alternativních stylů by bylo možné jednotlivé styly přepínat přímo v prostředí prohlížeče. V současnosti kvůli slabé podpoře ze strany Internet Exploreru je nutné řešit problematiku alternativních stylů pro XML a HTML pomocí skriptů. V SVG bohužel nelze v současnosti přepínat styly ani tímto způsobem. 5. Kaskádové styly v tematických mapách Následující obrázky ukazují čtyři různé mapy 14, které byly vytvořeny pomocí kaskádových stylů z jediného zdroje, z jediného SVG souboru. Obr.1: Obrysová mapa 12 http://xml.apache.org/batik/ 13 http://www.adobe.com/svg/ 14 Podkladová tematická mapa byla vytvořena studenty předmětu DBG2 na ZČU.
Obr.2: Kartogram kvantitativní Obr.3: Kartodiagram jednoduchý Obr.4: Kompletní mapa Tematické mapy se skládají ze dvou vrstev. Geometrickou (polohopisnou) složku tvoří soubor SVG, který obsahuje souřadnice prvků mapy (hranice okresů) a umístění dalších prvků mapy (popisky, grafy ). Kaskádové styly vytváří druhou, tematickou vrstvu. V ní je definován způsob zobrazení jednotlivých prvků mapy zda je prvek viditelný, zbarvení elementu (tvorba barevných stupnic), druhy a styly písma apod. Na stránkách http://www.gis.zcu.cz/studium/pok/svg_mapy/index.html je k dispozici ukázková aplikace www stránky vytvořené pomocí HTML a CSS, které obsahují dvanáct ukázkových tematických map vytvořených z jednoho SVG souboru. 6. Závěr Ačkoli jsou kaskádové styly zatím vnímány především jako nástroj pro tvorbu www stránek, je jejich použití mnohem širší. Kaskádové styly nacházejí v digitální kartografii i v dalších oblastech elektronického publikování široké možnosti využití. Kromě již zmíněného propojení CSS a SVG se můžeme s kaskádovými styly setkat při - tvorbě kartografických webových aplikací, - jednoduchém zobrazování XML dokumentů, - při práci s dokumentací k projektům (např. ve formátu DocBook) Ve spojení s SVG představují kaskádové styly mocný nástroj, který zajisté najde v oblasti digitální kartografie širší uplatnění, než jaké má dnes, kdy se kaskádové styly používají k obarvování mapy. Pozice kaskádových stylů sílí také s prudkým nástupem mobilních technologií v oblasti digitální kartografie. Kaskádové styly jsou pouze jednou z technik, které můžeme použít pro zkvalitnění digitálních map. Jejich propojením s jinými stylovými jazyky, se skriptovacími jazyky a s webovými službami lze získat velice silnou platformu pro publikování vektorových interaktivních map v prostředí internetu. Použitá literatura a jiné zdroje [1] BOS, Bert, CELIK, Tantek, HICKSON, Ian, LIE, Hakon Wium. Cascading Style Sheets, level 2 revision 1. CSS 2.1 Specification. World Wide Web Consortium [online], 2004. [cit. 2005-03-20]. Dostupný z WWW: http://www.w3.org/tr/css21/ [2] EISENBERG, J. David. SVG Essentials. Sebastopol: O Reilly, 2002. 368 s. ISBN 0596002238. [3] FERRAIOLO, Jon, FUJISAWA, Jun, JACKSON, Dean. Scalable Vector Graphics (SVG) 1.1 Specification. World Wide Web Consortium [online], 2003. [cit. 2005-03-20]. Dostupný z WWW: http://www.w3.org/tr/svg/ [4] HAVEL, Jakub. XML pro web aneb od teorie k praxi. Živě.cz [online], 2002-2003. [cit. 2005-03-20]. ISSN 1214-1887. Dostupný z WWW: http://www.zive.cz [5] JACKSON, Dean. SVG On the Rise. O Reilly XML.com [online], 2002. [cit. 2005-05-23]. Dostupný z WWW: http://www.oreillynet.com/pub/a/javascript/2002/06/06/svg_future.html [6] KAŇOK, Jaromír. Tematická kartografie. Ostrava: Ostravská univerzita, 1999. 318 s. ISBN 80-7042-781-7.
[7] LAAKER, Micah. Styling SVG. Sams Publishing [online], 2002. [cit. 2005-05-23]. Dostupný z WWW: http://www.samspublishing.com/articles/article.asp?p=29229&rl=1 [8] MARTIN, Didier. What Place Has CSS in the XML World? O Reilly XML.com [online], 2000. [cit. 2005-05-13]. Dostupný z WWW: http://www.xml.com/pub/a/2000/03/08/style/ [9] NEUMANN, Andreas, WINTER, Andreas M. SVG Scalable Vector Graphics. A future cornerstone of the WWWinfrasructure. XML-User-Group [online], 2001. [cit. 2005-05-23]. Dostupný z WWW: http://www.carto.net/papers/svg/articles/paper_xml_usergroup_neumann_winter_2001.pdf [10] VOŽENÍLEK, Vít. Aplikovaná kartografie I. Tematické mapy. Olomouc: Univerzita Palackého, 2001. 187 s. ISBN 80-244-0270-X.