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 vidíme 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 nebudeme 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 v souboru dokumentu a tyto hodnoty nastaví tvůrce dokumentu. Tím je zajištěna shoda jednoho dokumentu tištěného z různých počítačů.

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

Možná jste narazili na webzine, zpravodajský server, nebo blog ze kterého prakticky nelze vytisknout čitelný článek. Buď chybí kus textu na pravé straně, nebo se vytiskne jen první strana, někdy dokonce jenom zbytky menu a dekoračních prvků stránky. Na intranetu si podobnou ostudu dovolíte jen ztěží, uživatelé Vás přece osobně znají.

Kromě stránek určených pro tisk (protokoly, reporty) uživatelé intranetu často tisknou i jiné stránky aplikací, které primárně pro tisk určeny nejsou (formuláře, přehledové tabulky). Právě zde nastávají problémy, které se pokusíme vyřešit. Většina problémů je způsobena prvky s pevnou šířkou (typicky tabulky), které překročí šířku papíru. Následuje několik zkušeností jak navrhnout stránky s možností tisku.

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.

Takto upravená stránka má ještě jednu výhodu. Běžná tisková kopie stránky se obvykle liší v detailech od stránky na obrazovce (zalomení řádků), to může působit dojmem lajdácké práce. Celkově změněný vzhled naopak potvrzuje snahu programátora.

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 konce 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 takovém případě nepomůže ani často dopručovaný liquid design.

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ů.

Tabulky nastavené k tisku na jinou než 100% velikost, se současně nastaveným ohraničením buněk někdy způsobí, že tisk mřížky není dokonalý a čáry okrajů nemají stejnou tloušťku. Je to vlivem přepočtu pixelů na rozlišení tiskárny a zaokrouhlováním. Taková tabulka nevypadá nejlépe.

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ů.

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ů.

Pozadí prvků

Tisk barev a obrázků na pozadí HTML prvků závisí na nastavení browseru, defaultní nastavení je obrázky a barvy pozadí netisknout. Pro sjednocení tisku intranetových stránek bez ohledu na individuální nastavení, můžeme v sekci CSS přikázat bílé pozadí HTML elementů tak, jak je naznačeno pro prvky th v předchozí ukázce.

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 pod graf tak, že vytvoří jeho 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. Pro tisk stránek intranetových aplikací ne příliš používané.

updated 11.03.2007