Tipy na formátovanie tlače
O CSS pre tlačenú, papierovú verziu stránok sa na Slovensku dlho mlčí. Našiel som teda niečo zo svojho starého archívu stránok, ktoré som si kedysi ukladal. Pôvodný text je od najuspešnejšieho webdesignéra v Čechach – Víta Dlouhého. Tento text by sa mal brať ako všobecne uznávaný štandard, niečo, čo je dané, o čom nemožno polemizovať.
Zhruba před 14 dny jsem se konečně odhodlal připravit předpis CSS stylů pro tisk (ano, konečně tak lze pohodlně tisknout články a spoty i zde). Nevím sice, kolik procent čtenářů si skutečně webové stránky tiskne (určitě to nějaké to procento bude), ale mám za to, že upravená tisková verze by měla být součástí každého informačního webu.
Profesionálnější weby nabízejí speciální tiskové verze svých článků, oproštěné od grafiky, reklam a navigace. Je to sice fajn, ale v podstatě se totéž dá udělat jednodušeji — alternativním CSS stylem (media=”print”).
Již kdysi jsem psal spot o tisku stránek (červen 2003), trochu jsem jej od té doby zrevidoval a doufám, že se bude hodit i dnes…
Rady pro tisk
* Šířku stránky pro tisk nastavujte na 100% (případně nechte auto), hodnoty v pixelech jenž jsou širší, než formát A4 by mohly (budou) dělat neplechu.* Nepotřebné části stránky skryjte (display: none).
* Použijte patkové písmo (např. Times, Georgia ad. – obecně však postačí generický kód serif).
* Vertikální mezery mezi řádky mohou být o něco užší.
* Doporučená velikost písma pro tisk je 12pt.
* Jednotky udávejte v pt (typografické body), jedná se o absolutní hodnoty, určené speciálně pro tisk (pro obrazovku nejsou vhodné, neboť Windows používají 96dpi a Mac 72dpi, písma na Macu by tedy bylo výrazně menší) — poměr mezi typografickými body a pixely je 1:4/3, přičemž 72pt odpovídá 1in.
* Skryjte všechny nepotřebné grafické prvky (zejména obrázky na pozadí), stránka musí být na bílém pozadí s černým písmem. Prohlížeč mívá standardně nastavenu možnost netisknout barvy a obrázky na pozadí, ale jistota je jistota.
* Nezapomeňte kontrolovat stránku přes menu Soubor › Náhled tisku.
Fakta o vytisknutém textu
* Text se na papíru čte rychleji, než na obrazovce.* Patkové písmo lépe vede oko po řádce.
Tlač odkazu
Majme odkaz www.nieco.sk. Pri tlačenej podobe stránky je však samotný ozkaz prakticky bezcenný. Uživateľ nemá šancu zistiť, kam takýto odkaz na papiery smeruje. Pomocou CSS sa dá tento problem pekne vyriešiť.
CSS:
@media print {
a:after {content: " ["attr(href) "] ";}
}
Podobné články:
Viktor, tieto rady sú veľmi dobré, ale ty si to na csshrou evidentne nezvládol. (Používam Firefox/3.0)
Hore na papieri sa mi vytlačí nápis, že používam zastaralý prehliadač. Asi sa to tam dostalo nedopatrením, ale aj tak – na papieri to nemá čo hľadať, aj keby som používal IE 4. Ďalej obrovský nadpis, to na papieri zaberie miesto, vyhodiť. Ostalo ti tam aj to horné menu, vyhodiť. Nechápem, prečo si dal preč komentáre, ale zato si tam nechal popisky formulára.
Mimochodom, predpis footer script{display:none} ti nič nespraví, pretože document.write() funguje tak, že obsah sa vkladá za script element.
juraj, ked som presiel na html5, tagy sa pomenili, preto to vyzeralo tak, ako to vyzeralo. nemal som cas napravit to. predtym bol styl pre tlac OK.
viktor zdravim,, akurat robim tlacovy format,
ale blbnu mi obrazky, kt sa zobrazuju k textom,
konkretne mam napr, do polovice cisty text a pod nimi malu galeriu obrazkov,, vedla seba su tri na scelu sirku stranky
ked zobrazim nahlad pre tlac, tak spodne obrazky sa mi
orezu – nepreskocia do dalsej stranky/tam sa uz voobec nezobrazia dalsie obrazky!
nevies v som by mohol byt problem?
@bruccio to by som asi musel vidiet takto narychlo..