Dnevnik eklektika - Piše Dragan Babić

CSS za štampu

Koja je poenta štampanja stranica?

Siguran sam da vam je glavni izgovor za nemanje print specifičnog stila nešto tipa: „Ko još štampa moje stranice?”, i isti je bio i moj. Štos je u tome da vi u stvari to ne možete nikako znati, ali možete pretpostaviti u zavisnosti od tematike vašeg sajta. Ukoliko recimo imate sajt koji je neka zbirka fajlova i programa za download – najverovatnije vam print stylesheet i ne treba, jer te stranice nemaju smisla u odsustvu internet konekcije, ali ako vaš sadržaj predstavlja u glavnom pisani materijal, članci, recenzije, recepti, itd. onda i te kako možete pretpostaviti da će neko zaista i odštampati po neku vašu stranicu.

Dakle Web stranice iz mog iskustva štampaju:

• Ljudi koji ne mogu da priušte da dugo vremena sede ispred računara i čitaju
• Ljudi koji hoće da ubiju vreme na putu (do i sa posla recimo)
• Ljudi kojima drugi ljudi donose materijal „na noge” (šefovi koji ne znaju da upale računar pa im sekretarica sve lepo isprinta i spakuje da oni izlistaju)
• Ljudi koji ne vole da čitaju sa ekrana (ja lično), itd.

Kako se stranice optimizuju za štampu?

OK, sada je vreme za malo tehnikalija. Prvo, potreban će vam biti poseban stylesheet sa osobinama namenjenim konkretno za štampu. Taj stylesheet uključujete u svoje xhtml dokumente sledećom komandom:

<link rel="stylesheet" type="text/css" media="print" href="print-styles.css" />

Dakle veoma jednostavno, jedino je bitan media atribut koji ukazuje browseru da se dotični stylesheet koristi isključivo kada se stranica štampa. Gledajate da ovu liniju kôda navedete posle uključenja glavnog stylesheeta u html dokument.

Na ovaj način stilovi sadržani u print stylesheetu će biti primenjeni pri posebnom renderovanju stranice za štampu.

Koje su najbolje prakse prilikom optimizacije stranica za štampu?

U suštini želite da isključite iz dokumenta (tj. Web stranice) sve što nije glavni sadržaj. U glavnom Web stranice imaju sadržaj podeljen u kolone, s tim da imaju jednu u kojoj se nalazi glavni sadržaj, i recimo jednu sa navigacijom i nekim sekundarnim sadržajem. Onome koji štampa stranicu je bitan samo taj glavni sadržaj i ništa više, stoga mu obezbedite upravo to. Uzmimo za primer ovaj blog, i njegov sadržaj. Ukoliko uključite print preview na trenutak videćete da sam jedino ostavio tagline (jedna rečenica o sajtu, čisto da se zna o čemu se radi kada bi neko prvi put pročitao tekst sa mog sajta na tom papiru), potom ide istaknut naslov članka (bez informacija o članku, kojim kategorijama pripada, itd.) i onda ide sadžaj članka i to je sve. Bez komentara, formulara, delišs linkova, prethodnih unosa i ostalog „nus-sadržaja”. Na taj način štedimo papir (i vreme i boju) onome koji štampa, ali mu naravno i mnogo ulepšavamo iskustvo konzumacije sadržaja – veoma bitan momenat.

Stilizacija štampane Web stranice

Stilovi za štampanje stranica se malo razlikuju od ovih klasičnih za prikazivanje istog sadržaja na ekranu. Prva razlika je u tome što više ne raspolažete bojom, dekoracionim elementima, i svim onim elementima kojima inače manipulišete kada dizajnirate stranicu za prikaz na ekranu. To jest, vi možete da nakrljate i slike i sekundarni sadržaj i šta sve ne unutra, ali se onda gubi poenta cele priče.

Suština je u tipografiji. Najprostije rečeno tipografija vam je ovde najbolji prijatelj i dobra je praksa odabrati čitljiv tip slova, njihovu veličinu, i istaknuti veoma jasno hijerarhiju u dokumentu.

Imajte u vidu da se ništa ne nasleđuje iz stilova za prikaz na ekranu, nego posebno stilizujete nešto poput „golog” markupa.

Po defaultu većina browsera je podešena da ne štampaju pozadinske slike, tamne pozadine sa svetlim tekstom i slične svari. Gotovo svaki browser će vam resetovati glavni stil na neki svoj defaultni za štampanje, pa i ovde morate (ako želite naravno) malo da ih doterate i sredite. Mudro je resetovati boju pozadine na belu – #fff, a boju teksta na crnu – #000 zarad štednje boje štampača i optimalnog kontrasta. Potom odstranite sve suvišne elemente jednostavnim nabrajanjem njihovih selektora i setovanjem osobine display:none za njih.

Sada bi trebali da imate prilično čitku stranicu gotovo spremnu za štampu, potrebno je samo malo doraditi detalje i obratiti pažnju na određene stvari poput generalne čitljivosti i preglednosti stranice, mernih jedinica, međusobnih odnosa tipografskih elemenata, itd.

Bitno je da shvatite da smo sada u domenu štampe, i piksel nam nije više najsrećniji odabir merne jedinice, stoga koristimo tipografsku tačku. Takođe sve margine slobodno izrazite u emovima (relativna jedinica) ili milimetrima (apsolutna, fiksna jedinica).

Mnogi ljudi se odlučuju na serifni tip slova za štampane verzije stranica, ali ja smatram da ne mora da bude tako po svaku cenu. Obratite pažnju samo da vam odštampane stranice ostanu lako čitljive, zbog toga ja predlažem veličinu slova od 10pt sa line-heightom od 180% (to je 180% od veličine karaktera). Ovo podešavanje daje dovoljan prored da tekst bude lako čitljiv i da ne umara oko.

Ja sam na mom konkretnom primeru anulirao horizontalne margine između pasusa, ali sam istakao početke novih pasusa sa identacijom prvod reda sa 3 ema. Ovo štedi prostor na papiru i obezbeđuje kontinuitet prilikom čitanja. Podnaslove sam takođe posebno istakao radi snalaženja na stranici i zbog uspostavljanja hijerarhije informacija i sadržaja. Takođe sam sredio i liste (ul, ol i dl) i stilizovao ih po svom ukusu (kvadratasti bulleti, anulirao levu marginu za dd).

Browseri

Kao što ste mogli pretpostaviti, kod štampanja Web stranica browseri opet imaju veliku ulogu u konačnom ishodu. Naravno to se ogleda u nivou podrške određenih css selektora.

Pošto – kao što sam već pomenuo – smo prešli u domen štampe, imamo jedan dodatni faktor da uračunamo u celu priču oko optimizacije sadržaja, a to je činjenica da sada imamo prelom i paginaciju. To samo po sebi povlači i probleme oko orphansa i widowsa (oprostićete, tipografiju sam učio iz knjiga na engleskom pa ne znam odgovarajuće nazive na srpskom). Radi se o redovima teksta koji bi ili ostali jedini (prvi) u tom pasusu kao poslednji na stranici, ili kao poslednji red pasusa kao prvi na sledećoj stranici. Postoje css selektori orphans i widows kojima možemo da utičemo na ovo, ali su jako slabo podržani. Radi ilustracije, ove probleme bismo rešili recimo ovako:

 
p{
  orphans:3; /* forsira da barem tri reda teksta ostanu na dnu stranice */
  widows:3; /* forsira da barem tri reda teksta pređu na novu stranicu */
}

Pored ovih osobina, imamo i još neke vrlo zgodne poput page-break-before, page-break-after i page-break-inside koji kontrolišu prelome sadržaja na stranice pre elementa, posle njega ili unutar njega respektivno.

Osobinu page-break-after sam ja našao posebno zgodnom za primenu na naslovima i definition termovima gde vrlo lako možete sprečiti da naslov ili dt ostane kao poslednji red na stranici.

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

Osobinu page-break-inside možete iskoristiti recimo da sprečite prelom teksta unutar list itema:

li{
  page-break-inside: avoid;
}

Što se tiče podrške ovih elemenata – ona je kao što rekoh – vrlo slaba, i koliko znam samo ih Opera podržava, stoga ako vam je pri ruci, svoje stranice štampajte iz Opere za najbolji efekat.

Sada kada znate dovoljno o stilovima za štampu Web stranica pustite mašti na volju i krenite da optimizujete sadržaj za štampu, neko će to ceniti definitivno.

• « Bookmarks keyword - brzi pristup bookmarksima u Firefoxu
• Novo na Dnevniku - Ilustracije »

Komentari na ovaj unos 5

1. Данило kaže 06/01/07 07:23 PM

   Врло користан увод, можда се сада напокон натерам да користим media=“print” иако знам за његово постојање већ доста година.

   Додао бих и разјашњење јединица, пошто видим да наизменично користиш емове и проценте: 1 ем је, традиционално, ширина малог слова m, која је често једнака висини фонта (а висина фонта је заправо висина једне од заграда). У модерној, рачунарској типографији, 1 ем је готово увек везан за величину фонта, па је рећи 1 ем готово исто што и рећи 100% када се ради о величини фонта (нпр. за заглавље можемо ставити font-size: 2em; уместо font-size: 200%;). Односно, пошто си истакао да је ем „релативна јединица“, само додајем да је то релативна јединица у односу на величину коришћеног фонта.

   Што се језика тиче, индентација је „увлачење“ (реда), а widows и orphans су „удовице“ и „сирочићи“ (нпр. http://www.praktikum.co.yu/office/clanci/clanak_013.htm, http://www.dizajnzona.com/forums/lofiversion/index.php/t23654.html).

   Успут, било би лепо када би ово проширио и описом како направити заглавља и подножја страна која садрже нпр. број стране где ми желимо, итд. (колико се сећам, и ово је могуће).

2. Dragan Babic kaže 06/01/07 10:42 PM

   

   Hvala na razjasnjenjima Danilo, za orphans i widows nisam bio siguran da li je prevod bukvalan ili postoje drugaciji termini.

   Sto se tice informacija o broju stranica itd., ja ih nisam ukljucivao jer su te informacije po defaultu ukljucene u stampu, ali slazem se da bi bilo super imati te informacije koje bi se mogle stilizovati po zelji. Definitivno cu prosiriti clanak sa jos par “trikova”. ;-)

3. Ilija Studen kaže 07/01/07 02:53 PM

   Informativno pošto je štampa špansko selo za mene.

   Btw, kad smo već kod štampanja iz browsera, ova tehnika predstavljena na ALA mi je odlična. Malu varijaciju na temu će imati novi activeCollab interfejs.

4. Goran Ratković kaže 16/01/07 09:31 AM

   Super korisno. Radio sam više puta CSS za štampu odmah nakon sređenog projekta za web, nailazio na property-e o kojima pričaš (page-break-before kao i after) ali orphans i widows još nisam koristio.

   Biće vrlo korisno da ove tvoje cake primenim u sledećem projektu. Ustvari, već danas ili sutra :)

5. Duško Angirević kaže 25/01/07 02:37 PM

   Media „print” je svakako odlična stvar. Meni je inače veoma draga i implemetirao sam je prilikom rada na portalu www.glassrpske.com, mada moram priznati da mi je veoma kritična pomenuta opcija u okviru IEa uslijed nedostatka Print Preview opcije… U svakom slučaju moguće riješenje je JS koji zamjeni stilove radi pregleda, ali to mi se i ne dopada previše…

Komentariši unos “CSS za štampu”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.