TÉMY

O AUTOROVI

Ahoj, volám sa Martin a toto je môj blog. Zaoberá sa webom, technológiami, novinkami ako aj všednými témami nášho života.

Nezabúdajte na tlač webstránok

17. október 2007 20:21 Tvorba webu 66 komentárov

Chcete si vytlačiť stránku, no z tlačiarne vám vylezie nielen požadovaný obsah ale aj ďalšie tri strany plné zbytočných obrázkov, reklám a podobne. Ako jednoducho a efektívne pomocou CSS vytvoriť štýl pre tlač?

A ako predísť papierú potlačenému reklamami a mnohými vecami, ktoré ste tlačiť ani nechceli? Poznáte odkaz typu “Verzia pre tlač”?. Je vždy potrebné komplikovať tvorbu stránok? Keď ste klikli na takýto odkaz, otvorila sa vám špeciálna verzia dokumentu, ktorá obsahovala tie isté informácie s iným layoutom.

Teória

Výhodou oddeleného vzhľadu (dizajnu) od obsahu je aj to, že vzhľad našich stránok (resp. obsahu) môžeme kedykoľvek ľahko upraviť. Využijeme to aj pri tlači dokumentov - jedna z vecí, ktorú CSS podporuje je, že umožňuje autorom používať osobitný štýl pre každé médium. t.j. pre obrazovku, PDA, tlač ...

Pre ukážku odporúčam prezrieť si najprv náhľad pred tlačou tohto príspevku. Mali by ste dostať oklieštenú verziu toho, čo vidíte na obrazovke.

Ako začať?

1. Vloženie printového CSS štýlu

CSS vložíme podobne ako doterajšie všetky CSS súbory do hlavičky head pomocou tagu:


		<link rel=”stylesheed” type=”text/css” media=”print” href=”print.css” />

Typ média print nám zaručí, že tento štýlopis sa bude používať iba pri tlači dokumentov (skúste si spomenúť aké typy médií ešte poznáte :).

2. Vytvoríme súbor print.css

Ale čo vložiť do súboru? Najprv je potrebné zamyslieť sa, čo chcete vytlačiť. Určite potrebujete vytlačiť hlavný text príspevku (prípadne stránky), je potrebné aby stránka mala nadpis, prípadné ilustračné obrázky. Menu, reklamu, či iné prvky na papieri veľmi nevyužijeme.

Elementy, ktoré nechceme tlačiť skryjeme pomocou:

display: none;

Všetky ostatné prvky stránky môžeme naštýlovať podľa našich predstáv. Získavate ale plnú moc nad výzorom tlačového výstupu, takže sa skúste držať hesla menej je niekedy viac - pozadie dokumentu by malo byť biele, text čierny.

Svoju prácu si môžete jednoducho kontrolovať pomocou funkcie Náhľad tlače, alebo si môžete stránku vytlačiť (šetrime ale životné prostredie - papier sú vlastne stromy...)

3. Hypertextové odkazy

Osobitnou kapitolou na papieri sú hypertextové odkazy. Nemôžete predsa na vytlačený text klikať. A ako po mesiaci zistíte, kam daný odkaz viedol? Stačí do CSS štýlu pridať:


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

Za každým odkazom sa zjaví URI, napr. owebe.info (http://www.owebe.info).

A čo ďalej?

Ešte som si pripravil zopár odporúčaní, ktorých sa ja pridržiavam:

Je všeobecne odporúčané na webe používať bezpätkové písma (Arial, Helvetica, Verdana, Tahoma, Trebuchet, ...). Na papieri sa ale jednoduchšie čítajú pätkové písma (Georgia, Times New Roman, ...).
Odporúčaná veľkosť písma je 10 - 12pt.
Dodržiavajte farebnú schému biele pozadie, čierny text. Modrý text na žltom pozadí sa nielen ťažko tlačí ale aj číta...
Oddeľte hlavný text od ostatného. Stačí rám, prípadne viditeľné odsadenie (margin: 1cm).
Zarovnajte text odstavcov na oba odseky (text-align: justify). Takto býva text zarovnaný v časopisoch a knihách a čítanie tak neunavuje oči.
Zväčšite riadkovanie textu, aspoň na 1.3 znaku.