Odlišné formátování tisku

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

Media=print

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á.

Příklad

<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.

Alternativní zápisy

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">

@Media

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>

Podpora prohlížečů

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.

Výhody

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.

Zalomení stránky

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.

Css vlastnosti řídící lámání 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

 

Hodnoty page-break-before a page-break-after
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

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.

Tisk pozadí

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.

Snadné experimenty: náhled

Internet Explorer a Chrome mají náhled, který se zobrazí předtím, než se stránka pošle do tiskárny. Je to klasické zobrazení před tiskem, vyvolané například zkratkou CTRL + P. 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.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.