Čini se da je teško kreirati stranicu za štampanje? Samo kreiramo isti dokument sa tekstom ali bez ikakvog dizajna i stavljamo link na njega sa obične stranice. Ali tražilice sada imaju dupli filter sadržaja i webmasteri moraju sakriti stranice za ispis od indeksiranja. Osim toga, posjetitelji stranice također nisu baš zgodni, jer prvo morate otići na kopiju stranice koja im je potrebna, na kojoj nema elemenata dizajna, a zatim kliknuti na dugme "Odštampaj".
Ovdje nam u pomoć može priskočiti CSS, koji ne samo da će smanjiti količinu posla za webmastere i pojednostaviti korištenje stranice za posjetitelje, već i izbjeći sankcije pretraživača za duplirani sadržaj.
Struktura stranice
Dakle, prvo upotrijebimo HTML da kreiramo strukturu našeg dokumenta. Na primjer, odlučio sam koristiti izgled tablice kako bih lakše razumio:
| Navigacija Početna stranica Članci Kontakti |
Naslov člankaOva stranica se može odštampati. Biće štampan samo tekst članka. |
Vaš oglas bi mogao biti ovdje |
Kao što vidite, imamo tabelu sa tri ćelije koje su raspoređene horizontalno. Sve je kao obična stranica: navigacija lijevo, sadržaj u sredini, a oglasne jedinice ili vijesti desno. Svakoj ćeliji je dodijeljen vlastiti ID. Za lijevu stranu to je lijevi stupac, za desnu desnu kolonu, a za srednju ćeliju sa sadržajem je sadržaj.
Dodavanje CSS-a
Sada, koristeći CSS, morate reći pretraživaču koje stilove treba da koristi za prikaz elemenata stranice na ekranu i šta treba da koristi prilikom štampanja. Kreirajte style.css i tamo upišite sljedeće:
@media ekran (telo (boja pozadine: # 0B73BD; porodica fontova: tahoma; boja: #FFFFFF;) tabela (širina: 600px;) #leftcolumn (širina: 140px; vertikalno poravnanje: vrh; veličina fonta: 15px ;) #desna kolona (širina: 110px; vertikalno poravnanje: vrh; veličina fonta: 15px;) #content (boja pozadine: # 32AADB; padding: 5px; veličina fonta: 15px;) a (boja: # FFFF00; )) @media print (tijelo (boja pozadine: #FFFFFF; porodica fontova: tahoma; boja: # 000000;) #content (boja pozadine: #FFFFFF; padding: 5px; veličina fonta: 15px; boja: # 000000; širina: 600px;) #leftcolumn (display: none;) #rightcolumn (display: none;))Prvi blok CSS-a opisuje kako elementi stranice trebaju biti prikazani u pretraživaču. Blok je zatvoren u dodatne vitičaste zagrade prije kojih smo dodali @media ekran. Ovo omogućava pretraživaču da shvati da se ovi stilovi moraju primijeniti za prikaz na ekranu:
Ovako stranica izgleda kada se gleda u pretraživaču
Drugi blok opisuje prikaz istih elemenata stranice kao i prvi, ali u ovom slučaju u obliku u kojem će dokument izgledati kada se odštampa i označen parametrom @media print. Budući da želimo da se ispisuje samo koristan sadržaj, onemogućavamo prikaz lijeve (#leftcolumn) i desne (#rightcolumn) ćelije tako što ćemo ih postaviti na prikaz: nijedna.
Ovako izgleda štampana verzija web stranice.
Odvojene datoteke stilova
Nije potrebno sve kombinovati u jedan stilski fajl. Umjesto toga, možete koristiti dvije datoteke stila i, kada ih povezujete sa stranicama web-mjesta, reći pretraživaču koji stilski fajl da koristi za štampanje, a koji za prikaz. Prvi (za prikaz) je određen parametrom media = "screen", a drugi će se koristiti za ispis i određen je parametrom media = "print":
Stilove za štampanje treba opisati iza svih ostalih, inače će Opera ispisati blok sadržaja zajedno sa obojenom pozadinom koja je namijenjena za izlaz u pretraživač, a ne bijelu boju koju smo odabrali za ispis.
Takođe, prilikom štampanja, striktno smanjujemo širinu bloka sadržaja na 600px, jer pri 100% širine štampač "seče" malu traku teksta na desnoj strani stranice. Obratite pažnju i na činjenicu da je kod štampanja iz Opera-a margina na ivicama lista nešto manja nego u Internet Exploreru i da su redovi teksta na listu papira širi.
Sada više ne morate da kreirate dodatne stranice za štampanje. Možete informisati korisnike o mogućnosti štampanja stranice, na primjer, korištenjem linka sa tekstom "print", kada kliknete na nju, prikazat će vam se tooltip sa porukom o mogućnosti direktnog ispisa trenutne stranice bez dizajna.
Kopiranje članka je zabranjeno.
- Prevod
3. Apsolutne jedinice
Apsolutne jedinice nisu baš pogodne za ekranske verzije stranica, ali za štampanje su upravo ono što vam treba. Potpuno je bezbedan za stilove štampe, štaviše, preporučuje se upotreba apsolutnih mernih jedinica, poput cm, mm, in, pt ili pc.Presek (margina-dno: 2cm;)
4. Svojstva stranica
Možete koristiti pravilo @page za kontrolu svojstava stranice, kao što su veličine stranice, orijentacije i margine. Ovo se ispostavlja vrlo korisnim, recimo, kada je potrebno da sve odštampane stranice imaju iste margine.@media print (@page (margina: 1cm;))
Pravilo @page dio je standarda Paged Media Module, koji nudi mnoge sjajne stvari poput odabira prve stranice za štampanje, postavljanja praznih stranica, pozicioniranja elemenata u uglovima stranice i. Može se koristiti čak i za pripremu knjige za štampu.
5. Kontrola prijeloma stranica
Kako štampani listovi, za razliku od web stranica, nisu beskonačni, sadržaj web stranica se prije ili kasnije prekida na jednom listu papira i nastavlja na sljedećem. Postoji pet svojstava za kontrolu prijeloma stranica.▍Prelom stranice prije elementa
Ako želite da element uvijek bude na početku stranice, možete staviti prisilni prijelom stranice ispred njega koristeći svojstvo page-break-before.Odjeljak (prelom stranice-prije: uvijek;)
▍ Prijelom stranice nakon elementa
Svojstvo page-break-after omogućava vam da postavite prisilni prijelom stranice nakon elementa. Koristeći ovo svojstvo, također možete odbiti prekid.H2 (prelom stranice: uvijek;)
▍Unutarnji element prijeloma stranice
Svojstvo page-break-inside je zgodno kada želite izbjeći podjelu elementa između dvije stranice.Ul (page-break-inside: izbjegavajte;)
▍ Gornji i donji viseći redovi
Ponekad ne morate forsirati prijelome stranica, ali želite kontrolirati izlaz pasusa na granicama stranice.Na primjer, ako posljednji red pasusa ne stane na trenutnu stranicu, posljednja dva reda tog pasusa će biti odštampana na sljedećoj stranici. To je zbog činjenice da je svojstvo koje ga kontroliše (udovice, odnosno - "najbolja siročad") po defaultu postavljeno na 2. Ovo se može promijeniti.
P (udovice: 4;)
Ako se pojavi drugačija situacija i samo jedan red pasusa stane na tekuću stranicu, cijeli pasus će biti odštampan na sljedećoj stranici. Svojstvo siročad je također po defaultu postavljeno na 2.
P (siročad: 3;)
Poenta gornjeg koda je da da se pasus ne bi u potpunosti premotao na sljedeću stranicu, najmanje tri reda moraju stati na tekuću stranicu.
Za bolje razumijevanje ovoga, pogledajte primjer pripremljen sa CodePen-om. A evo debug verzije istog primjera, zgodnije je testirati.
*, *: prije, *: poslije, *: prvo slovo, p: prvi red, div: prvi red, blok citat: prvi red, li: prvi red (pozadina: prozirna! važno; boja: # 000 ! važno; box-shadow: ništa! važno; text-shadow: nijedno! važno;)
Inače, CSS stilovi za štampanje su jedan od retkih izuzetaka gde je! Važna direktiva sasvim u redu;)
7. Uklanjanje nepotrebnog sadržaja
Kako ne biste trošili tintu, trebali biste ukloniti sve nepotrebno sa štampane verzije stranice, poput ogromnih prekrasnih slajdova, reklama, alata za navigaciju web stranice i tako dalje. Ovo se može učiniti postavljanjem svojstva prikaza na ništa na nepotrebnim elementima. Sasvim je moguće da ćete smatrati ispravnim prikazati samo glavni sadržaj stranice, a sakriti sve ostalo:Tijelo> *: nije (glavno) (prikaz: nema;)
8. Izlaz URL-ova linkova
Linkovi, u obliku u kojem se obično pojavljuju na web stranicama, potpuno su beskorisni kada se štampaju, osim ako čitalac papirne verzije dokumenta ne zna kuda vode.Da bi se adrese linkova prikazale nakon njihovih tekstualnih reprezentacija, dovoljno je koristiti sljedeći stil:
O: poslije (sadržaj: "(" attr (href) ")";)
Naravno, ovakvim pristupom će se „dešifrovati“ mnogo nepotrebnih stvari. Na primjer, relativne veze, apsolutne veze na istoj stranici kao i stranica koja se štampa, veze sa sidrima itd. Kako ne biste začepili ispisanu stranicu, bilo bi bolje koristiti nešto poput ovoga:
O: nije (): poslije (sadržaj: "(" attr (href) ")";)
Izgleda, naravno, suludo. Stoga ću objasniti značenje ovog pravila običnim jezikom: "Prikaži vrijednost atributa href pored svake veze koja ima atribut koji počinje sa http, ali ne sadrži mywebsite.com."
9. Dekodiranje skraćenica
Skraćenice u tekstu treba staviti u tag , a njihovo dešifriranje mora biti uključeno u atribut title. Ako ovako stilizirate skraćenice, njihova se značenja vrlo lako mogu prikazati na odštampanoj stranici:Abbr: poslije (sadržaj: "(" attr (naslov) ")";)
10. Prisilno pozadinsko štampanje
Tipično, pretraživači, kada prikazuju stranicu za štampanje, ne prikazuju boju pozadine i pozadinske slike, osim ako im se izričito ne kaže da to urade. Međutim, ponekad je potrebno sve ovo ispisati. Tu nam pomaže nestandardno svojstvo print-color-adjust, koje nam omogućava da poništimo zadane postavke za neke pretraživače.Zaglavlje (-webkit-print-color-adjust: točno; print-color-adjust: točno;)
11. Medijski upiti
Ako pišete medijske upite slične donjem, imajte na umu da CSS pravila u takvim upitima neće uticati na štampanu verziju stranice.@medijski ekran i (min. širina: 48em) (/ * samo ekran * /)
Zašto je to tako? To je zato što se CSS pravila primjenjuju samo ako je minimalna širina 48em i ako je tip medija ekran. Ako se riješimo ključne riječi ekrana u ovom medijskom upitu, tada će ona biti ograničena samo vrijednošću min-width.
@media (min. širina: 48em) (/ * sve vrste medija * /)
12. Ispis karata
Trenutne verzije Firefoxa i Chromea mogu štampati karte, ali Safari, na primjer, ne može. Šta je sa štampanjem kartica? Jedna od univerzalnih opcija je korištenje statičkih mapa umjesto dinamičkih.Mapa (širina: 400px; visina: 300px; background-image: url ("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format_reppgsh=roadmap&format_reppg "); -webkit-print-color-adjust: točno; print-color-adjust: točno;)
13. QR kodovi
Štampanje QR kodova koji sadrže važne veze može značajno poboljšati upotrebljivost štampanih web stranica. Evo The Smashing Magazina za korisne savjete o ovoj temi. Jedan je da se njihove adrese uvrste u obliku QR kodova na štampane stranice. Kao rezultat toga, korisnik ne mora da ukuca svoju punu adresu na tastaturi da bi otvorio stranicu sa koje je napravljen ispis u pretraživaču.14. O štampanju neoptimiziranih stranica
Ulazeći u temu štampanja web stranica, otkrio sam sjajan alat koji vam omogućava da na praktičan način pripremite neoptimizirane stranice za štampanje. Korištenje Add TagsPostoje dva načina da napravite stranicu za štampanje:
1. Posebno prikažite stranicu bez menija i nepotrebnog dizajna u posebnoj skripti.
2. Prikazati istu stranicu koju gledamo prilikom pregleda stranice, ali sa različitim ojačanim stilovima, gdje su skriveni nepotrebni elementi.
Imao sam priliku da napravim dokumente (fakture, fakture itd.) za štampu. Pa sam krenuo prema prvoj opciji. Ali to je samo moj slučaj. Druga opcija mi se čini fleksibilnijom.
Evo mog iskustva, napomene:
1. Glavno pravilo - budite jednostavni i ljudi će vas privući (c) xs tko. 🙂 Ukratko, nemojte koristiti razne dizajne. Čovjek samo treba da pročita odštampani tekst, nema šta da ga opterećuje nepotrebnim dizajnom. I da trošite boju u štampaču.
2. Ne koristimo pozadinske slike, one se ionako neće štampati. Ili hoće, ali ne u svim pretraživačima. Barem mi se desila neka slična grabulja.
3. Pokušavamo koristiti bijelu pozadinu, crni tekst. Ako se vrati, potrošeno će mnogo boje. Mislim da ne trebate raditi tekst u boji - mnogi još uvijek imaju crno-bijeli štampač.
4. Ako želite da se sljedeći sadržaj odštampa na sljedećoj stranici, umetnite div sa prelomom stranice klase ispred ovog teksta. Klasu opisujemo u stilovima:
Prelom stranice (prelom stranice-poslije: uvijek;)
Prijelom stranice ( stranica - prekid - poslije: uvijek; |
tekst iza ovog bloka će biti odštampan na novoj stranici. Radi u svim modernim pretraživačima. Da, i ne isto moderno. Jedan IE do uključujući 7. verziju ne radi. Ali morate mu dati gol!
5. I tako, štampaj. Korisnik može sam odabrati štampe. Možeš da se obučeš
window.onload = funkcija () (window.print ();)
i samo dugme:
< button onclick = "window.print();" >Pečat< / button > |
Ovo dugme će se pojaviti kada se stranica pregleda, ali neće biti odštampana pošto smo postavili prikaz: nema; u stilu za medij = "print", odnosno u stilovima za uređaj za štampanje. Pritiskom na dugme prikazaće se prozor za štampanje.
Za one koji žele superautomatizovati proces štampanja, tako da, na primer, otvorite stranicu i štampač odmah počne da štampa stranicu - ohladite svoj žar ili onaj ko to od vas traži. Nisam pronašao ovu metodu. Da, nije. Jer ima smisla. Zamislite, odete na sajt i tamo se preko javascripta programira štampanje sto kopija stranica. I štampač poludi i počinje da štampa ovu gomilu stranica bez vašeg znanja. Da li je to nelogično? To je nelogično!
Svojevremeno me jedan projektni menadžer jako zamolio da uradim tako nešto. Morao je sve to objasniti, dati primjere, kako bi shvatio da se to ne može, a nije ni potrebno.
6. Ako se neko žali da se štampa adresa stranice, naslov i ostala sranja u zaglavlju i podnožju, savjetujte ga da podesi pretraživač. Ovo se ne može konfigurirati sa strane stranice. Bar ne znam kako. Na primjer, u Firefoxu je ovo konfigurirano u "Štampaj" - "Podešavanje stranice" - "Margine i podnožja"
7. Usput, u potrazi za prethodnim. Pretpostavimo da je korisnik onemogućio izlaz svih zaglavlja i podnožja, uključujući adresu stranice. Odnosno, ako korisnik nakon nekog vremena pogleda ispis, neće moći shvatiti s koje stranice ga je ispisao. Dakle, možda biste trebali napraviti malu bilješku s naznakom izvora, adrese stranice, logotipa ili nečeg drugog.
8. Koristite veliku veličinu fonta (naravno u razumnim granicama). Glavna stvar je da je sve čitljivo prilikom štampanja.
10. Mislim da trebate koristiti dimenzije neovisne o uređaju - apsolutne dimenzije. Na primjer u, cm, mm, pt, kom.
11. Evo korisne veze http://www.webdevout.net/browser-support-css#css2propsprint. Opis stilova možete pronaći na web stranici http://htmlbook.ru
Općenito, savjetujem vam da prođete kroz cijelu listu CSS svojstava, čak i ako ste iskusni programer. Iznenadio sam se kada sam otkrio nepoznata svojstva CSS-a i da se neka CSS svojstva već mogu neustrašivo koristiti.
Naravno, ovo nije potpuna lista savjeta. Ovo su samo moje misli.
Mnoge web lokacije imaju mogućnost prikazivanja verzije stranice za štampanje, ali da li ih je uvijek zgodno koristiti?
Glavni problemi prilikom štampanja dokumenta su loša tipografija, prisustvo nepotrebnih informacija (na primer, elementi interfejsa) i netačne boje. Za stiliziranje možete koristiti pravilo @media:
@media print ()
Ako korisnik želi da odštampa stranicu sa dizajnom prikazanim na ekranu, on pravi snimak ekrana i štampa ga. Verzija za štampanje je dizajnirana za lako i udobno čitanje teksta sa lista papira. Stoga je prije svega potrebno ukloniti sve nepotrebno sa stranice: meni, masivno zaglavlje ili podnožje, pozadinske slike itd., ostavljajući samo ono što je potrebno: zaglavlja, sadržaj sa slikama, logo stranice, URL stranice. Na primjer, ovaj kod skriva H1 zaglavlja, kao i bočnu traku, zaglavlje i podnožje web-mjesta:
H1, div # zaglavlje, div # bočna traka, div # podnožje (prikaz: nema;)
Pravila za štampanje stranice
1. Moderni pretraživači mogu ukloniti pozadinsku sliku. Ipak, preporučljivo je dodati background-image: nema tako da i stariji pretraživači to mogu učiniti.2. Može doći do nedosljednosti između odštampane stranice i njenog prikaza na ekranu prilikom dodjele dimenzija piksela. Stoga vrijedi koristiti inče, centimetre ili procente.
3. Sa sljedećim kodom možete prikazati puni URL umjesto hiperveze, jer ne možete kliknuti na komad papira:
O: poslije (sadržaj: "<" attr(href) ">";
Uz malo modifikacije koda, možete dodati URL mapiranje samo vanjskim vezama:
O: poslije (sadržaj: "<" attr(href) ">";
4. Za velike tekstove ponekad će biti prikladna podjela na dijelove. Sljedeći kod dijeli sadržaj na svakom H3 naslovu štampanjem na novoj stranici:
H3 (prelom stranice-prije: uvijek;)
I ovaj kod će vam pomoći da ispišete svaki članak s nove stranice, može biti koristan kada ispisujete listu postova na blogu:
Članak + članak (prelom stranice-prije: uvijek;)
5. Preporučljivo je promijeniti stilove web lokacija s tamnim ili svijetlim dizajnom na standardnu shemu boja - crni tekst na bijeloj pozadini. Ovo je zgodno i za čitljivost i za čuvanje potrošnog materijala u štampaču korisnika.
Ispravan prikaz
Kao što je već spomenuto, moderni pretraživači mogu ukloniti nepotrebne elemente prilikom ispisa, ali to nije uvijek potrebno. U Firefoxu korisnik može kontrolirati izgled rezultata, u Chromeu i Safariju možete koristiti kod ispod za prikaz originalnog stila:* (-webkit-print-color-adjust: exact;)
Kako to izgleda na djelu:
Kvalitet štampe
Često se rezultat štampanja veoma razlikuje od originala na ekranu, čak i gore. Analizirajmo jedan od uobičajenih razloga za to na jednostavnom primjeru. Na tamnoj pozadini nalazi se svijetli tekst:Sa sljedećim CSS-om:
Zaglavlje (pozadina: # 000; boja: #fff; padding: 1rem; porodica fontova: Avenir, Arial, sans-serif;)
Pregledač će pokušati vratiti verziju za štampanje u normalu:
Ako na stranici postoji slika, na primjer logo, onda je pretraživač ni na koji način ne ispravlja, i ispada užasno:
Još gore izgleda ako se kao logo koristi vektorska slika sa prozirnošću:
Ovaj užas možete izbjeći korištenjem CSS3 filtera:
@media print (header (pozadina: nema; boja: # 000;) header img (-webkit-filter: invert (100%); filter: invert (100%);))
Ispada:
Za Firefox, SVG se može koristiti:
@media print (header (pozadina: nema; boja: # 000;) header img (filter: url (inverse.svg # negativan); -webkit-filter: invert (100%); filter: invert (100%);) )
Za IE9 rješenje iz
S vremena na vrijeme na internetu možete pronaći toliko vrijedne članke da ih želite odštampati i pročitati do kostiju. Istovremeno, ne pružaju sve usluge verziju članka za štampanje, ili se naše želje za štampanjem ne poklapaju sa pruženim mogućnostima (želim da ostavim sliku ili promenim tip glavnog fonta). Kako odštampati stranicu bez nepotrebnih elemenata? U ovom slučaju će vam pomoći web servis.
Na glavnoj stranici PrintWhatYouLike, na sredini ekrana nalazi se formular za unos adrese stranice koja se štampa. Uneli smo adresu, stranica se učitava i vidimo da kada se izabere neki od elemenata interfejsa, on je okružen crvenim okvirom. Još jedan klik lijevom tipkom miša i otvara se lista mogućih operacija. Elementi sučelja mogu se brisati jedan po jedan ili u grupi, proširiti zasebno odabrani unutar granica ili odabrati jedan blok teksta, brišući sve ostale. Odnosno, moguće je jedan po jedan ukloniti dijelove stranice koji nisu potrebni za ispis ili brzo izolirati potrebne od sekundarnih i ispisati.
Na lijevoj strani ekrana nalazi se bočna traka s nizom funkcija za uređenu stranicu:
- pohranjivanje uređene stranice u PDF, HTML formatima;
- promjena veličine teksta, vrste fonta;
- Uklanjanje pozadine ili slika jednim klikom miša.
Za praktičnost korisnika, PrintWhatYouLike predlaže postavljanje dugmeta na traku sa obeleživačima za uređivanje pre štampanja bilo koje stranice koju posetimo. Postoji i PageZipper opcija. Biće zgodno kada čitate one resurse gde vole da podele jedan članak na pet, deset ili više stranica. Pritisnete “Sljedeća stranica”, opet “Sljedeća stranica”, i onda shvatite da nemate šta da pročitate. PageZipper će postaviti ceo članak na jednu stranicu za dalje uređivanje i štampanje. Ako ne želite da instalirate bookmarklet, tada je dostupan dodatak za Firefox PageZipper 0.6.1.
Za registrovane korisnike, PrintWhatYouLike nudi kontrolnu tablu koja sadrži informacije o broju instaliranih tipki Printer Friendly, listovima papira koji su sačuvani i odštampani, ušteđenom novcu, drveću koje nije posječeno i nesretnim ugljičnim monoksidom nije ispušten u atmosferu.
Blogeri takođe mogu imati koristi. Instaliranje dodatka dovest će do pojave na svakoj stranici bloga prikladnog gumba za slanje članaka na ispis, mogućnost spremanja stranica u PDF formatu, što će čitaocima uštedjeti papir i tintu za štampač.
