---

Jak připojit CSS - styly pro tisk

Dnes se podíváme na styly pro tisk našich stránek. Ukážeme si moderní pravidlo na odhalování odkazů a řekneme si co za prvky by se nemělo tisknout a především že bychom měli šetřit inkoustem.

Tento článek se bude zabývat pouze vytvářením stylů pro tisk. Informace o aplikaci tiskových stylů na dokument si můžete najít v článku Jak připojit CSS - Finále ala všechno dohromady nebo v článku Jak připojit CSS - typy médií.

Začínáme

Málem všechny kvalitní webové stránky nabízí uživatelům mimo stylů pro obrazovky a podobná média i styly pro tisk. To je velice šikovná věc, přičemž vytvoření takových jednoduchých a spolehlivých stylů není žádná složitá věc.

Na co musíme pamatovat

Jednou z nejdůležitějších věcí je uvědomit si, že tiskárny pracují se stránkou (většinou velikosti A4), ne s obrazovkou jak jsme doposud zvyklí. Proto udávání polohy pomocí pixelů není zrovna na místě. Místo pixelů bychom měli používat body, například takto:

body {
font-size: 12pt;
}

Nic těžkého, že? A přitom máme větší jistotu že písmo s určenou bodovou velikostí bude vypadat stejně na většině tiskáren. Pokud bychom použili pixely, každá tiskárna by mohla stránky tisknout různě velikým písmem.

Typ písma

Možná už jste někdy přemýšleli proč jsou noviny tisknuty patkovým písmem, které zrovna moc krásně nevypadá. Je to především kvůli dobré čitelnosti, protože písmo zakončené patkami vytváří jakési podvědomé linky, takže se nám tolik nestává že bychom přeskakovali řádky. A jelikož i my chceme tisknout nějaký text, který se bude číst na papíře, přidělýme našim stylům i odpovídající typ písma:

body {
font-family: "Times New Roman", serif;
}

Šetření inkoustem

Uživatel si většinou přeje vytisknout pouze obsah, proto můžeme schovat nepotřebné prvky jako reklamu, navigační menu, postranní lišty, formuláře atd a ušetřit tak podstatné množství inkoustu.

Například kdybychom měli na stránkách prvky #menu , #reklama , #vyhledat , #mail_formular a #leva_lista , mohli bychom je schovat takto:

#menu, #reklama, #vyhledat, #mail_formular, #leva_lista {
display: none;
}

Nastavením vlastnosti display: none odstraníme uvedené prvky z tištěné stránky. To bychom měli schovány nadbytečné prvky a teď nesmíme zapomenout nepoužívat žádné pozadí, to by vážně nebylo pro šetření inkoustem dobré.

Barva odkazů

Nesmíme zapomenout nastavit styly pro tisk tak, aby bylo v textu patrné co jsou odkazy a co text. Pro odkaz si můžeme vybrat jakoukoli barvu, která bude dobře patrná jako odkaz. Nesmíme však zapomenout na černobílý text, kde by měl být patrý rozdíl v odstínu. Samozřejmě vybráním výchozí modré barvy nic nezkazíme (dokonce bych se k ní i více přikláněl).

a:link, a:visited {
text-decoration: underline;
color: blue;
}

Pravidlo text-decoration: underline zajišťuje podtržení odkazu. Nastavování pseudotříd :active a :hover je v tisku zbytečné.

Malý zázrak - odhalení odkazů

Jedním z moderních triků, s kterým umějí pracovat moderní prohlížeče plně podporující specifikaci CSS2, je odhalení URL hypertextrového odkazu. Mezi prohlížeče podporující CSS2 patří například Netscape 7.0 a Mozilla.

Styl pro odhalení vypadá takto:

a:link:after, a:visited:after {
content: " ("attr(href)") ";
}

Toto pravidlo zaručuje, aby se za hypertextovým odkazem odkrylo jeho příslušné URL. Prohlížeč vloží URL do závorek s jednou mezerou před a za nimi. Pokud nechcete ukazovat URL u odkazů v hlavičce a zápatí, můžete pravidlo pro odhalení URL přidělit pouze příslušnému prvku. Máte-li například hlavnímu obsahu stránky přiděleno id #obsah , můžete to udělat takto:

#obsah a:link:after, #obsah a:visited:after {
content: " ("attr(href)") ";
}

Tip

Pokud se pozorně podíváte na pravidlo " ("attr(href)") " , zjistíte že se před a za objevují uvozovky s vepsanými mezerami a závorkami. To zajišťuje, aby se URL objevilo v závorkách, u kterých bude mezera před a za. My si však můžeme s těmito mezerami pohrávat a dokonce můžeme měnit i závorky. Pokud jste se koukali na náhled tisku těchto stránek, možná jste zjistili že vypisování URL odkazů je zde v tomto formátu: (odkaz:http://www.neco.cz) . Zoho jsem docílil takto:

#obsah a:link:after, #obsah a:visited:after {
content: " (odkaz:"attr(href)") ";
}

Toto pravidlo zaručuje, že je před a za závorkami mezera a uvnitř závorek je první slovo odkaz: , po kterém ihned následuje URL cesta. Tím ihned myslím, že mezi dvojtečkou a URL není žádná mezera z důvodu zalamování na další řádek.

A co kompatibilita?

V této době podporuje pouze pár prohlížečů pseudotřídu :after . Nemusíte se však obávat, že by se ostatní prohlížeče mohly při odhalování URL zakuckat, je to pro ně zcela neškodné. Budou toto pravidlo prostě ignorovat.

Struktura

Pokud mají vaše stránky nějakou strukturu, měli by jste si u stylů pro tisk vystačit pouze se souhrnem těchto pravidel:

body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
#menu, #reklama, #vyhledat, #mail_formular, #leva_lista {
display: none;
}
a:link, a:visited {
text-decoration: underline;
color: blue;
}
#obsah a:link:after, #obsah a:visited:after {
content: " ("attr(href)") ";
}

Názvy prvků jako například #obsah si musíte nahradit svými.

Shrnutí

Jak vidíte, vytvoření základních stylů pro tisk není nic těžkého. A pokud mají vaše stránky nějakou strukturu, tvrdím si říct že si s výše uvedeným souhrnem pravidel bohatě vystačíte. Docela věcné je také vědět, že většina prohlížečů má funkci pro náhled stránky před tiskem, takže při testování vašeho stylu pro tisk stačí jít na menu Soubor a položku Náhled a nemusíte tak spotřebovávat čas, papír a inkoust. Stránky se vám zde zobrazí přesně tak, jak by se vytiskly.

Nejkrásnější na tom je, že jednoduchou úpravou jednoho dokumentu můžete změnit nastavení velkého množství stránek... A to je magie kaskádových stylů...

2.8.2005