CSS umožňují, aby se vzhled stránky na obrazovce a v tiskárně odlišoval.
Media=print - Příklad - Alternativní zápisy - Podpora prohlížečů - Výhody - Zalomení stránky - Tisk naležato - Tisk pozadí - Snadné experimenty
Uvedu-li v tagu <style>
atribut media s hodnotou print
, říkám tím, že se
instrukce tohoto stylopisu budou vztahovat jenom na tisk.
<style media="print">
/* zápis stylu */
</style>
Existují i jiné možné hodnoty atributu media, například screen pro monitor, page pro papírovou stránku. Avšak kromě hodnoty print se to kvůli slabé podpoře moc nepoužívá.
<html><head><title>Pokus s media=print</title>
<style media="print">
p {font-style: italic}
</style>
</head>
<body>
<p>Tento text bude na monitoru zobrazen normálním stojatým písmem, ale při tisku
vyleze kurzívou.</p>
</body></html>
Nevěříte? Inu, než jsem si tenhle příklad vytisknul, taky jsem nevěřil.
Vztahuje-li se k tisku celý externí stylopis odkazovaný tagem <link rel=stylesheet>, prostě se také přidá media=print, stejně jako do <style>:
<link rel=stylesheet href="někam.css"
media="print">
Oproti tomu pokud chci nějaký styl přiřadit všem médiím, mohu použít hodnotu all, která je ale výchozí:
<link rel=stylesheet href="někam.css"
media="all">
Horší situace nastává, pokud chci pro tisk určit část stávajícího stylopisu nebo když styl zadávám přímo. Pak musím využít formule @media print.
<style>
p {color: blue}/* Normální stylopis */
@media print {
p {text-indent: 10%}
}
/* Pokračování normálního stylopisu*/
</style>
Určitě jste si všimli syntaxe, která spočívá v použití dalších složených závorek, které ohraničují styl určený pro tisk.
Podobně se to dá použít v přímém stylu:
<p style="@media print{ text-indent:
10% }">Text odstavce.</p>
Výše popsané postupy fungují ve všech prohlížečích, které podporují CSS s výjimkou Netscape Navigatoru
verze 4 (což asi nikoho nepřekvapí), ten naštěstí pak ty zápisy ignoruje. Mírné zklamání jsem zažil u MSIE
verze 4, který nepodporuje zápis @media print
(media=print ano). IE 5, Opera 5 a Mozilla 5 podporují
bezvadně. Můžete si to zkusit na příkladu, v němž využívám všechny
postupy.
Není to žádná bomba, ale někdy se to může hodit. Napadá mě pár příkladů:
Určitě vymyslíte mnoho veselých použití. Zejména si lze vyhrát s třídami a identifikátory.
CSS2 nabízí celou kolekci nových vlastností, které mají ovlivňovat tištěný výstup. Dnes jsou do prohlížeče Internet Explorer 5 a 6 zabudovány pouze vlastnosti určující zalomení stránek.
Vlastost | Význam | Hodnoty |
---|---|---|
page-break-before | zalomení stránky před elementem | always | auto | right | left | avoid |
page-break-after | zalomení stránky po elementu |
Hodnota | Význam | Poznámka |
---|---|---|
always | zalomení vždy | Jediná rozumně použitelná hodnota |
auto | normálně | Jako by se nic nezadalo |
right | nová pravá stránka | u tisku, v němž jsou rozlišovány pravá a levá stránka |
left | nová levá stránka | |
avoid | nikdy nelámat | V Internet Exploreru nefunguje |
V praxi by se nejčastěji použilo zakázání zarovnání po nadpisech (h2 {page-break-after: avoid}), ale to nefunguje. Proto je dnes rozumné využití těchto vlastností jen v přikazování zalomení (hodnotou always), což ale často vede k chybám a zbytečné spotřebě papíru.
Tisk naležato prakticky nejde nijak udělat. V Internet Exploreru 5 občas funguje poněkud zvláštní CSS vlastnost, která umožňuje nastavit tisk naležato, to jest na šířku. Zápis je následující:
@page {mso-page-orientation: landscape}
Pozor, mám pocit, že se tím přenastaví prohlížeč na delší dobu a pak tak tiskne všechno. Mnohem častěji to ovšem nefunguje vůbec, myslím, že to na klientovi vyžaduje i nainstalované MS Office.
Je to někde v nastavení prohlížeče. Např. v IE 5 a IE 6:
Nástroje > Možnosti > Upřesnit > Tisk > Tisknout barvy a pozadí na obrázky.
Neznám žádný způsob, jak nějakou html nebo css deklarací způsobit tisk pozadí, musí si to nastavit sám uživatel.
Dnes nejrozšířenější prohlížeče Internet Explorer 5 a 6 mají velmi pěkný příkaz: Soubor > Náhled. Je to klasické zobrazení před tiskem, ukazuje stránku přesně tak, jak potom vyleze z tiskárny. Podle mých zkušeností je to naprosto přesné s výjimkou tisku průhledných obrázků na postscriptových tiskárnách (průhledná barva se tiskne bíle). Takže na pokusy nemusíte plýtvat papírem.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.