Jak vyrobit tiskový výstup pomocí CSS

28. března 2002

•

Internet v drtivé většině prohlížíme prostřednictvím monitoru našeho počítače. Co se však stane, když jej nemáme k dispozici? Nejprve vám na jednoduchém příkladě ukáži, jak pomocí CSS převést běžnou stránku do tiskové podoby, a poté vám nabídnu malou úvahu o nestandardních výstupech informací z internetu.

Ještě než začneme, můžete si vyzkoušet dva příklady, v prvním jsem použil k formátování stránky definice oblastí, v druhém klasickou tabulku. K dispozici je také zdrojový kód obou příkladů. Všechny soubory prošly validací oficiálními validátory konsorcia W3C, a to jak pro CSS, tak pro XHTML.

Mějme tedy klasickou stránku, kde v záhlaví je nějaké logo a nadpis, popřípadě více nadpisů, po levé straně obvyklá nabídka doplněná několika reklamami a někde dole zápatí s počítadlem, informací o copyrightu a datu poslední aktualizace. Taková stránka vypadá poměrně dobře, dokud si ji prohlížíte na monitoru. Ale dejme tomu, že obsahuje nějaké informace, které chcete po delší dobu uchovávat, pracovat s nimi a používat je i tam, kde nemáte zrovna počítač. Pak se obvykle dostává ke slovu tiskárna (a nevěřili byste, jak často). A nastávají problémy.

Tiskárna začne chrlit „pošpiněný“ papír. Nejprve je zde cosi jako nepodařená novinová fotografie původně graficky jedinečného loga, potom nepotřebná nabídka na první stránce a úzká nudlička textu po pravé straně všech ostatních stránek. Katastrofa je ukončena rozmazanou patičkou, kde podtržený text o sobě hlásá, že „zde můžete kontaktovat autora“.

Řešení je přitom jednoduché a skrývá se právě v šikovné kombinaci XHTML a CSS. Pomocí XHTML lze nadefinovat běžnou stránku, jejíž každý prvek bude identifikován buď zcela jednoznačně (atributem ID) nebo coby příslušník určité skupiny (atributem class). Podmínkou je, že se vyhnete všem formátovacím atributům přímo v kódu stránky, jak to vyžaduje definice XHTML 1.0 Strict (XHTML 1.1). Potom ke stránce připojíte externí soubory se styly, které pomocí CSS definují vzhled stránky.

Výše uvedený kód názorně ukazuje, jak styly v CSS k XHTML stránce připojit. První řádek otevírá oblast definice stylů, platných pro všechny typy výstupních zařízení (media=’all‘). Druhý řádek provádí import externích souborů se styly. Import je prováděn pomocí @import, což spolehlivě vyřadí starší prohlížeče s nedostatečnou podporou stylů. Čtvrtý řádek používá element <link> k připojení externího souboru se stylem, který má být aplikován při výstupu na tiskárnu (media=’print‘). Starší prohlížeče tento druh stylů nezvládají, takže tady je vše v pořádku. Importovaných souborů může být libovolný počet, je také možné je dynamicky generovat, v úvahu je nutno vzít pouze klasickou dědičnost.

Možná se divíte, proč nejsou definice stylů v elementu <style> uzavřeny komentářem, jak je tomu běžně. Není to žádná chyba, jak už jsme si řekli, starší prohlížeče jsme vyřadili ze hry použitou importní metodou. Definice XHTML navíc přímo zakazuje takovéto použití komentářů, protože ty mohou být zpracovány speciálním interpretorem již na serveru a v „ideálním“ případě se do výstupního souboru vůbec nedostanou!

Při běžném prohlížení na obrazovce monitoru se na stránku aplikují pouze styly ze souboru 002prikladaa.css („jiny_priklad.css“, pokud je soubor nalezen). Pokud však stránku necháte vytisknout nebo se podíváte na tiskový náhled, prohlížeč importuje také styl ze souboru 002prikladab.css („jeste_jiny_priklad.css“). Podle pravidel o dědičnosti a posloupnosti stylů se vlastnosti některých oblastí změní, čehož využijete. Jednak necháte „zmizet“ celý levý sloupec stránky s logem, nabídkou a čítačem. Změníte také barvu textu, čímž ulehčíte život majitelům černobílých i barevných tiskáren. Jen tak mimochodem rozvolníte elementy s pevnou šířkou, které někdy přesahují šířku tiskové stránky. Rovněž se změní písmo stránky, bezpatkový Arial je nahrazen lépe čitelným Timesem. A konečně vrchol představení, ze zápatí zmizí nepoužitelné odkazy a podobné zbytečnosti a jsou nahrazeny adresou, telefonem a faxem vlastníka stránek.

V současnosti validátory konsorcia W3C rozeznávají jedenáct výstupních médií pro prezentaci internetového obsahu prostřednictvím CSS, které se navíc od původní definice liší. Osobně považuji za nejpřínosnější typy handheld, print, braile a aural (a samozřejmě i typ all). Asi největší okamžitý užitek může poskytnout typ print, který považuji za samozřejmou součást všech nově vytvářených prezentací. Nové verze nejrozšířenějších prohlížečů ho zvládají bez problémů, čímž nás zbavují nutnosti generovat speciální tiskovou stránku.

Svůj význam mají také definice výstupních médií, které usnadňují přístup k informacím handicapovaným lidem, jako jsou dyslektici, lidé s vadami zraku a podobně. V této oblasti považuji za výjimečný typ aural. Je to jediný typ, kterému se podrobněji věnuje již definice CSS2 a který tak můžete „preventivně“ zahrnout do všech prezentací. Definuje totiž zvukový výstup, takže se k informacím mohou dostat různě handicapovaní lidé. Za handicapované lze přitom v této souvislosti považovat všechny osoby, které nemají k dispozici standardní informační výstup, nebo jsou zaměstnáni činností, která jim nedovoluje tento výstup používat (obchodní cestující, řidiči, lékaři během zákroku, kosmonauté, potápěči, ale i členové různých expedic). To otvírá XHTML cestu k novým možnostem uplatnění.