Tiskn∞te jen to, co je pot°eba!

Nenφ nic horÜφho, ne₧ tisk spousty naprosto zbyteΦn²ch informacφ. Uva₧ujte se mnou. Chce u₧ivatel skuteΦn∞ mφt ve vytiÜt∞nΘm dokumentu navigaΦnφ menu? UrΦit∞ ne. TakovΘ menu, kterΘ je p°i prezentaci na monitoru nezbytnΘ, je na papφ°e naprosto zbyteΦnΘ a pouze zabφrß drahocennΘ mφsto. P°edstavme si nßsledujφcφ CSS-layout:

...a fragment XHTML k≤du:

Jak lze poznat na prvnφ pohled, jednß se o velmi jednoduchou ukßzku ΦistΘho CSS layoutu. Je tvo°en menu div#menu a samotn²m obsahem div#main. Menu je umφst∞no fixn∞, tak₧e i p°i skrolovßnφ z∙stßvß na svΘm mφst∞. My ale nynφ chceme, aby se menu na papφ°e neobjevilo v∙bec. Vezm∞me si na pomoc CSS2:

Tφmto k≤dem prohlφ₧eΦi na°izujeme, aby menu v∙bec netisknul. SamotnΘmu obsahu ruÜφme jakΘkoliv pozicovßnφ, tak₧e bude vytisknut na celou plochu papφru. Obecn∞ je nejlepÜφ omezit poΦet pozicovan²ch element∙ p°i tisku na minimum. Narozdφl od monitoru nßm papφr pochopiteln∞ neposkytuje ₧ßdnΘ prost°edky pro scrolling, tak₧e zp∙sob, jak²m se p°esahujφcφ element vytiskne, zßle₧φ Φist∞ na prohlφ₧eΦi, respektive ovladaΦi tiskßrny.

D∙le₧itΘ je uv∞domit si jednu zßsadnφ v∞c. Nastφn∞n² problΘm jsme byli schopni vy°eÜit pouze dφky tomu, ₧e jsme v dokumentu striktn∞ odd∞lili obsah od vzhledu pomocφ ΦistΘmu CSS-layoutu. V tabulkovΘm layoutu by bylo zvlßdnutφ takovΘho problΘmu o dost slo₧it∞jÜφ, ne°kuli nemo₧nΘ.

Nastavenφ okraj∙ strßnky

Mß poslednφ rada se t²kß velikosti strßnky. Nedßvno se mi p°i tisku jednoho dokumentu p°ihodilo, ₧e byl rozta₧en na celou plochu papφru, na kterou je tiskßrna schopna tisknout, tak₧e po stranßch z∙staly ani ne centimetrovΘ okraje. Musel jsem tedy dokument vytisknout jeÜt∞ jednou a okraje nastavit ruΦn∞. Norma CSS2 nßm ale dßvß celkem siln² prost°edek k nastavenφ tisknutelnΘ oblasti. Slou₧φ k tomu pravidlo @page. Celkem rozÜφ°enΘ nastavenφ je 2,5 cm na vÜech stranßch (zßkladnφ nastavenφ Microsoft Wordu). Nastavme jej tedy i pro nßÜ dokument:

Snad je jeÜt∞ vhodnΘ poznamenat, ₧e z prohlφ₧eΦ∙ @pravidlo @page podporuje zatφm pouze Opera. I tak se ale domnφvßm, ₧e jeho pou₧itφ je nanejv²Ü vhodnΘ.

Poznej zbran∞ nep°φtele!

A₧ dosud jsme si ukazovali, jak co nejlΘpe p°izp∙sobit strßnky pro tiskßrnu. Je dobrΘ mφt takΘ p°ehled o tom, co u₧ivatel∙m umo₧≥uje samotn² prohlφ₧eΦ.

P°i zobrazenφ na monitoru si nikdy nem∙₧eme b²t zcela jisti, jak bude dokument nakonec zobrazen. Nemßme toti₧ znalosti o rozliÜenφ, poΦtu barev, nastavenφ prohlφ₧eΦe, velikosti okna atp. V podobnΘ situaci se ocitßme i p°i tisku. M∙₧eme sice jeÜt∞ p°edpoklßdat, ₧e se bude tisknout na papφr formßtu A4, ale to je tak asi to jedinΘ. Zbytek je pln∞ v rukou ovladaΦe a obslu₧nΘho programu tiskßrny a takΘ prohlφ₧eΦe.

VÜechny prohlφ₧eΦe u₧ snad obsahujφ funkci nßhled pro tisk (print preview), kterß dßvß u₧ivateli p°edstavu, jak bude dokument na papφru vypadat. Dokument je v tomto m≤du formßtovßn ji₧ pomocφ styl∙ urΦen²ch pro tisk, co₧ je velkΘ ulehΦenφ p°edevÜφm pro webdesignery. Takto m∙₧eme jednoduÜe kontrolovat formßtovßnφ pro tiskßrnu bez toho, abychom museli cel² dokument neustßle znovu a znovu tisknout. Je sice pravda, ₧e obΦas nßhled nenφ ·pln∞ p°esn², ale pro zφskßnφ dobrΘ p°edstavy bez problΘm∙ staΦφ.

Prohlφ₧eΦe nabφzejφ ale mnohem vφce. Vezm∞me to p∞kn∞ popo°ad∞. Kup°φkladu Internet Explorer u₧ivateli poskytuje nßsledujφcφ dialog:

Jak je z obrßzku patrnΘ, u₧ivatel m∙₧e nastavit orientaci a okraje (margin) dokumentu. P°ipome≥me, ₧e IE nepodporuje pravidlo @page, a proto je toto jedin² zp∙sob, jak tyto atributy tisku ovlivnit. Dßle IE dovoluje u₧ivateli nadefinovat formßt zßhlavφ a zßpatφ, pop°φpad∞ je ·pln∞ zruÜit. ObΦas se lidΘ ptajφ, jestli lze n∞jak zobrazovßnφ zßhlavφ a zßpatφ ovlivnit v CSS. Bohu₧el to zatφm nijak nelze.

Mozilla poskytuje obdobnΘ slu₧by. Krom∞ klasickΘho nastavenφ orientace, okraj∙, zßhlavφ a zßpatφ lze navφc zakßzat transformaci barev, tak₧e dokument je vytiÜt∞n p°esn∞ v t∞ch barvßch, kterΘ jsou na monitoru (samoz°ejm∞ pokud zßrove≥ nejsou barvy nastaveny p°φmo pro tiskßrnu pomocφ @media print). TakΘ lze nastavit procentußln∞ zv∞tÜenφ nebo zmenÜenφ Üφ°ky strßnky tak, aby se veÜla na papφr. I zde platφ poznßmka o pravidlu @page.

KoneΦn∞ Opera nabφzφ sv²m u₧ivatel∙m tento skromn² dialog:

Jak jste urΦit∞ sprßvn∞ vytuÜili, u₧ivateli je umo₧n∞no nastavit okraje a procentußlnφ zm∞nu velikosti. Polo₧ka print background povolφ nebo zakß₧e tisk obrßzk∙ na pozadφ. Opera trochu zklamala v nastavovßnφ zßhlavφ a zßpatφ. Ta lze pouze vypnout nebo zapnout, ale u₧ nelze ovlivnit jejich obsah.

Na tomto mφst∞ je dobrΘ zmφnit jistou schizofrenii Opery. Jako jedinß toti₧ rozumφ pravidlu @page, kter²m lze nastavit mimo jinΘ i okraje strßnky. Bohu₧el tento dialog nenφ schopen p°evzφt hodnoty okraj∙ z CSS stylesheetu. V praxi to vypadß nßsledovn∞: jsou-li okraje nastaveny pomocφ CSS, jsou pou₧ity bez ohledu na u₧ivatelovo p°ßnφ, v jinΘm p°φpad∞ jsou pou₧ity hodnoty z dialogu. Webmaster tedy v Ope°e m∙₧e mφt okraje pln∞ pod svou kontrolou.

Shrnuto, podtr₧eno

V tomto dvoudφlnΘm Φlßnku jsem se sna₧il nastφnit problΘmy, kterΘ mohou nastat p°i formßtovßnφ XHTML dokumentu pro tisk. Nynφ je Φas pro malou rekapitulaci ve form∞ kompletnφho a pou₧itelnΘho CSS k≤du (nezapome≥te takΘ vypnout pomocφ vlastnosti display menu a vÜechny dalÜφ Φßsti strßnky, kterΘ na papφ°e nejsou nezbytnΘ). Jde o minimum, kterΘ by m∞la strßnka obsahovat, aby byla alespo≥ trochu printer friendly. Budu jenom rßd, pokud se nechßte tφmto k≤dem inspirovat p°i tvorb∞ strßnek nebo v diskuzi navrhnete dalÜφ vylepÜenφ.

Tisknutφ a formßtovßnφ pro tisk je webmastery Φasto opomφjenß problematika. U₧ivatel pak tφmto Φasto trpφ a m∙₧e se p°φÜt∞ "odm∞nit" nßvÜt∞vou jinΘ strßnky, kterß je na tisk mnohem lΘpe p°ipravena. Proto nezapomφnejte do sv²ch stylesheet∙ p°idßvat alespo≥ to minimum pro pohodln∞jÜφ tisk. Jß m∙₧u zßv∞rem u₧ jen zopakovat: M∞jte rßdi svΘho u₧ivatele!