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.
Dříve se to dalo použít i v přímém stylu, tento zápis ale v moderních prohlížečích nefunguje:
<p style="@media print{ text-indent:
10% }">Text odstavce.</p>
Výše popsané postupy fungují ve všech prohlížečích, které podporují CSS. Od verzí IE 5, Opera 5 a Mozilla 5 to funguje 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.
Ještě jednodušší způsob spočívá v tom, že si po dobu ladění přepíšete media="print" na media="screen". Potom změny uvidíte rovnou na obrazovce. Musíte se ovšem ujistit, že máte laděné styly na konci stylopisu (aby měly prioritu) a nesmíte zapomenout to pak změnit zpátky na print.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.