Čini se da je teško stvoriti stranicu za ispis? Jednostavno kreiramo isti dokument s tekstom, ali bez ikakvog dizajna i poveznice na njega s obične stranice. No tražilice su uvele filtar za duplicirani sadržaj, a webmasteri moraju sakriti stranice za ispis od indeksiranja. Osim toga, posjetitelji stranice također nisu baš zgodni, jer prvo trebaju otići na kopiju stranice koja im je potrebna, na kojoj nema elemenata dizajna, a zatim kliknuti na gumb "Ispis".
Tu može dobro doći CSS, koji ne samo da će smanjiti količinu posla za webmastere i posjetiteljima olakšati korištenje stranice, već će izbjeći i kazne tražilica za duplirani sadržaj.
Struktura stranice
Dakle, prvo upotrijebimo HTML za stvaranje strukture našeg dokumenta. Za primjer, odlučio sam koristiti tablični izgled kako bih ga lakše razumio:
| Navigacija Glavna stranica Članci Kontakti |
Naslov člankaOva stranica se može ispisati. Ispisuje se samo tekst članka. |
Vaš oglas bi mogao biti ovdje |
Kao što vidite, imamo tablicu s tri ćelije koje su raspoređene vodoravno. Sve je kao obična stranica: navigacija s lijeve strane, sadržaj u sredini, a blokovi oglasa ili vijesti s desne strane. Svakoj ćeliji je dodijeljen vlastiti ID. Za lijevu stranu to je lijevi stupac, za desnu desni stupac, a za srednju ćeliju sadržaja to je sadržaj.
Dodavanje CSS-a
Sada, koristeći CSS, trebate reći pregledniku koje stilove treba koristiti za prikaz elemenata stranice na zaslonu i koje treba koristiti pri ispisu. Napravite style.css i tamo upišite sljedeće:
@medijski zaslon ( tijelo (boja pozadine: #0B73BD; font-family: tahoma; boja: #FFFFFF; ) tablica (širina: 600px; ) #leftcolumn (širina: 140px; okomito poravnanje: vrh; veličina fonta: 15px ; ) #desni stupac (širina: 110px; okomito poravnanje: vrh; veličina fonta: 15px; ) #content (boja pozadine: #32AADB; padding: 5px; veličina fonta: 15px; ) a ( boja: #FFFF00; ) ) @medijski ispis ( tijelo (boja pozadine: #FFFFFF; obitelj fontova: tahoma; boja: #000000; ) #content (boja pozadine: #FFFFFF; padding: 5px; veličina fonta: 15px; boja: # 000000; širina: 600px; ) #leftcolumn (prikaz: nema;) #desni stupac (prikaz: nema;))Prvi blok CSS koda opisuje kako se elementi stranice trebaju prikazati u pregledniku. Blok je uzet u dodatnim vitičastim zagradama prije kojih smo dodali @media screen. Ovo govori pregledniku da se ovi stilovi moraju primijeniti za prikaz:
Ovako izgleda stranica kada se gleda u pregledniku
Drugi blok opisuje prikaz istih elemenata stranice kao i prvi, ali u ovom slučaju u obliku u kojem će dokument izgledati kada se ispiše i označen je parametrom @media print. Budući da želimo da se ispisuje samo koristan sadržaj, onemogućujemo prikaz lijeve (#leftcolumn) i desne (#rightcolumn) ćelije tako što ćemo ih postaviti na prikaz: nema.
Ovako izgleda tiskana verzija stranice stranice
Odvojene datoteke stilova
Nije potrebno sve kombinirati u jednu stilsku datoteku. Umjesto toga, možete koristiti dvije datoteke stila i, kada ih povezujete sa stranicama web-mjesta, reći pregledniku koju datoteku stila treba koristiti pri ispisu, a koju za prikaz na zaslonu. Prvi (za ekranski izlaz) definiran je parametrom media="screen", a drugi će se koristiti za ispis i definiran je parametrom media="print":
Stilovi za ispis moraju biti opisani iza svih ostalih, inače će Opera ispisati blok sadržaja zajedno s pozadinom u boji koja je namijenjena za izlaz u preglednik, a ne bijelu boju koju smo odabrali za ispis.
Također, kod ispisa striktno smanjujemo širinu bloka sadržaja na 600px, jer pri 100% širine pisač "odsiječe" malu traku teksta na desnoj strani stranice. Također obratite pozornost na činjenicu da je kod ispisa iz Opera, udubljenje duž rubova lista nešto manje nego u Internet Exploreru i da su redovi teksta na listu papira širi.
Sada više ne morate stvarati dodatne stranice za ispis. Možete informirati korisnike o mogućnosti ispisa stranice, na primjer, pomoću veze s tekstom "ispis", kada se klikne, prikazat će se alatni opis s porukom o mogućnosti izravnog ispisa trenutne stranice bez dizajna.
Zabranjeno je kopiranje članka.
- Prijevod
3. Apsolutne mjerne jedinice
Apsolutne mjerne jedinice nisu baš prikladne za ekranske verzije stranica, ali za ispis su upravo ono što vam treba. Savršeno je sigurno koristiti stilove ispisa, štoviše, preporuča se korištenje apsolutnih jedinica kao što su cm , mm , in , pt ili pc .Odsjek ( margina-dno: 2 cm; )
4. Svojstva stranice
Možete koristiti pravilo @page za kontrolu svojstava stranice, kao što su njihova veličina, orijentacija i margine. To nam jako dobro dođe, recimo, kada je potrebno da sve ispisane stranice imaju iste margine.@medijski ispis ( @stranica ( margina: 1 cm; ) )
Pravilo @page dio je standarda Paged Media Module, koji nudi puno zanimljivih stvari, poput odabira prve stranice za ispis, postavljanja praznih stranica, pozicioniranja elemenata u kutovima stranice i . Može se koristiti čak i za pripremu knjiga za tisak.
5. Upravljajte prijelomima stranica
Budući da ispisani listovi, za razliku od web stranica, nisu beskonačni, sadržaj web stranica prije ili kasnije se lomi na jednom listu papira i nastavlja na sljedećem. Postoji pet svojstava za kontrolu prijeloma stranica.▍ Prijelom stranice prije elementa
Ako želite da element uvijek bude na početku stranice, možete prisiliti prijelom stranice prije njega pomoću svojstva page-break-before.Odjeljak (prelom stranice-prije: uvijek;)
▍ Prijelom stranice nakon elementa
Svojstvo page-break-after omogućuje vam da prisilno napravite prijelom stranice nakon elementa. Pomoću ovog svojstva također možete onemogućiti prazninu.H2 (prijelom stranice-poslije: uvijek;)
▍ Prijelom stranice unutar elementa
Svojstvo page-break-inside je zgodno ako želite izbjeći dijeljenje elementa između dvije stranice.Ul (prelom stranice unutar: izbjegavati;)
▍ Gornje i donje viseće žice
Ponekad ne morate forsirati prijelome stranica, ali želite kontrolirati kako se odlomci pojavljuju na granicama stranice.Na primjer, ako zadnji redak odlomka na trenutnoj stranici ne stane, sljedeća stranica će ispisati posljednja dva retka tog odlomka. To je zato što je svojstvo koje ovo kontrolira (udovice, tj. "gornje viseće linije") prema zadanim postavkama postavljeno na 2. To se može promijeniti.
P ( udovice: 4; )
Ako se dogodi neka druga situacija i samo jedan redak odlomka stane na trenutnu stranicu, cijeli će odlomak biti ispisan na sljedećoj stranici. Svojstvo odgovorno za najnižu siročad također je prema zadanim postavkama postavljeno na 2.
P ( siročad: 3; )
Značenje gornjeg koda je da kako se odlomak ne bi u potpunosti premotao na sljedeću stranicu, najmanje tri retka moraju stati na trenutnu stranicu.
Da biste to bolje razumjeli, pogledajte primjer pripremljen s CodePenom. A ovdje je debug verzija istog primjera, prikladnije je testirati.
*, *:prije, *:poslije, *:prvo slovo, p:prvi redak, div:prvi redak, blok citat:prvi redak, li:prvi redak (pozadina: prozirna !važno; boja: #000 !važno; sjena okvira: ništa !važno; sjena teksta: ništa !važno; )
Usput, CSS stilovi ispisa su jedna od rijetkih iznimaka gdje je direktiva !important sasvim u redu ;)
7. Uklonite neželjeni sadržaj
Kako ne biste trošili tintu, trebali biste ukloniti sve nepotrebno s tiskane verzije stranice, poput ogromnih prekrasnih slajdova, reklama, alata za navigaciju stranicama i slično. To možete učiniti tako da svojstvo prikaza postavite na none za nepotrebne elemente. Moguće je da će vam biti ispravno prikazati samo glavni sadržaj stranice, a sakriti sve ostalo:Tijelo > *:ne(glavni) (prikaz: nema;)
8. Izlaz URL-ova poveznica
Linkovi, u obliku u kojem se obično nalaze na web stranicama, potpuno su beskorisni u tisku, osim ako čitatelj papirnate verzije dokumenta ne zna kamo vode.Za prikaz URL-ova poveznica nakon njihovog tekstualnog prikaza, dovoljno je koristiti sljedeći stil:
O: poslije ( sadržaj: " (" attr(href) ")"; )
Naravno, ovim pristupom će se “dekodirati” puno suvišnih stvari. Na primjer, relativne veze, apsolutne veze na istoj stranici kao i stranica koja se ispisuje, veze sa sidrima i tako dalje. Kako ne biste začepili ispisanu stranicu, bilo bi bolje koristiti nešto poput ovoga:
A:not():after (sadržaj: " (" attr(href) ")"; )
Sigurno izgleda ludo. Stoga ću objasniti značenje ovog pravila jednostavnim jezikom: “Prikaži vrijednost atributa href pored svake veze koja ima atribut koji počinje s http, ali ne sadrži mywebsite.com”.
9. Objašnjenje kratica
Skraćenice u tekstu treba staviti u oznaku , a njihovi prijepisi moraju biti uključeni u atribut naslova. Ako kratice formatirate na ovaj način, njihova je značenja vrlo lako prikazati na ispisanoj stranici:Abbr:after ( sadržaj: " (" attr(title) ")"; )
10. Prisilno pozadinski ispis
Preglednici obično ne prikazuju boje pozadine i pozadinske slike kada generiraju stranicu za ispis osim ako im to nije izričito rečeno. Međutim, ponekad je sve to potrebno ispisati. Ovdje je zgodno nestandardizirano svojstvo prilagodbe boje ispisa, koje vam omogućuje da za neke preglednike nadjačate zadane postavke.Zaglavlje ( -webkit-print-color-adjust: točno; print-color-adjust: točno; )
11. Medijski upiti
Ako pišete medijske upite poput dolje prikazanog, imajte na umu da CSS pravila u takvim upitima neće utjecati na ispisanu verziju stranice.@medijski zaslon i (min. širina: 48em) ( /* samo zaslon */ )
Zašto je to tako? Stvar je u tome da se CSS pravila primjenjuju samo ako je vrijednost minimalne širine 48em i ako je vrsta medija screen . Ako se riješimo ključne riječi zaslona u ovom medijskom upitu, tada će ona biti ograničena samo vrijednošću min-width.
@media (minimalna širina: 48em) ( /* sve vrste medija */ )
12. Tiskanje kartica
Trenutne verzije Firefoxa i Chromea mogu ispisivati karte, ali Safari, na primjer, ne može. Što je s ispisom kartica? Jedna od univerzalnih opcija je korištenje statičkih karata umjesto dinamičkih.Karta ( širina: 400 px; visina: 300 px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format_resh&visuale=png&vis "); -webkit-print-color-adjust: točno; print-color-adjust: točno; )
13. QR kodovi
Ispis QR kodova koji sadrže važne poveznice može uvelike poboljšati upotrebljivost papirnatih verzija web stranica. Ovdje je članak u The Smashing Magazine, gdje možete pronaći korisne savjete o ovoj temi. Jedan od njih je uključivanje njihovih adresa u obliku QR kodova na ispisane stranice. Kao rezultat toga, korisnik, da bi u pregledniku otvorio stranicu s koje je napravljen ispis, ne mora na tipkovnici upisivati svoju punu adresu.14. O ispisu neoptimiziranih stranica
Istražujući temu ispisa web stranica, otkrio sam izvrstan alat koji vam omogućuje praktičnu pripremu neoptimiziranih stranica za ispis. Uz dodavanje oznakaPostoje dva načina za izradu stranice za ispis:
1. Posebno prikažite stranicu bez izbornika i dodatnog dizajna pomoću zasebne skripte.
2. Prikažite istu stranicu koju gledamo kada pregledavamo stranicu, ali s drugim podržanim stilovima, gdje su skriveni nepotrebni elementi.
Imao sam priliku izraditi dokumente (fakture, fakture itd.) za tisak. Pa sam krenuo s prvom opcijom. Ali to je samo u mom slučaju. Fleksibilnija kako mi se čini druga varijanta.
Evo mog iskustva, napomene:
1. Glavno pravilo je da bude jednostavno i ljudi će doći do vas (c) xs tko. 🙂 Ukratko, nemojte koristiti raznolik dizajn. Osoba samo treba pročitati ispisani tekst, nema ga što dodatno opteretiti dizajnom. I otpadnu tintu u pisaču.
2. Ne koristimo pozadinske slike, one se ionako neće ispisati. Ili hoće, ali ne u svim preglednicima. Barem se meni dogodila neka slična graba.
3. Pokušavamo koristiti bijelu pozadinu, crni tekst. Ako ne, onda će se potrošiti puno boje. Mislim da ne trebate raditi tekst u boji - mnogi ljudi ionako imaju crno-bijeli pisač.
4. Ako želite da se sljedeći sadržaj ispiše na sljedećoj stranici, umetnite div blok s klasom pagebreak ispred ovog teksta. Klasu opisujemo u stilovima:
Prijelom stranice (prijelom stranice-poslije: uvijek;)
Prijelom stranice( stranica - prijelom - poslije : uvijek ; |
tekst iza ovog bloka bit će ispisan na novoj stranici. Radi u svim modernim preglednicima. Da, a ne moderno isto. Jedan IE do uključujući verziju 7 ne uspijeva. Ali moraš ga udariti!
5. I tako, tiskanje. Korisnik može odabrati ispis. Može se staviti
window.onload = funkcija () ( window.print(); )
i sam gumb:
< button onclick = "window.print();" >Pečat< / button > |
Ovaj gumb će biti na prikazu stranice, ali neće biti ispisan jer smo postavili prikaz: nema; u stilu za media="print", odnosno u stilovima za uređaj za ispis. Klikom na gumb prikazat će se prozor za ispis.
Za one koji žele super automatizirati proces ispisa, na primjer, otvorite stranicu i pisač odmah počne ispisivati stranicu – ohladite svoj žar ili onoga tko to od vas traži. Nisam pronašao ovaj način. Da i ne. Jer je logično. Zamislite, odete na stranicu i tamo se preko javascripta programira ispis sto kopija stranica. I pisač poludi i počne ispisivati ovu hrpu stranica bez vašeg znanja. Nelogično? Nelogično!
Svojedobno me za takvo što marljivo tražio jedan voditelj projekta. Morao sam mu sve to objasniti, navesti primjere, kako bi shvatio da se to ne može, a nije ni potrebno.
6. Ako se netko žali na to što se ispisuje adresa stranice, naslov i ostalo sranje u zaglavlju i podnožju, savjetujte mu da postavi preglednik. Ne može se konfigurirati sa strane stranice. Bar ne znam kako. Na primjer, u Firefoxu je to konfigurirano u "Ispis" - "Postavljanje stranice" - "Margine i zaglavlja"
7. Usput, u potrazi za prethodnim. Recimo da je korisnik onemogućio izlaz svih zaglavlja, uključujući adresu stranice. Odnosno, ako korisnik pogleda ispis nakon nekog vremena, neće moći razumjeti s koje ga je stranice isprintao. Stoga je možda vrijedno 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 pri ispisu sve čitljivo.
10. Mislim da je potrebno koristiti dimenzije koje su neovisne o uređaju - apsolutne dimenzije. Na primjer u, cm, mm, pt, kom.
11. Ovdje je korisna poveznica http://www.webdevout.net/browser-support-css#css2propsprint . Opis stilova može se naći na web stranici http://htmlbook.ru
Općenito, savjetujem vam da prođete kroz cijeli popis CSS svojstava, čak i ako ste iskusni programer. Za sebe sam se iznenadio kada sam pronašao nepoznata svojstva CSS-a i da se neka CSS svojstva već mogu neustrašivo koristiti.
Naravno, ovo nije potpuni popis savjeta. Ovo su samo moja razmišljanja.
Mnoga web-mjesta imaju mogućnost prikaza verzije stranice za ispis, ali je li ih uvijek zgodno koristiti?
Glavni problemi pri ispisu dokumenta su loša tipografija, prisutnost nepotrebnih informacija (na primjer, elementi sučelja) i pogrešne boje. Za styling možete koristiti pravilo @mediji:
@medijski ispis ( )
Ako korisnik želi ispisati stranicu s dizajnom prikazanim na ekranu, on snima snimku zaslona i ispisuje je. Verzija za ispis dizajnirana je za jednostavno i udobno čitanje teksta s lista papira. Stoga je prije svega potrebno ukloniti sve nepotrebno sa stranice: izbornik, masivno zaglavlje ili podnožje, pozadinske slike itd., ostavljajući samo ono što je potrebno: naslove, sadržaj sa slikama, logotip stranice, URL stranice. Na primjer, ovaj kod skriva zaglavlja H1, kao i bočnu traku, zaglavlje i podnožje stranice:
H1, div#header, div#sidebar, div#footer (prikaz: nema;)
Ispis pravila stranice
1. Moderni preglednici mogu ukloniti pozadinsku sliku. Međutim, poželjno je dodati pozadinska slika: nema tako da to mogu učiniti i stariji preglednici.2. Prilikom dodjeljivanja dimenzija u pikselima može doći do neslaganja između ispisane stranice i njenog prikaza na zaslonu. Stoga je vrijedno koristiti inče, centimetre ili postotke.
3. Sa sljedećim kodom možete prikazati cijeli URL umjesto hiperveze, jer ne možete kliknuti na komad papira:
O: poslije (sadržaj:"<" attr(href) ">";
Uz malu izmjenu koda, možete dodati prikaz URL-a samo vanjskim vezama:
O: poslije (sadržaj:"<" attr(href) ">";
4. Za velike tekstove ponekad će biti prikladno podijeliti na dijelove. Sljedeći kod dijeli sadržaj na svakom H3 naslovu ispisom na novoj stranici:
H3 (prijelom stranice-prije: uvijek;)
A ovaj će kod pomoći ispisati svaki članak s nove stranice, može biti koristan pri ispisu popisa postova na blogu:
Članak + članak (prelom stranice-prije: uvijek;)
5. Preporučljivo je preoblikovati web-mjesta s tamnim ili svijetlim dizajnom na standardnu shemu boja - crni tekst na bijeloj pozadini. To je prikladno i za čitljivost i za spremanje potrošnog materijala u korisnikov pisač.
Ispravan prikaz
Kao što je gore spomenuto, moderni preglednici 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 u nastavku za prikaz izvornog stila:* ( -webkit-print-color-adjust: točno; )
Kako to izgleda na djelu:
Kvaliteta ispisa
Često se rezultat ispisa vrlo razlikuje od originala na zaslonu čak i gore. Jedan od čestih razloga za to ćemo analizirati jednostavnim primjerom. 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; )
Preglednik će pokušati normalizirati verziju za ispis:
Ako na stranici postoji slika, na primjer, logotip, tada je preglednik ni na koji način ne ispravlja, a ispada užasno:
Sve izgleda još gore ako se kao logotip koristi vektorska slika s transparentnošću:
Ovaj užas možete izbjeći korištenjem CSS3 filtera:
@media print ( zaglavlje ( pozadina: nema; boja: #000; ) img zaglavlja ( -webkit-filter: invert(100%); filter: invert(100%); ) )
Ispada:
Za Firefox možete koristiti SVG:
@media print ( zaglavlje (pozadina: nema; boja: #000; ) zaglavlje img (filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); ) )
Za IE9 rješenje je iz
S vremena na vrijeme na internetu možete pronaći toliko vrijedne članke da ih poželite isprintati i pročitati do rupa. Istodobno, sve usluge ne pružaju verziju članka za ispis ili naše želje za ispisom ne odgovaraju ponuđenim mogućnostima (želim ostaviti sliku ili promijeniti vrstu glavnog fonta). Kako ispisati stranicu bez nepotrebnih elemenata? U tom će slučaju pomoći web usluga.
Na glavnoj stranici PrintWhatYouLike u sredini ekrana nalazi se obrazac za unos adrese stranice za ispis. Adresa je upisana, stranica se učitava i vidimo da kada odaberete bilo koji od elemenata sučelja, ona je okružena crvenim okvirom. Još jedan klik lijevom tipkom miša i otvara se popis mogućih operacija. Elementi sučelja mogu se brisati jedan po jedan ili kao grupa, proširiti jedan odabrani unutar granica ili odabrati jedan blok teksta, brisanjem svih ostalih. Odnosno, moguće je samostalno ukloniti dijelove stranice koji su nepotrebni za ispis ili brzo izolirati potrebno od sekundarnog i ispisati ga.
Na lijevoj strani zaslona nalazi se bočna traka s brojnim funkcijama za uređenu stranicu:
- spremanje uređene stranice u PDF, HTML formatima;
- promijeniti veličinu teksta, vrstu fonta;
- uklonite pozadine ili slike jednim klikom miša.
Za praktičnost korisnika, PrintWhatYouLike predlaže postavljanje gumba za uređivanje na traku oznaka prije ispisa bilo koje stranice koju posjetimo. Postoji i PageZipper opcija. Bit će zgodno kada čitate one resurse gdje vole podijeliti jedan članak na pet, deset ili više stranica. Ponovo pritisnete “Next Page”, “Next Page” i tada shvatite da nemate ništa za čitanje. PageZipper će cijeli članak postaviti na jednu stranicu za daljnje uređivanje i ispis. Ako ne želite instalirati bookmarklet, tada je dostupan dodatak za Firefox PageZipper 0.6.1.
Registriranim korisnicima PrintWhatYouLike nudi upravljačku ploču koja sadrži informacije o broju instaliranih tipki za Printer Friendly, o spremljenim i ispisanim listovima papira, ušteđenom novcu, neposječenom drveću i nesretnom ugljičnom monoksidu koji se ne ispušta u atmosferu.
Blogeri također mogu imati koristi. Instaliranje dodatka rezultirat će pojavom na svakoj stranici bloga prikladnog gumba za slanje članaka na ispis, mogućnost spremanja stranica u PDF formatu, što će čitateljima uštedjeti papir i tintu za pisač.
