Formátování dokumentů pro tisk pomocí CSS 1.

19. března 2003

•

Určitě jste si někdy potřebovali vytisknout nějakou stránku, abyste ji měli stále po ruce. Možná pro vás webmaster připravil speciální samostatnou verzi s osekaným formátováním. Ale je také docela možné, že na vás vůbec nemyslel. Z tiskárny se pak na vás smál papír potištěný spoustou nepotřebných informací, jenom ne tím, co vás na stránce skutečně zaujalo. V následujícím dvoudílném článku se dozvíte, jak se takovému nepěknému chování na svých stránkách vyhnout. Mějte rádi svého čtenáře!

Řekněme si nejdříve, čeho vlastně chceme dosáhnout. Máme stránku napsanou v XHTML, formátovanou pomocí CSS, a naším přáním je, aby vypadala dobře na monitoru i na papíře. Což ovšem předpokládá úplně jiné formátování, neboť to, co vypadá dobře na monitoru, může na papíru uživatele vyloženě otrávit. Jak toho ale dosáhnout? Jednou možností je samozřejmě vytvořit dva různé dokumenty s různým formátováním. To se ale v dnešní době jeví trochu jako anachronismus. Buďme tedy moderní a vytvořme dokument jeden, ale s dvojím formátováním. A jak na to? Odpověď je prostá. Pomocí CSS2.

Trocha teorie na začátek

Připomeňme si nejprve, jaké prostředky nám CSS poskytuje. Základem je pravidlo @media, které umožňuje aplikovat CSS styl na konkrétní médium. Detailní popis tohoto pravidla by asi bylo nošení dříví do lesa. Jen v rychlosti zde uvedu příklad použití – následující styl způsobí, že na tiskárně se celý text dokumentu vytiskne černě na bílém pozadí:

@media print {
  body
  {color: black;
  background-color: white;}
}

CSS2 tedy umožňuje nastavit vlastnosti zvlášť pro každé médium. Zároveň také definuje nové vlastnosti, které jsou aplikovatelné pouze v rámci konkrétního média. Zatímco například vlastnost color se dá s úspěchem použít jak na monitoru, tak na tiskárně, vlastnost page-break-before je aplikovatelná pouze na stránková média (řídí se jí zalamování, ke kterému dochází pouze na stránkových médiích) a na monitoru ztrácí smysl. Je zřejmé, že požadovaných vzhledů dokumentu dosáhneme právě kombinací obou zmíněných typů vlastností.

Nadpisy

V XHTML nadpisem rozumíme obsah párových značek h1, ..., h6. Ze světa DTP jsou známa určitá pravidla, jak se mají nadpisy při tisku chovat. Nadpis nesmí nikdy zůstat sám na konci stránky. CSS2 na tuto problematiku pamatuje avizovanou skupinou vlastností řídících zalamování stránky. Zakažme tedy prohlížeči, aby při tisku vložil zalomení stránky za nadpis:

h1,h2,h3,h4,h5,h6
{page-break-after: avoid;}

U základních nadpisů (například h1, h2) je nanejvýš vhodné, aby začínaly na vlastní stránce. Docílíme toho tak, že prohlížeči přikážeme vložit před ně zalomení:

h1,h2
{page-break-before: always;}

Tisk odkazů

Klasický odkaz vypadá např. takto: <a href='http://interval.cz'>Interval.cz</a>. Atributem href nastavíme samotný cíl odkazu a do párové značky a vložíme text odkazu, na který pak lze kliknout. Asi se teď divíte, proč zde popisuji takový přímo fundamentální základ celého webu. Při tisku je totiž samotný odkaz bezcenný. Uživatel sice ve vytištěném dokumentu pozná, která část textu tvoří odkaz (pokud je podtržen), ale nemá nejmenší šanci zjistit, kam odkaz vlastně směroval, což je i na papíře často velmi důležitá informace.

Díky kombinaci několika možností CSS2 jsme schopni tento nedostatek snadno vyřešit. Nejdříve si ale specifikujme, jaké chování odkazů po našem dokumentu vlastně budeme vyžadovat. Při klasickém zobrazení na monitoru se odkaz bude chovat normálně, jak bylo popsáno výše. Při tisku se za odkaz automaticky doplní jeho cíl v hranatých závorkách. Toho docílíme následujícím CSS2 stylem:

    @media print {
        a:after {content: “ [“ attr(href) „] „;}
    }

Co tento zápis znamená? Generovanému obsahu (vlastnost content) přiřadíme hodnotu atributu href pomocí CSS2 funkce attr(jmeno_atributu) vložené do hranatých závorek. Pokud na poli generování obsahu pomocí CSS2 zatím tápete, odkáži vás na článek CSS2 – automaticky generovaný obsah.

Nasnadě jsou i modifikace tohoto kódu. Například místo selektoru a:after lze použít *[href]:after, respektive zkrácenou variantu [href]:after (všechny elementy, které mají atribut href nastavený na libovolnou hodnotu). To je možná ještě lepší řešení, protože předchozí kód přidá hranaté závorky i za kotvy (pojmenovaná místa v dokumentu, na které lze odkazovat), které se ze zvyku často tvoří právě pomocí elementu a.

Pomocí tohoto krátkého, ale efektivního kódu jsme dosáhli požadovaného chování. Při tisku bude za každým odkazem uveden i jeho cíl. Bohužel pouze v případě, že uživatel používá Mozillu nebo Operu (testováno na Mozille 1.1 a Opeře 6.05). IE6 nepodporuje generování obsahu pomocí CSS, a proto tento komfort nemůže svým uživatelům poskytnout.

Rád bych také upozornil na trochu zvláštní chování, které jsem objevil. Chtěl jsem totiž docílit toho, aby při tisku zůstal samotný odkaz podtržený jak se sluší a patří, ale vygenerovaná adresa již podtržená nebyla. Snažil jsem se ji tedy logicky nastavit a:after {text-decoration: none;}, ale na generovanou adresu to nemělo vůbec žádný vliv. Zajímavé také je, že například nastavení různých barev fungovalo bez problému. (Pokud se někomu z vás podařilo tento malý problém vyřešit, dejte mi prosím vědět v diskusi.)

Velikost textu

Zatímco při nastavení velikosti textu na obrazovce je použití absolutních hodnot téměř zločin, pro tisk už to tak jednoznačné není. Vhodné je nastavit alespoň základní velikost písma, tedy velikost písma elementu body. A protože jste určitě použili pro nastavení velikosti písma dalších elementů (nadpisy, odstavce) relativní jednotky, bude celý dokument vypadat dobře a zachová poměrnou velikost písem všech elementů stejně jako na obrazovce. Výhodné je použít velikost v bodech, které jsou tiskárně vlastní. Dobrou volbou může být hodnota 12 pt, která je obecně dostatečně čitelná a nezabírá příliš místa. (Pozn. red.: Pro češtinu bývá často doporučována i hodnota 13 pt, s ohledem na diakritiku.)

Barvy a pozadí

Problémem, který občas dokáže úplně znemožnit (a také znechutit) tisk dokumentu, je nesprávná transformace barev. Není možné chtít, aby byl dokument vytištěn bílým písmem na černém pozadí, i když na obrazovce to může vypadat dobře. Proto je zvykem, že prohlížeč při tisku automaticky změní barvy písma a pozadí tak, jak je pro tisk z ekonomického hlediska nejvhodnější. Mějme například následující styl:

body
{color: white;
background-color: black;}

Záleží na jednotlivých prohlížečích, jakou transformaci barev zvolí. IE6 a Mozilla pokaždé nastaví barvu pozadí na bílou a barvu textu volí pro mě ne úplně pochopitelným způsobem. Výsledkem je obvykle něco mezi původní barvou textu a pozadí. Ve výše uvedeném případě bude text vytištěn šedě. Pro oba prohlížeče ale platí, že text je pokaždé čitelný, jeho barva je volena tak, aby byla alespoň trochu kontrastní vůči pozadí. Nejhůře je na tom Opera 6.05. Sice zcela logicky nastaví barvu pozadí na bílou, ale barvu písma nechá původní. V našem případě to ale znamená, že na papír nebude vytištěno vůbec nic! Pozadí i text totiž budou mít bílou barvu.

Určitě už tušíte, kam jsem předešlým odstavcem mířil. Nezapomínejte dokumentu nastavit zvláštní barevné schéma pro tisk. A myslete přitom i na nebohého uživatele, který si s největší pravděpodobností jen přeje, aby se mu to vytisklo co nejlevněji a nejčitelněji. Jinak řečeno:

@media print {
  body
  {color: black;
  background-color: white;}
}

Zcela podobně je vhodné se zachovat v případě obrázkového pozadí, které sice může na monitoru vypadat výborně, ale na papír prostě nepatří. Není nic jednoduššího než jej pro tisk vypnout:

@media print {
  body
  {color: black;
  background: white;}
}

Tenhle možná na první pohled divný zápis udělá přesně to, co po něm požadujeme. Vlastnost background je zkrácenou vlastností pro background-color, background-image, background-repeat, background-attachment a background-position. Nám ale stačí nastavit hodnotu pro barvu pozadí. Zbývající vlastnosti nabudou své základní hodnoty, což je pro background-image hodnota none.

V příštím článku se pokusíme vyřešit další problémy týkající se formátování dokumentů pro tisk a zdokumentujeme si funkce a možnosti, které nám nabízejí samotné prohlížeče.