Kvalita a komfort tisku z moderních prohlížečů

Ať už se tento trend vyvine jakkoliv, jisté je to, že role webového prohlížeče se posiluje a s tím stoupají i nároky na něj kladené. Již dávno nejde jen o zobrazování HTML dokumentů, v čím dál větší míře se jejich obsah tiskne, výstup intranetových aplikací je často dokonce pro výtisk určen apriorně. Otázkou ovšem zůstává, zda jsou dnešní dominantní webové prohlížeče na svou vedlejší roli dobře připravené.

Nastavení

Výchozí nastavení

Dříve, než se začne vůbec tisknout, je prozíravé zobrazit si náhled tisku. Tato funkce je k dohledání v menu Soubor. Jejím prostřednictvím lze snadno zkontrolovat, zda je všechno v pořádku. Při tomto náhledu uživatel zjistí, že tiskový výstup bude vypadat přece jen odlišněji, než je patrné při běžném prohlížení stránky. Jak odlišněji? To závisí na více faktorech, nyní se budu věnovat faktoru použitý browser. Především je zde omezena tisknutelná oblast, která je závislá na šířce papíru. Pokud ji šířka webové stránky přesahuje, nastává situace, ke které prohlížeče zatím přistupují porůznu. Starší verze Internet Exploreru jednoduše vytisknou jen to, co se vejde, a zbytek „useknou“. Verze 7 už umí stránku automaticky zmenšit, když je pro tisk příliš široká. Opera pro sanaci problému s omezenou oblastí tisku využívá funkci Fit to width, s jejíž pomocí zmáčkne stránku do vyhovující šířky. Konkrétně udělá to, že eliminuje autorem definované rozměry a odsazení, zmenší velké obrázky, a když ani to nestačí, rozdělí ještě dlouhé textové řetězce. Firefox v případě, že stránka je pro tisk příliš široká, zmenší měřítko. Tímto způsobem celou stránku (kromě pozadí, ale to se stejně netiskne) optimálně zmenší. Podobně se chová program Preview na Macu, tedy až na to, že upraví i pozadí.

V neposlední řadě je potřeba se zmínit o tom, že prohlížeče při tisku vkládají do dokumentu záhlaví a zápatí. Do těchto oblastí obvykle umísťují informace, a to především titulek, číslo stránky, URL a datum.

S výjimkou Opery prohlížeče netisknou pozadí.

Možnosti nastavení

I stane se, že implicitní nastavení v určitém případě nevyhovuje. Naštěstí nabízejí prohlížeče poměrně rozsáhlé nastavení tisku. Veskrze u všech má uživatel možnost vybrat si, zda chce tisknout na výšku či na šířku, s pozadím či bez, zvolit si velikost okrajů a rozmyslet si, jestli potřebuje mít vytisknuté i informace o dokumentu. U nich se na chvíli zastavím, neboť zde se prohlížeče liší ve způsobu řešení tohoto nastavení.

V Opeře je možné pouze zvolit mezi vytisknout / nevytisknout záhlaví a zápatí (IE7 tuto volbu poskytuje v náhledu). Ve Firefoxu už si může uživatel vybrat, kam chce kterou informaci dát, a smí zde umístit i vlastní text. Jeho délka je však omezena. Je-li příliš dlouhý, zobrazí se jen začátek zakončený třemi tečkami (totéž platí i pro IE). V IE na uživatele čekají dvě editovatelná políčka s poněkud záhadným obsahem. Onu záhadnost mají na svědomí použité proměnné, jejichž význam však není těžké rozluštit: &w  – titulek stránky; &b  – „vycpávka“, vyplňující prostor mezi pravým a levým koncem; &p – číslo stránky; &P  – celkový počet stránek; &u  – URL; &d  – datum. Toto řešení je sice trochu matoucí, ale zároveň i nejpřínosnější, neboť nabízí příležitost zkombinovat a koncentrovat více údajů do jedné informace. Lze například napsat: &w vytištěno &d. Pro snazší představu doplním ukázky:

Nastavení tisku v Internet Exploreru

Nastavení tisku ve Firefoxu

Nastavení tisku v Opeře

Nastavení programu Preview

Tisk ze Safari řídí program Preview. Ten je na Safari nezávislý, proto se mu věnuji jen okrajově. Každopádně díky jemu lze ze Safari tisknout do formátu PDF, což by měl nabídnout i Firefox 3.

Slabinou porovnávaných prohlížečů je tisk pozadí. Opera i Firefox, narozdíl od IE, tuto možnost nabízejí už v základním nastavení, jenže v kombinaci s úpravou šířky stránky je výsledek poněkud děsivý – stránka se zúží, avšak obrázkové pozadí se nepřizpůsobí. Těch slabin je vlastně více, každý prohlížeč má u nastavení tisku nějaké nedostatky. Následující seznam uvádí ve zjednodušené podobě, co kterým prohlížečům chybí.

MSIE 6

• automatické zmenšení stránky
• úprava barevnosti
• možnost tisku pozadí

WIE

• úprava barevnosti
• možnost tisku pozadí

Firefox 2

• úprava barevnosti
• výběr formátu

Opera 9

• automatické zmenšení stránky
• editace záhlaví a zápatí

Nutno dodat, že zjednodušená podoba neodráží skutečnost příliš věrně. Samotný výběr nedostatků byl ryze subjektivní záležitostí a nemůže být opravdu reprezentativní. Především si je však nutno uvědomit, že údaje v tabulce vycházejí ze základního nastavení. Kdyby si například uživatel Firefoxu vyfiltroval v about:config výraz print, byl by jistě udiven, jaké možnosti konfigurace se mu nabízejí. I uživatelé Opery si mohou leccos vylepšit v opera:config:

opera:config

Řešení komplikací

FAQ

Potíže vyplývající z široké stránky

a) pravá část stránky se nevytiskne celá

b) ve Firefoxu a WIE se to tiskne malé

c) v Opeře se zúží horizontálně srovnané bloky

Obvykle pomůže tisknout na šířku papíru, nebo zmenšit okraje, nebo obojí.

Ad a) pro MSIE existuje instalovatelné rozšíření, které stránku zmenší. Ad c) změna výchozího měřítka zajisté prospěje

V Internet Exploreru nejde vytisknout pozadí

Ale jde. K příslušné volbě se dojde touto cestou: nabídka Nástroje – položka Možnosti Internetu; zde se musí v záložce Upřesnit najít zaškrtávací políčko s popiskem Tisknout barvy a obrázky na pozadí.

Písmo splývá s obrázkovým pozadím

Prohlížeče kontrolují, jestli je barva pozadí dostatečně kontrastní s barvou písma, jenže barevnost obrázkového pozadí nezohledňují, takže když je písmo přespříliš světlé a barva pozadí není definovaná (zůstává tedy výchozí bílá), vyhodnotí to prohlížeče jako příliš nízký kontrast, byť je podklad tmavý, a barvu písma změní na černou. Východiskem je pozadí netisknout, nebo změnit barvu písma (viz další bod).

Písmo je velice světlé, na bílém papíře jde špatně číst

Pod světlým písmem bylo určitě tmavé pozadí, které se nevytisklo. Naštěstí se dá barva písma změnit.

Firefox: nabídka Nástroje – položka Možnosti… V Nastavení Firefoxu je záložka Obsah a na ní v sekci Písma & Barvy tlačítko Barvy… Přes něj vede cesta k nastavení barev. Zde je důležité zaškrtávací políčko Povolit stránkám používat vlastní barvy. Je nutné toto políčko zbavit zaškrtnutí a donutit tak prohlížeč použít nastavené barvy.

Internet Explorer: nabídka Nástroje – položka Možnosti Internetu, zde je na záložce Obecné dole tlačítko Usnadnění. Přes něj se lze dostat k dialogovému oknu Usnadnění přístupu, kde již stačí zaškrtnout volbu Ignorovat barvy definované na webových stránkách.

I v Opeře je teoreticky možné vnutit stránkám své barvy, jenže pouze tam, kde je barva definovaná přes tag <font>. Autorský stylopis totiž „přebije“ uživatelovo nastavení barev. Bohudík je Opera na nízký kontrast velmi citlivá a například i sytě žluté písmo nechá vytisknout černě.

Spolu s textem se mi tisknou i věci, o které nestojím

V tomto případě je jednoduchá pomoc. Tiskárny přece umožňují tisknout jen vybraný (označený) obsah. Většinou se však využívá jiný postup – označený text se zkopíruje, vloží do pokročilého textového editoru (který zachová i formátování) a poté se tiskne jako běžný kancelářský dokument.

Uživatelské stylopisy

V úvodu zazněla otázka, zda dnešní prohlížeče zvládnou dobře zpracovat webovou stránku k tisku. Nyní přišel čas tuto otázku zodpovědět. Odpověď zní ANO. Je zde ovšem háček. Webové stránky jsou hlavně určeny k prohlížení, nikoliv pro tištění. Přitom obojí má svá specifika, která jde dost obtížně skloubit dohromady. Pro tiskárnu je například směrodatná omezená oblast tisku, zatímco u monitorů se okolnosti vyvíjejí jinak – s vyšším rozlišením se objevuje snaha vměstnat toho na šířku pokud možno co nejvíc, a tak přibývá sloupců a postranních boxů.

Jak k této schizofrenní situaci přistupují tvůrci webových stránek? V zásadě třemi způsoby: buď udělají zvlášť stránku pro tisk, nebo přidají zvláštní CSS styl pro tisk, a nebo to prostě nechají na prohlížečích, ať si s tím poradí. Třetí způsob je poněkud nešťastný, neboť někdy vede k potížím popsaným v předchozím úseku. Ale ani v dalších dvou případech (hojně se o nich debatovalo u Martina Snížka – doporučuji přečíst článek i komentáře) nemusí být uživatel dostatečně spokojen. Bylo by však naivní hledat příčinu v nedokonalém prohlížeči, dispozice prohlížečů jsou na přijatelné úrovni. Problém tkví v tom, že se tvůrce příliš soustředil na to, jak bude stránka vypadat na obrazovce monitoru, a na tiskovou verzi se „vykašlal“. Uživatelé však mají příležitost věc napravit. Mohou pro tisk připravit vlastní stylopisy.

Mocnou sílu uživatelských stylopisů se pokusím demonstrovat na bylinách. Jak vidno, nabídka bohatýrských příběhů je vcelku štědrá, o to více by bylo práce s kopírováním každého příběhu do Wordu (nebo Word Processoru) a následnými úpravami, přestože úpravy jsou v tomto případě velmi primitivní. Postačí odstranit hlavičku a patičku stránky, převést anglické odstavce na české a možná ještě zarovnat text do bloku. Takže tady mám stylopis, který chci aplikovat na odkazované byliny:

V Opeře: nabídka Zobrazit – submenu Styl – položka Nastavit styl. Zde vyberu svůj stylopis a potvrdím OK. Následně si přepnu stylování na uživatelský mód, zaktualizuji stránku a může se začít tisknout …

Ve WIE: nabídka Nástroje – položka Možnosti Internetu, zde na záložce Obecné dole kliknu na tlačítko Usnadnění. Další postup už je stejný jako v Opeře.

ukázka

Nutno ovšem přiznat, že ve většině případů se vlastní stylopisy nehodí. Jde-li o to vytisknout jen jednu konkrétní webovou stránku, lépe se uplatní favelety zmiňované v komentářích u výše doporučovaného článku, nebo obvyklá praxe copy&paste. Hodí se tedy převážně jen v případech, když se jedná o vytištění více stránek z jednoho webu. Obrovskou nevýhodou je hlavně to, že je nutná dobrá znalost CSS a HTML. Zkoumání struktury cizího kódu se také nedá přirovnávat k procházce růžovým sadem, avšak zde existují pomocné nástroje, ať už integrované funkce vývojářských programů, či doplňky prohlížečů (za všechny alespoň DOM Inspector). Další nepříjemností jsou tabulkové layouty, ale i s těmi si lze, samozřejmě jen v určitých mezích, poradit. Levého bočního menu se dá například zbavit tak, že se tabulka napasuje záporným left-marginem mimo zobrazitelnou (a tím i vytisknutelnou) oblast.

Žádejte u svého webmastera

Obtížnosti situace, jak stylově sladit vizuální a tiskový výstup plus ještě další výstupy, si všimli i ve W3C. Vymysleli tedy řešení spočívající v individuálním přístupu k různým zařízením. Řeč je o tzv. @pravidlech, zejména o pravidlu @media, pomocí něhož je možné pro každé médium definovat jiný styl. CSS kodérům již dlouhá léta umožňuje ovlivnit vzhled tištěného dokumentu, řídit tisk i upravit plochu, na kterou se bude tisknout.

Vzhled tištěného dokumentu

Záměrem je separovat tiskový výstup od ostatních výstupů, zejména toho vizuálního. Jednoduše se to provede tak, že se nadefinuje více stylů pro různé typy médií, které se připojí k dokumentu buďto každý zvlášť

nebo společně v jednom univerzálním CSS souboru. V něm se teprve jednotlivé styly oddělí

První způsob je přehlednější, ale na druhé straně je nutno akceptovat více HTTP požadavků. Styly se také dají vkládat pomocí @import nebo přímo do dokumentu přes element <style>, tyto způsoby se však nedoporučují.

Tiskový styl se výborně využije na eliminaci odkazů
a, a:visited {text-decoration: none; color: black}
a zejména na odstranění bočních sloupců
#menu {display: none}

Řízení tisku

Ne vždycky se obsah rozdělí na tisknuté stránky podle představ. Tabulka se třeba velmi ráda rozdělí přes dvě stránky. Hodně pofidérně vypadá také nadpis, pod kterým už nic není, neboť už nezbylo místo… Dá se s tím něco dělat? Ale jistěže! Úderné CSS tyto nešvary v budoucnu rázem vymýtí. Podrobně to popsal už Jan Dudek, omezím se tedy jen na stručnou rekapitulaci.

„Lámáním“ dokumentu se zabývají tyto vlastnosti: page-break-before, page-break-after, page-break-inside, orphans, widows. S prvními dvěma lze docílit přesunu tisku až na další stránku. Uplatní se zejména u tabulek. Vzhledem k tomu, že současné prohlížeče zatím bohužel netisknou na nové stránce znovu hlavičku tabulky (i patičku tisknou jen jednou, ale to snad nevadí), a tedy je znatelně těžší se u „neohlavičkované“ části vyznat, které údaje patří ke kterému sloupci, je tudíž prozíravé snažit se, aby se tabulka vešla na jednu stránku. Ještě lepší by byla vlastnost page-break-inside (řídí zalomení uvnitř elementu). Ta je na rozdíl od předchozích dvou přizpůsobivá. Pokud ji elementu přiřadíme s hodnotou avoid, posune se jeho tisk na druhou stránku jen tehdy, když na první už nezbývá dost místa. Bohužel se právě toto u tabulek (stejně tak ani u plovoucích prvků) použít nedá. Poslední dvě uvedené vlastnosti určují počet řádků, které element smí zanechat na začátku nebo konci stránky. Standardně dva.

Podpora tiskových CSS vlastností v jednotlivých prohlížečích

Z působení výrobců prohlížečů ve skupině WHATWG by se dalo usuzovat, že se už už třepou na nové standardy, které by mohli implementovat. Přitom nejsou, jak dokládá tabulka, schopni plně implementovat dosavadní CSS z verze 2.1. Jedině p age-break-before a page-break-after jsou implementovány napříč prohlížeči. Jediná Opera pokročila o kus dále, ale ne bez chyb. Stránkové pseudotřídy umožňují kombinaci vícestránkových stylů na jednom dokumentu. Bug se projeví při míchání stylů s odlišnou orientací (landscape / portrait).

Aby to bylo ještě veselejší, CSS3 chystá další „lahůdky“. Bezesporu nejzajímavější z nich, pojmenované stránky, představil ve svém článku také Jan Dudek. Jeho objev, že tuto „vychytávku“ podporuje Opera, se mi bohužel nepodařilo potvrdit. Další z důležitých věcí, které CSS3 přináší, je větší operabilita při určování rozměrů stránky. Zatím lze pro atribut size definovat pouze jednotkové rozměry nebo orientaci papíru, v budoucnu však bude možné zadat název formátu či jeden z nově standardizovaných termínů letter, legal, ledger. Perspektivně se také počítá s ovládnutím záhlaví a zápatí, takže nebude problém zfalšovat nejrůznější informační údaje, třeba titulek webové stránky nebo datum tisku. Jinou věcí, kterou CSS3 řeší, je orientace obrázků na stránce. Široké obrázky se většinou snadno vejdou do okna prohlížeče, žel na papír už hůře. A tak případná změna orientace zajisté přijde vhod. Počítá se i s ovládáním měřítka, tj. se zmenšováním, resp. zvětšováním, tzv. nahrazovaných prvků (např. obrázků).

Jednu z možností, jak si vyzkoušet CSS vlastnosti tisku, nabízí program Prince, jehož náplní je převod XML do PDF.