 |
CSS umožňují, aby se vzhled stránky na obrazovce a v tiskárně odlišoval.
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">
(Existují i jiné možné hodnoty atributu media, například screen pro monitor, page pro tištěnou stránku.)
<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>
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{ p {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 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.
Prakticky dnes nejde nijak udělat. V Internet Exploreru 5 ale 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 IE5:
Nástroje - Možnosti - Upřesnit - Tisk - Tisknout barvy a pozadí na obrázky.
Dnes nejrozšířenější prohlížeč Internet Explorer 5.x má 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é. Takže na pokusy nemusíte plýtvat papírem.
Vizte též: Různý styl v různých prohlížečích, Přehled vlastností a hodnot CSS
Příklad: Zkouška tiskových CSS
|
Hledání
Jak psát web:
http://dusan.pc-slany.cz/internet/
Píše Yuhů: autorova stránka,
mail: dusan@pc-slany.cz
Poslední aktualizace 27.01.2003