Jak vytvořit dobrý tiskový styl

Tiskový styl (soubor CSS pro tisk) udává vzhled stránky při tisku – jak bude stránka vypadat, když si ji vytiskneme.

Pokud si někdo chce náš web (stránku) vytisknout, dělá to většinou proto, že ho zaujal obsah. Tisk menu, grafiky webu aj. je tak zbytečný a zvyšuje (opět zbytečně) náklady na tisk. Proto je žádoucí vytvořit tiskový styl, který určí, jak bude stránka při tisku vypadat. Vytištěná stránka by se měla příjemně číst a měly by na ní být všechny důležité informace.

Na konkrétním případě si ukážeme, jak takový tiskový styl může vypadat. Jednotlivé části kódu jsou pak dále rozebrány.

/* CSS Dokument - tiskovy styl */

body {
   margin: 0;
   padding: 0;
   background-color: #FFF;
   font-family: "Times New Roman", Times, serif;
   }

h1, h2, h3, h4, h5, h6 {
   font-family: Arial, Helvetica, sans-serif;
   }

h1 {font-size: 16pt;}
h2 {font-size: 14pt;}
h3, h4, h5, h6 {font-size: 12pt;}

p {line-height: 1.4; font-size: 12pt;}

a:link, a:visited {
   text-decoration: underline;
   font-weight: bold;
   color: #000;
   }

a:link:after, a:visited:after {
   content: " ("attr(href)")";
   }

img {border: 1px solid #000;}

#menu, #vyhledavaci-formular {
   display: none;
   }


body {
   margin: 0;
   padding: 0;
   background-color: #FFF;
   font-family: "Times New Roman", Times, serif;
   }

Pomocí margin: 0 a padding: 0 docílíme toho, že okraje stránky při tisku budou napříč prohlížeči stejné. Barvu pozadí nastavíme raději explicitně (přímo) na bílou. Písmo pak volíme patkové Times New Roman, jelikož se na papíře lépe čte než třeba bezpatková Verdana, která se zase hodí spíše pro písmo na obrazovce.


h1, h2, h3, h4, h5, h6 {
   font-family: Arial, Helvetica, sans-serif;
   }

Pro nadpisy jsem volil bezpatkový font Arial, aby nadpisy byly vizuálně odlišeny.


h1 {font-size: 16pt;}
h2 {font-size: 14pt;}
h3, h4, h5, h6 {font-size: 12pt;}

p {line-height: 1.4; font-size: 12pt;}

Velikost písma je pak definována v typografických bodech (absolutní jednotky, co se velikosti týká); 1 pt = 1/72 palce, 1 palec je 2,54 cm.
Výška řádku v odstavcích je nastavena na 140 % původní (přednastavené) hodnoty. Dle mého zkoušení se při fontu Times New Roman a velikosti 12 pt jedná o ideální hodnotu.


a:link, a:visited {
   text-decoration: underline;
   font-weight: bold;
   color: #000;
   }

Odkazy jsou definovány jako podtržené, tučné a černé. Obzvláště podtržení odkazů je důležité. Pokud bychom totiž odkazy odlišili pouze barevně, při černobílém tisku by se stejně nedalo poznat, že se jedná o odkaz.


a:link:after, a:visited:after {
   content: " ("attr(href)")";
   }

Tento předpis doplní do tištěné verze webu adresu na kterou směřuje daný odkaz. Adresa se zobrazí v závorce za odkazem. V dokumentu bude před závorkou mezera (v zápise je také mezi uvozovkami a první závorkou mezera) a za závorkou již mezera nebude. Pokud bychom v tomto zápise udělali mezeru i před posledními uvozovkami, podtržení odkazu by se protáhlo i na následující mezeru v textu (mezeru před následujícím slovem), což není žádoucí. Tento předpis však nejspíš nebude fungovat, pokud budete stránku tisknout z prohlížeče Internet Explorer 6.


img {border: 1px solid #000;}

Obrázkům jsem nastavil 1pixelový plný černý rámeček.


#menu, #vyhledavaci-formular {
   display: none;
   }

Všemu, co nechceme, aby se tisklo, pak nastavíme hodnotu display: none.


Uvedený tiskový styl samozřejmě není jediný správný, avšak obsahuje doporučení, kterých je výhodné se držet.

Tiskovému stylu je dobré věnovat pozornost a stránku si prohlédnout (Náhled tisku v prohlížeči) i vytisknout, abychom mohli posoudit, zda se obsah stránky bude dobře číst. Také barvičky bychom měli používat s rozvahou, při černobílém tisku si jich čtenář/ka stejně příliš neužije.

Pozn.: Jelikož kovářova kobyla chodí občas bosa, tak tento web tiskový styl nemá. Některé články lze sice stáhnout v DOC a PDF formátu, ale zatím jich není mnoho. Příklad si ze mě tedy neberte.

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist