Tisk WWW stránek pomocí CSS

Nedávno jsme původní plovoucí šířku (width:100%) stránek Sovy v síti změnili na pevnou šířku 760 pixelů. Slibovali jsme si od toho, že se bude lépe číst v široce roztaženém okně prohlížeče. Ale ouha. Krátce po změně nám čtenář Michal Zajíc napsal:

"ctu vas velmi rad a mate moc zajimave clanky. Docela mne ale mrzi, ze ac jsem podle vasich navodu stvoril webove stranky, nejdou mi tisknout. IE5.5 i Mozilla 0.9.6 netisknou nebo tisknou spatne pokud je web stranka delsi nez jeden format tistene strany. Jelikoz jsem si "sproste" opalil vase styly tak me zajimalo jestli to dela i na Vasich strankach. Zkousel jsem tu uvodni http://sovavsiti.cz a je tomu skutecne tak. ano IE ani mozilla mi ji nevytiskne. Nevite cim to je?"

Pan Zajíc má pravdu. Stránky s pevnou, v pixlech definovanou šířkou přesahující šířku tištitelné strany nejsou pro tisk právě ideální. Co s tím, když k plovoucí šířce se nám vracet nechce? Naštěstí nabízejí kaskádové styly elegantní řešení.

Druhy výstupních médií v CSS

Kaskádové styly byly velmi prozíravě navrženy tak, že lze definovat různá pravidla pro různá výstupní média. Dle normy jsou těmi výstupními médii:

aural

hlasový výstup

braille

výstup v braillově slepeckém písmu

embossed

výstup pro braillovské tiskárny

handheld

úzká obrazovka miniaturních zařízení

print

tisk na počítačové tiskárně

projection

prezentace určené k promítání

screen

běžný počítačový monitor

tty

textový terminál

tv

televizní obrazovka

Kromě toho existuje univerzální médium all, které zahrnuje všechny ostatní.

Zatímco některá z výše uvedených médií vypadá dost exoticky a jejich podpora v prohlížečích může být sporná, těmi podstatnými a k řešení našeho problému plně použitelnými jsou média screen a print.

Vzorový příklad

Konkrétní, dále popsané řešení není v tomto okamžiku ještě na stránkách Sovy v síti použito, místo toho jsme vám však připravili vzorovou stránku se vzorovými stylesheety. Vzorové stylesheety jsou dva: první je společným pro všechna média, tj. v hlavně obrazovku a tiskárnu; druhý slouží pouze pro tisk, neboli médium print.

Struktura stránky

Popišme si nejprve krátce strukturu vzorové stránky. V podstatě se jedná o zjednodušenou šablonu stránek Sovy v síti. Layout je utvořen výhradně kaskádovými styly, na celé stránce není jediná tabulka. Strukturu tvoří 5 základních prvků:

1. Záhlaví osahující logo, název a moto webu.

2. Levý sloupec, do kterého může být umístěno hlavní menu, formulář pro vyhledávání, a pod.

3. Střední sloupec určený pro hlavní obsah stránky.

4. Pravý sloupec, který může obsahovat různé upoutávky, reklamy, loga spřátelených serverů, atd.

5. Zápatí, obvykle obsahující údaje o autorských právech, kontakt na webmastera, či doplňující odkazy.

Všech pět těchto prvků je vymezeno značkou <div>, vždy jednoznačně identifikovanou atributem id. Celá stránka je navíc zabalena do jednoho prvku <div id="page">, který slouží jako jakási obálka. Svá jednoznačná id mají i logo a oba řádky záhlaví.

Umístění všech prvků a jejich vlastnosti jsou plně řízeny CSS.

Samotná stránka je vytvořena podle normy XHTML Strict a neobsahuje tedy žádnou prezentační značku či atribut. Toto uspořádání umožňuje využít CSS na maximum a zároveň garantuje plnou přístupnost obsahu stránky libovolným prohlížečem či jiným zařízením.

Připojení stylesheetů ke stránce

Podíváte-li se do zdrojového kódu vzorové stránky, zjistíte, že stylesheety jsou připojeny v hlavičce (head) dokumentu takto:

Způsob připojení prvního stylesheetu již možná znáte ze starších článků. Je použit proto, že ho znají pouze prohlížeče s dobrou podporou CSS, jmenovitě MSIE 5+, Mozilla a Opera 5+. Tím jsou starší prohlížeče od stylesheetu odstřiženi a nemohou tedy zobrazení stránky ošklivě pokazit (což by jinak NN4, ale i IE4 s chutí udělali ;-)).

Podstatné je, že atribut media značky <style> má hodnotu all. Tento stylesheet se tedy použije pro všechna média — obrazovku, tiskárnu i další.

Naproti tomu druhý stylesheet, připojený značkou <link> má atribut media nastaven na hodnotu print. To znamená, že se použije pouze při tisku na tiskárnu. Při tomto způsobu připojení navíc platí, že z pravidel, která se v obou stylesheetech překrývají, mají při tisku přednost pravidla z druhého z nich.

Rozdíly mezi stylesheety

Z pravidel CSS a způsobu připojení obou stylesheetů vyplývá, že pro zobrazení na monitoru použije prohlížeč pouze stylesheet samp0202a.css. Při tisku použije oba stylesheety, ale v případě kolize pravidel upřednostní ta ze stylesheetu samp0202p.css.

Podívejme se tedy, jaká pravidla jsme ve stylesheetu pro tisk změnili.

V prvé řadě bylo třeba změnit pevnou šířku stránky. Ta je v základním stylesheetu určena šířkou obálky stránky #page a středního sloupce #maincontent takto:

Ve stylesheetu pro tisk jsou obě šířky změněny na plnou tisknutelnou šířku stránky takto:

Spolu se změnou šířky je vhodné i změnit způsob určení velikosti písma. Zatímco v základním stylesheetu je velikost písma definována v pixelech (px), pro tisk se lépe hodí typografické body (pt). Zároveň jsme zaměnili i font z původní, ryze obrazovké Verdany, na patkový a na papíře lépe čitelný Times. Třetí změna spočívala ve zmenšení řádkování na 1, oproti původnímu, na obrazovce čitelnějšímu řádkování 1,5.

Upravené pravidlo vypadá takto:

Další změny mají za úkol ukrýt to, co je pro vytisknutý examplář stránky rušivé či zbytečné. Konkrétně se jedná o gradient na levém okraji stránky tvořený obrázkem na pozadí, grafické logo v záhlaví a oba krajní sloupce. Příslušná pravidla vypadají takto:

Související odkazy

CSS nabízejí pro řízení tisku ještě další možnosti. Chcete-li se dozvědět víc, doporučuji vám tyto články:

• Dvoudílný článek Miroslava Kučery na Intervalu.cz:

  1. Použití CSS pro zalomení stránky na tiskárně, část první
  2. Použití CSS pro zalomení stránky na tiskárně, část druhá

• Praktická příručka CSS, 5. díl - Média ze seriálu o CSS, který z pera Petra Staníčka vychází na WebTipu.

• Odlišné formátování tisku na stránkách. Jak psát web Dušana "Yuhů" Janovského.