site logo

Tisk webových stránek a CSS

Formátování webových stránek pro tisk je jiné než tisk dokumentů z kancelářských balíků. Řada uživatelů je poněkud zaskočena rozdílností obou přístupů. Zatímco kancelářské dokumenty využívající WYSIWYG zajistí shodu toho co je na obrazovce i na papíru, webové stránky tento princip nectí a nemají k tomu důvod. Pro tento účel je na webu vyhrazen typ souborů .pdf, kterým se zde nechci zabývat.

Základním cílem kancelářských balíků je totiž potištěný papír. Formát papíru, orientace a nastavení okrajů výtisku jsou uloženy splečně s dokumentem a tyto hodnoty nastaví tvůrce dokumentu. Tím se zajistí shoda jednoho dokumentu tištěného z různých počítačů.

Webové stránky nabízí pro formátování tisku velmi omezené prostředky. Formát, orientace papíru, velikost okrajů není možné nastavit pomocí (X)HTML, nebo CSS. Tyto hodnoty se nastaví jednotně pro všechny stránky vytištěné z browseru pomocí menu soubor / vzhled stránky. Vyjímkou je Opera, která umožňuje nastavit orientaci papíru pomocí CSS.

Bohužel neexistuje žádné závazné doporučení, nebo pravidla jak připravit webové stránky pro tisk a každý tvůrce stránek připraví tisk podle svého uvážení, případně tento problém zcela ignoruje. V případě tisku je pak jen na uživateli jak se s tím vypořádá. Výsledek může být chybějící kus textu na pravé straně, nebo se vytiskne jen první strana. Co s tím?

Jak vytisknout problémovou webovou stránku

Při náhledu tisku v IE7 a IE8 se uklikáte. IE si nepamatuje poslední nastavení zoomu a ten musíte nastavit vždy znovu a znovu. IE zobrazí jen jednu stránku náhledu. Pokud se chyba projeví až na dalších stránkách, musíte opět klikat, ani nastavení zobrazit vice stránek náhledu si IE nepamatuje. FireFox má jiný problém. Obvykle se zasekne na měřítku přizpůsobit šířce (shrink to fit) a nelze přepnout na zoom podle procent. Menu v náhledu sice ukazuje procentní zoom, ale skutečný náhled zůstává ve stavu přizpůsobit šířce. Pak musíte zvolit menu vzhled stránky odstranit "zatržítko" pro tuto volbu.

Ostatně soudím, že browsery by měly před tiskem automaticky nabízet náhled s možností nastavit zoom pro tisk a případnou možnost zrušit CSS pro tisk.

Co způsobuje problémy při tisku webových stránek

Papírová verze stránky by měla obsahovat jen podstatný obsah. Tedy celý text článku včetně doprovodných obrázků, nebo celou datovou tabulku v případě intranetu. Naopak aktivní navigační prvky a reklama jsou zbytečné a na výtisku být nemusí.

Problémy se kterými se můžeme potkat při tisku webových stránek jsou nevhodná šířka stránky, část textu, nebo tabulky vpravo chybí. Tiskne se jen první stránka, další stránky jsou prázdné. Jindy chybí doprovodné obrázky, nebo některé prvky stránky jsou renderovány "přes sebe". To jsou chyby v kódu stránky, které jen těžko napraví koncový uživatel.

Vynechání některých prvků stránky při tisku

Typická stránka intranetové aplikace obsahuje primární obsah: procesní data ve formě tabulky, grafu, nebo formuláře. Jen tento obsah potřebujeme tisknout. Kromě primárního obsahu jsou na běžné stránce ještě prvky menu, navigace, grafické prvky. Ty obvykle tisknout nepotřebujeme, protože na vytištěné stránce ztrácí význam. Někdy je vhodné nahradit menu titulkem s názvem aplikace, její části a dalšími údaji (období). Podobně fungují některé moderní blogy, z těch je radost tisknout.

Je několik způsobů jak přilinkovat, nebo importovat tiskové styly pro webovou stránku. Na intranetu, kde je použit relativně jednoduchý design se mě osvěčil následující způsob.


<style type="text/css">
...
/* společný kód pro obrazovku i tisk */
...
@media screen {
  #caption {display: none;}
  #navmenu {display:block;}
}
@media print {
  body {margin:0; padding:0;}
  #caption {display:block;}
  #navmenu {display: none;}
  th {background: #fff;}
}
</style>

Uvedená ukázka části CSS kódu nevyžaduje speciální stránku pro tisk, ani speciální soubor s CSS kódem jen pro tisk. Ve společné CSS sekci uvedeme obecně platné deklarace a ke konci sekce odlišnosti platné jen pro specifikované výstupní médium. Na obrazovce se uplatní nastavení podle @media screen, viditelný bude blok stránky navmenu, ale nadpis caption zůstane skrytý. Pro výtisk (i náhled) se uplatní nastavení podle @media print, tedy viditelnost uvedených bloků bude zaměněna. Zde je možné změnit font, velikost písma a další úpravy. Primární obsah stránky bude viditelný v obou verzích.

Šířka stránky

Na intranetu se nejčastěji tisknou různé tabulky obsahující především čísla. Přirozená potřeba uživatelů je zobrazit co nejvíce údajů v řádku tabulky. Protože čísla nelze zalamovat, tabulka často přesáhne maximální šířku tiskové stránky.

V režimu měřítko tisku = 100% (jediný možný režim v IE6) a defaultním nastavení okrajů je maximální šířka stránky asi 630 pixelů. Pravá část stránky nad 630 pixelů je ztracena (není vytištěna). Moderní browsery umí upravit měřítko tisku tak, aby i širší stránka byla vytištěna celá. V praxi vychází optimální měřítko tisku 80% (na papíru se lépe čte než na obrazovce). To by odpovídalo šířce stránky asi 800 pixelů.

Omezení šířkou stránky platí jen pokud používáte IE6. Ostatní browsery umí přizpůsobit stránku změnou měřítka tisku. Pro IE6 se nabízí možnost použít proprietární MS vlastnost CSS zoom. V sekci @media print nastavíme např. table {zoom: 80%;}. POZOR standardní browsery tomuto nastavení nerozumí, ani já tento způsob nepoužívám a zůstávám u maximální šířky tiskového layoutu stránky 630 pixelů, protože naše korporace i roce 2009 přikazuje použití IE6.

Aby obsah stránky nebyl nalepen na okraj okna browseru, je defaultně nastaven margin stránky. Při tisku se tento okraj připočte k okraji papíru a tak vznikne zbytečně dvojitý okraj. V ukázce CSS kódu je proto okraj body při tisku nastaven na nulu. Tím získáme několik dalších cenných pixelů.

Co když se tiskne jen první stránka

Návrhy beztabulkových layoutů často používají velké (vysoké) bloky z elementů <div>, které mají nastaven styl overflow: hidden;. Moderní browsery většinou nemají problém zobrazit takový layout. V okně browseru se zobrazí celá (první) stránka, výška stránky není omezená, proto nedojde k přetečení. Po vytisknutí první stránky nastane přetečení obsahu na další stránky a projeví se chybně nastavený styl.

Některé šablony pro beztabulkový layout nepočítají s možností tisku, proto nezapomeňte otestovat zvolenou šablonu v náhledu pro tisk s delší stánkou. V uvedeném příkladu by stačilo do předpisu pro styly (část pro tisk) příslušnému elementu předepsat overflow: visible;

Pozadí prvků a chybějící obrázky

Tisk barev a obrázků na pozadí HTML prvků závisí na nastavení browseru, defaultní nastavení je obrázky na pozadí a barvy pozadí netisknout. Pro sjednocení tisku webových stránek bez ohledu na individuální nastavení browseru, můžeme v sekci CSS přikázat bílé pozadí HTML elementů tak, jak je naznačeno pro prvky th v ukázce CSS kódu výše. Tisk pozadí se nastavuje v IE menu Nástroje / Možnosti Internetu / Upřesnit / Tisknout barvy a obrázky na pozadí. Pro FireFox a Operu je nastavení tisku pozadí v menu Soubor / Nastavení stránky / Tisk pozadí.

Jindy naopak potřebujeme zajistit aby obrázek na pozadí byl vždy vytištěn. Příklad takové situace je popsán v článku graf <div>. Obrázek na pozadí není deklarován ve stylu background, ale jako běžný <img .. />, který je pomocí position umístěn tak, že vytváří pozadí.

Lámání stránky

Pro dlouhé texty např. manuály využijeme dalších CSS vlastností: page-break-before, a page-break-after. Ve spojení např. s tagem <h2> dosáhneme umístění začátku každé kapitoly na nové stránce. Jenže místo estetického efektu tak dosáhnete zvýšení spotřeby papíru.

updated 05.03.2009