Nga zhvilluesi i frontit Manuel Matuzovich.

Tek faqeshënuesit

Manuel Matuzovich

Ish menaxheri i Microsoft Aaron Gustafson në tetor 2016 ka shkruar në Twitter, një apel për Indiegogo, ku ai tërhoqi vëmendjen e kompanisë për faktin se faqet me detajet e porosisë nuk mund të printohen.

Kur pashë këtë postim në Twitter, më goditi si një goditje elektrike, sepse jo vetëm që nuk e kisha optimizuar faqen time për printim për një kohë shumë të gjatë, por as që e kisha menduar për një sekondë. Ndoshta kjo është për shkak se unë jam duke u marrë vazhdimisht me çështje që lidhen me ndryshimin e madhësisë së shfletuesit dhe duke u siguruar që faqet e faqes sonë të funksionojnë në mënyrë perfekte në çdo madhësi dhe formë, ose ndoshta sepse unë pothuajse kurrë nuk i printoj faqet vetë. Gjithsesi, harrova fare stilet e printimit, gjë që është e keqe.

Optimizimi i faqeve të internetit për printim është shumë i rëndësishëm sepse është në interesin tonë më të mirë që faqet të jenë sa më të aksesueshme për përdoruesit, pavarësisht nga forma. Nuk ka nevojë të supozohet se si janë përdoruesit dhe si do të jetë sjellja e tyre: njerëzit ende shtypin faqet e faqeve të internetit. Thjesht mendoni për të gjithë ata artikuj ose blogje, receta, informacion kontakti, faqet "si të shkosh atje" ose faqet e internetit të pasurive të paluajtshme. Një ditë, dikush, diku do të përpiqet patjetër të printojë një nga faqet që keni krijuar.

Unë kam ndërprerë përdorimin e printerit në shtëpi shumë kohë më parë, sepse ai prishej çdo 10 minuta. Por jo të gjithë janë si unë.

Gaydon Pickering

Modelet gjithëpërfshirëse të projektimit

Nëse gjeni të njëjtin problem si unë, atëherë shpresoj që ky artikull të rifreskojë shpejt njohuritë tuaja. Nëse nuk i keni optimizuar ende faqet tuaja me duke përdorur CSS, këshillat e mëposhtme do t'ju ndihmojnë të filloni.

1. Vendos stilet për printim

Menyra me e mire futni stilet e printimit - përshkruani direktivën @media në CSS tuaj.

Ju gjithashtu mund të futni stilet e printimit në HTML, por kjo kërkon një kërkesë shtesë.

2. Testimi

Nuk ka nevojë të printoni një faqe sa herë që bëni një ndryshim të vogël. Në varësi të shfletuesit tuaj, mund ta eksportoni faqen si skedar PDF, shikoni paraprakisht faqen ose bëni rregullime në vetë shfletuesin.

Për të rregulluar stilet e printimit në Firefox, hapni Panelin e Zhvilluesit (Shift + F2 ose Zhvilloni → Zhvillimi i Uebit → Paneli i Zhvilluesit), shkruani printimin e imitimit të medias në rreshtin e hyrjes në fund të dritares së shfletuesit dhe shtypni Enter. Skeda aktive do të sillet sikur lloji i medias të ishte printuar derisa të mbyllni ose rifreskoni faqen.

Emulimi i stilit të shkrimit të Firefox-it

NË Shfletuesi Chrome hapni Developer Tools (CMD + Opt + I (për macOS) ose Ctrl + Shift + I (për Windows) ose Shiko → Developer → Developer Tools), pasqyroni sirtarin e konsolës (Esc), hapni panelin Rendering, kontrolloni kutinë Emulate CSS Media dhe zgjidhni Print.

Emuloni stilin e printimit në Chrome

3. Njësitë absolute

Njësitë absolute nuk janë të përshtatshme për ekrane, por funksionojnë mirë për printim. Në stilet e printimit, është plotësisht i sigurt dhe madje rekomandohet përdorimi i njësive absolute si cm, mm, in, pt ose pc.

seksioni (diferenca e poshtme: 2 cm;)

4. Rregulla të veçanta për faqen

Ju gjithashtu mund të përcaktoni parametrat që zbatohen për këtë faqe - dimensionet, orientimi dhe kufijtë - duke përdorur direktivën @page. Kjo është shumë e dobishme nëse dëshironi që të gjitha faqet të kenë fusha të caktuara.

printim @media ( @faqe ( margjina: 1cm; ))

Ka dy mënyra për të krijuar një faqe të printueshme:

1. Përdorni posaçërisht një skript të veçantë për të shfaqur një faqe pa menu dhe dizajn të panevojshëm.

2. Shfaq të njëjtën faqe që shohim kur shikojmë faqen, por me stile të ndryshme të mbështetura, ku fshihen elementë të panevojshëm.

Kam pasur mundësinë të krijoj dokumente (fatura, fatura etj.) për printim. Kështu që unë shkova me opsionin e parë. Por kjo është e thjeshtë në rastin tim. Opsioni i dytë më duket se është më fleksibël.

Këtu është përvoja ime, shënime:

1. Rregulli kryesor është të jesh më i thjeshtë dhe njerëzit do të tërhiqen drejt jush (këtu). 🙂 Me pak fjalë, mos përdorni një shumëllojshmëri dizajnesh. Një person thjesht duhet të lexojë tekstin e shtypur, nuk ka nevojë ta ngarkojë atë me dizajn të panevojshëm. Po, dhe bojë e mbeturinave në printer.

2. Ne nuk e përdorim atë imazhet e sfondit, gjithsesi nuk do të shtypen. Ose do ta bëjnë, por jo në të gjithë shfletuesit. Nga të paktën Më ndodhi një lloj rakete e ngjashme.

3. Ne përpiqemi të përdorim Sfondi i bardhë, tekst i zi. Nëse është anasjelltas, do të humbisni shumë bojë. Nuk mendoj se ka nevojë për të bërë tekst me ngjyra - gjithsesi shumë njerëz kanë një printer bardh e zi.

4. Nëse keni nevojë që përmbajtja e mëposhtme të printohet në faqen tjetër, futeni bllok div me klasën e ndërprerjes së faqeve përpara këtij teksti. Ne e përshkruajmë klasën në stile:

Ndërprerja e faqeve (ndërprerja e faqeve pas: gjithmonë; )

Ndërprerje e faqeve ( faqe - pushim - pas : gjithmonë ;

teksti pas këtij blloku do të printohet tashmë në faqe e re. Punon në të gjitha shfletues modern. Dhe as ato moderne. Një IE deri në versionin 7 gjithëpërfshirës dështon. Por ju duhet të shënoni për të!

5. Dhe kështu, printoni. Përdoruesi mund të zgjedhë vetë printimin. Ju mund të bastni

window.onload = funksion () ( window.print();

dhe vetë butoni:

Vulë

< button onclick = "window.print();" >Vulë< / button >

Ky buton do të shfaqet gjatë shikimit të faqes, por nuk do të printohet, pasi kemi vendosur shfaqjen: asnjë; në stil për media="print", domethënë në stile për pajisjen e printimit. Kur klikoni butonin, do të shfaqet një dritare printimi.

Për ata që duan të super-automatizojnë procesin e printimit, në mënyrë që, për shembull, të hapim një faqe dhe printeri të fillojë menjëherë të printojë faqen - qetësoni zemërimin tuaj ose atë që ju kërkon ta bëni këtë. Unë nuk e kam gjetur këtë metodë. Po, ai nuk ekziston. Sepse është logjike. Imagjinoni, ju shkoni në një faqe interneti dhe është programuar përmes javascript për të printuar njëqind kopje faqesh. Dhe printeri çmendet dhe fillon të printojë këtë tufë faqesh pa dijeninë tuaj. E palogjikshme? E palogjikshme!

Në një kohë, një menaxher projekti më kërkoi me zell që ta bëja një gjë të tillë. Më duhej t'i shpjegoja të gjitha këto, të jepja shembuj që ai të kuptonte se kjo nuk mund të bëhet dhe nuk është e nevojshme.
6. Nëse dikush ankohet se adresa e faqes, titulli dhe gërmadhat e tjera në funde janë printuar, këshillojeni që të konfigurojë shfletuesin e tij. Kjo nuk është e konfigurueshme nga ana e faqes. Të paktën unë nuk e di se si. Për shembull, në Firefox kjo është konfiguruar në "Print" - "Page Settings" - "Margins and Footers"

7. Nga rruga, në vijim të asaj të mëparshme. Le të themi se përdoruesi ka çaktivizuar shfaqjen e të gjitha titujve dhe fundeve, duke përfshirë adresën e faqes. Kjo do të thotë, nëse përdoruesi shikon printimin pas ca kohësh, ai nuk do të jetë në gjendje të kuptojë se nga cila faqe e ka printuar atë. Pra, ndoshta ia vlen të bëni një shënim të shkurtër që tregon burimin, adresën e faqes, logon ose diçka tjetër.

8. Përdorni madhësi të madhe të shkronjave (sigurisht brenda arsyes). Gjëja kryesore është që gjithçka të lexohet kur shtypet.

10. Mendoj se duhet të përdorim dimensione që janë të pavarura nga pajisja - dimensione absolute. Për shembull në,cm,mm,pt,pc.

11. Këtu lidhje e dobishme http://www.webdevout.net/browser-support-css#css2propsprint. Përshkrimet e stileve mund të gjenden në faqen e internetit http://htmlbook.ru
Në përgjithësi, ju këshilloj të ecni përreth lista CSS pronat, edhe nëse jeni një zhvillues me përvojë. U befasova kur zbulova të panjohura Karakteristikat e CSS dhe se disa veti CSS tashmë mund të përdoren në mënyrë të sigurt.

Sigurisht që nuk është listën e plotë këshilla. Këto janë vetëm mendimet e mia.

Dikur ishte thjesht standarde për të krijuar një lidhje, ose më saktë një buton, që thoshte "Print Version". Ato janë të nevojshme për të bërë një printim në letër. Versioni i printuar përmban të gjitha informacionin e nevojshëm, por i mungojnë elementet ndërvepruese: butonat, formularët dhe të ngjashme.

Kjo do të thotë që dikush përdor manualisht ose automatikisht një skript
mori dokumentin origjinal dhe, pasi hoqi gjithçka të panevojshme prej tij, krijoi një kopje të tij,
më i përshtatshëm për printim. Ndoshta punë të ngjashme duhej
beje edhe per ty.

Zgjidhja - Printimi i fletëve të stilit

Një nga veçoritë e shkëlqyera të CSS është aftësia
krijoni fletë stilesh që synojnë një sërë pajisjesh
prodhimit. Jemi mësuar të krijojmë fletë stilesh për të shfaqur faqet
ekran, por ne ende nuk jemi mësuar të mendojmë për mjete të tjera të shfaqjes. DHE,
Siç konfirmohet nga lidhjet "versioni i printuar", ne do ta printojmë dokumentin
Ne mendojmë vetëm ta paraqesim dokumentin në një formë tjetër.

Por tani nuk kemi asgjë për të frikësuar, tani për të krijuar një version të printuar
dokument, na duhet vetëm një dokument i strukturuar mirë dhe
fletë stili e printueshme!

Sot mund të merrni çdo dokument (X)HTML dhe ta përgatisni për të
printoni duke përdorur fletë stili pa prekur shenjën. Dhe këtu brenda
Problemet me krijimin dhe sinkronizimin e dy versioneve janë një gjë e së kaluarës
dokument - një për ekran, tjetri për printim. Dhe çfarë është më
Pjesa më e mirë: nuk mund të ishte më e lehtë për ta bërë.

Ne punojmë rreth defektit me elementë lundrues

Shfletuesit e familjes Gecko si Netscape 6.x ose Mozilla kanë
problem me printimin e elementeve të gjatë lundrues.
Nëse një element lundrues shtrihet përtej faqes së printuar, atëherë
pjesa e mbetur zhduket plotësisht, duke mos u shfaqur kurrë në tjetrën
faqe.

Nëse faqja juaj është si "A List Apart" d.m.th. artikujt që përmban
në një bllok të madh lundrues, kjo do të thotë se lexuesit
Vetëm faqja e parë e artikullit do të shtypet.

Zgjidhja, siç mund të prisni, është të çaktivizoni pronën
"lundrues" pranë bllokut me tekst përpara printimit. Me pak fjalë, për të gjithë
elementet lundrues, rregulli i stilit "float: asnjë" është vendosur.
Duke bërë këtë, ju do t'i ktheni të gjithë elementët lundrues në pamjen e tyre normale, dhe
dokumenti do të printohet siç pritej - një faqe në të njëjtën kohë
faqe deri në fund.

Kështu që unë sugjerova që Zeldman të bënte për ALA dhe si
Sapo e bëri këtë, problemi me vulën u zhduk. Për shfletuesit e familjes
Gecko ky gabim ende nuk është rregulluar (në kohën e shkrimit
artikull), por megjithatë mund të anashkalohet lehtësisht duke përdorur metodën e propozuar më sipër.

Le të dalim në rrugë

Më poshtë është fleta e stilit "të printuar" që A List Apart përdori për të zgjidhur problemin e printimit të elementeve lundrues:

#menu ( shfaqja: asnjë; ) #mbështjellës, #përmbajtje ( gjerësia: automatik; kufiri: 0; diferenca: 0 5%; mbushja: 0; notimi: asnjë !e rëndësishme; )

Një fillim i mbarë. Fleta e stilit hiqet plotësisht menuja e djathtë Kështu që,
se nuk printohet dhe vendos kufijtë dhe mbushjet për të
përmbajtjen e artikullit në mënyrë të tillë që teksti në çdo faqe
shpërndahet në mënyrë të barabartë nga një skaj i zonës së printimit në tjetrin.

Problemi, siç e pashë, ishte se shumë stile të dizajnuara për ekranin përfunduan në procesin e printimit.

Nëse shikoni përmbajtjen e etiketës artikuj të rinj në faqen e internetit të ALA, do të gjejmë (në fund të mbushjes) rreshtat e mëposhtëm:

Ne kemi një skedar stili, print.css, të cilin e përdorim për të
pajisje printimi"print" u specifikua nga vlera e atributit "media".
Skedari i fletës së stilit nucss2.css, i cili importohet duke përdorur
Ndërtimet @import do të përdoren për ta fshehur atë nga Navigator 4.x
kur faqja shfaqet në ndonjë pajisje dalëse (atribut
media=”të gjitha”). Mund të jetë një ekran, printer, projektor, sintetizues
fjalimet e kështu me radhë. Duke u ndarë, ne mund të shkruajmë në fletën e stilit për
printoni direktivat për ngjyrën e sfondit të faqes dhe specifikoni fontet në të
piksele.

Artikull i lidhur: Komplet bazë shtojca për WordPress

A do të jetë kjo një fatkeqësi e madhe? Jo, por shumica e shfletuesve
Si parazgjedhje, sfondi i faqes nuk printohet, por dimensionet e specifikuara në piksel
fontet që janë aq të përshtatshme për shfaqjen e ekranit nuk janë të tilla
të dobishme për printim.

Pra, le të përmirësojmë pak fletën tonë të stilit të printimit dhe të zgjidhim disa çështje të tjera të paraqitjes.

Sfondi zbardhues

Artikujt e menusë në anën e djathtë përdorin një larmi ngjyrash.
Por meqenëse e fshehëm menunë gjatë printimit, nuk do të na duhet të ndryshojmë asgjë.
Kjo na shpëton menjëherë nga dhimbjet e mundshme të kokës.

Meqenëse printerët nuk printohen në të bardhë, ne do të bëjmë sfondin e faqes
të bardhë. Ju gjithashtu duhet të hiqni çdo imazh të sfondit që
përdoret kur shfaqet një faqe në ekran.

Nëse thërrasim pronën e sfondit për të ndihmuar, ne mund ta zgjidhim me një goditje
të dyja problemet. Për ta bërë zgjidhjen më fleksibël, vendosëm për elementin
"trupi" ka një sfond të bardhë dhe le të kenë elementët "mbështjellës" dhe "përmbajtje".
sfond transparent (dhe kështu do të shfaqet përmes tyre Ngjyra e bardhë
"trupi"):

trupi ( sfondi: i bardhë; ) #menu ( shfaqja: asnjë; ) #mbështjellës, #përmbajtje ( gjerësia: automatik; diferenca: 0 5%; mbushja: 0; kufiri: 0; lundrues: asnjë !e rëndësishme; ngjyra: e zezë; sfondi : transparent )

Vendosni ngjyrën plan të parë(ngjyra e shkronjave) mungonte absolutisht
e nevojshme, por është më mirë të mos harroni për këtë. Pra, tani kemi dy
Elementi "jo lundrues" (#mbështjellës, #përmbajtje) me sfond transparent, Dhe
faqja ka një sfond të bardhë.

Ju mund të shqetësoheni se si Navigator 4.x trajton vlerën
“transparente”, por sipër hundës: NN4.x i kushton vëmendje vetëm tabelave
stilet me atributin "media" të vendosur në "ekran". Si dhe
në rastin e direktivës @import, fletët e stileve tona të printueshme janë gjithmonë
fshehur nga sytë e verbër të Navigator 4. Pra, nuk ka asgjë për të folur këtu
merak.

Madhësia e shkronjave për printim

Fleta e përgjithshme e stilit vendos madhësinë e shkronjave në 11 piksele. Shumë
zgjedhje e keqe gjatë printimit. Vetë familja e shkronjave është Gjeorgjia së pari,
dhe pastaj serif - i shkëlqyeshëm për printim, si shkronja serif
zakonisht duken më mirë në letër. Ju vetëm duhet të ndryshoni madhësinë
font. Si kjo:

trupi (sfondi: i bardhë; madhësia e shkronjave: 12 pt; )

"Prisni!" Me siguri do të bërtisni. - "Pikët janë të këqija!"

Epo, po, kjo është ajo që ai tha, dhe ai kishte plotësisht të drejtë - është e pamundur për ekranin
caktoni madhësinë e shkronjave në pikë. Gjatë printimit të aplikimit të njëjtë të pikave
ka të njëjtin kuptim si shumë dekada më parë. Ndërsa ne jemi duke gatuar
fletë stili për printim, më pas vendosni madhësinë e shkronjave për "trupin" në 12
pikat do të jenë të sakta dhe të natyrshme.

Megjithatë, ju mund të vendosni çdo madhësi që dëshironi
Fonti me 12 pika është më i zakonshmi. Dhe që në tabelën e përgjithshme
stilet, madhësitë e të gjithë elementëve të tjerë të faqes janë dhënë në lidhje me
madhësia në elementin "trup", puna jonë është kryer.

Margjinalia

Rregullat ekzistuese të stilit të vendosura për kufijtë majtas dhe djathtas
(kufijtë) e mbështjelljes dhe madhësia e elementeve të përmbajtjes është 5%. Kjo do të thotë se në të dyja
anët e artikullit do të jenë " vend bosh", dhe çdo "vend i zbrazët" do të jetë
të jetë 10% e gjerësisë së zonës së printimit. Kjo është pasojë e faktit se blloku me
teksti i artikullit "përmbajtja" qëndron brenda bllokut të kornizës "mbështjellës", dhe
secila prej tyre ka 5% kufij në anën e majtë dhe të djathtë.

Artikull i lidhur: Yandex.School of Webmasters

Fleta origjinale e stilit të zakonshëm specifikon 15% mbushje djathtas.
për bllokun "përmbajtje". Tashmë kufijtë na kanë dhënë 10%, ndaj na duhet
shtoni edhe 5%. Është mjaft e lehtë për të bërë:

div#content (diferencë-majtas: 10%; )

Një zgjidhje tjetër do të ishte lënia e diferencës
pushoni dhe shtoni 5% në mbushjen e majtë. Që nga blloku "përmbajtja".
nuk ka sfond të dukshëm, do të merrnim të njëjtin rezultat.

Fatkeqësisht, disa shfletues kanë probleme me adekuat
trajtimi i mbushjes në mënyrë që elementët të mund të zhvendosen nëpër faqe
më mirë me kufijtë.

Lidhjet gjatë printimit

Kishte një pyetje të ndërlikuar - çfarë të bëni me lidhjet? Natyrisht, në
në shtyp ato mund të mos jenë aq të dobishme sa në një monitor, por shpesh është e rëndësishme
jepni një të dhënë se çfarë po i referoheshin në origjinal. Pra, ja çfarë unë
shpikur:

a:link, a:visited (ngjyra: #520; sfondi: transparent; pesha e shkronjave: bold; teksti-dekorimi: nënvizoni; )

Kjo u jep lidhjeve një ngjyrë mjaft të errët për t'u afruar
e zezë në printim bardh e zi, ndërsa mbetet e kuqe e errët
për printim me ngjyra. Shkronja e theksuar dhe nënvizoni sigurohuni që
lidhja do të theksohet në tekstin e printuar.

Në një shfletues që mbështet plotësisht specifikimin CSS2, ne mundemi
shfaqni URL-të e lidhjeve pas tyre, duke ofruar kështu një shërbim për to
kushdo që ka në dorë një printim dhe shfletues. Më poshtë është rregulli,
e cila vlen vetëm për bllokun e "përmbajtjes", dhe rrjedhimisht URL-të
lidhjet e tjera nuk janë të shtypura:

#content a:link:after, #content a:visited:after (përmbajtja: " (" attr(href) ") "; madhësia e shkronjave: 90%; )

Provoni këtë në shfletuesit e bazuar në Gecko - Mozilla ose Netscape
6.x. Në printim, pas çdo lidhjeje, do të shihni atë përkatëse në kllapa.
URL për të.

Shfletuesit që nuk e kuptojnë këtë rregull stili nuk do të kenë asnjë
efekte të padëshiruara - lidhjet do të jenë ende të kuqe të errët,
të nënvizuara dhe të theksuara. Vetëm se lidhjet nuk do të shfaqen pas tekstit
URL e lidhur me to, kjo është e gjitha.

Ju lutemi vini re se hapësirat para dhe pas kllapave janë
pjesë e rregullit të stilit - mos harroni për hapësirat, ashtu siç duhet
të përfshihen në dokument.

Ka një problem estetik me këtë rregull të ri. Puna është,
që udhëzon për të futur vlerën e atributit fjalë për fjalë në dokument
href.

Duke parë kodin e çdo faqeje nga faqja e internetit A List Apart, ne shpejt
Le të theksojmë se ka shumë të ashtuquajtura "lidhje relative" të formës
"/issues/144". Ato do të futen në dokument në formën në të cilën janë
Po, por do të doja që këto të ishin URL të plota.

Në raste të tilla, CSS3 mund të na ndihmojë. Çdo përzgjedhës atributi,
duke përdorur operatorin ^=, zgjedh elementet në bazë të fillimit të tyre
vlerat e atributeve. Kështu që ne mund të zgjedhim çdo atribut href.
duke filluar me një karakter të pjerrët, dhe futni tekstin atje që zëvendëson
vlera ekzistuese atribut.

#content a:after ( përmbajtja: " (//www.alistapart.com" attr(href) ") "; )

Ky rregull konverton të gjitha vlerat si "/issues/144/" në
"//www.alistapart.com/issues/144/". Ky rregull nuk do të ndihmojë
rast me URL relative që nuk fillojnë me një të pjerrët, por
Për fat të mirë, ALA nuk e përdor këtë lloj referimi.

KUJDES! E RËNDËSISHME! Siç u tha, një përzgjedhës i formës ^=
i referohet përzgjedhësve në specifikimin CSS3. Validator për CSS nga
Konsorciumi W3 mund të testojë vetëm për pajtueshmërinë me specifikimet
CSS1 dhe CSS2. Pa kuptuar përzgjedhësin specifik të CSS3, vërtetuesi do ta bëjë
raportoni një gabim edhe kur zgjedhësi nuk kundërshton
rekomandimet e specifikimeve.

Dekorimi i pjesës së sipërme të faqes

Duke parë përsëri fletën përfundimtare të stilit, unë
Zbulova se nuk më pëlqen shumë koka e faqes. Ishte më e mundshme
jo në vetë kokën, por në vetë "theksin" e emrit të faqes. Kjo
nënvizimi natyrisht përfundonte aty ku përfundonte fotografia
kokë. Papritmas më shkoi mendja se do të ishte mirë ta zgjas këtë
nënvizoni vijën në të gjithë gjerësinë e faqes.

Çfarë do të dukej kaq e vështirë për krijimin e një faqeje për printim? Ne thjesht krijojmë të njëjtin dokument me tekst, por pa ndonjë dizajn dhe vendosim një lidhje me të nga një faqe e rregullt. Por motorët e kërkimit kanë shtuar një filtër përmbajtjeje të kopjuar dhe webmasterët duhet të fshehin faqet e printuara nga indeksimi. Për më tepër, nuk është gjithashtu shumë i përshtatshëm për vizitorët e faqes, sepse ata duhet së pari të shkojnë në një kopje të faqes që u nevojitet, së cilës i mungojnë elementët e dizajnit, dhe më pas të klikojnë në butonin "Printo".

Këtu mund të na vijë në ndihmë CSS, e cila jo vetëm që do të zvogëlojë sasinë e punës për webmasterët dhe do ta bëjë më të lehtë për vizitorët përdorimin e sajtit, por gjithashtu do të na lejojë të shmangim sanksionet nga motorët e kërkimit për përmbajtje të kopjuar.

Struktura e faqes

Pra, le të përdorim fillimisht HTML për të krijuar strukturën e dokumentit tonë. Për shembull, vendosa të përdor një plan urbanistik për ta bërë më të lehtë për ta kuptuar:

Navigimi Faqja kryesore Artikuj Kontaktet

Titulli i artikullit Kjo faqe mund të printohet. Vetëm teksti i artikullit do të shtypet.

Reklama juaj mund të jetë këtu

Siç mund ta shihni, ne kemi një tabelë me tre qeliza që janë rregulluar horizontalisht. Gjithçka është si një faqe interneti e zakonshme: navigimi në të majtë, përmbajtja në mes dhe në anën e djathtë blloqe reklamimi ose lajme. Secilës qelizë iu caktua ID-ja e saj. Për anën e majtë është kolona e majtë, për anën e djathtë është kolona e djathtë dhe për qelizën e mesme me përmbajtje është përmbajtje.

Duke shtuar CSS

Tani duhet të përdorni CSS për t'i treguar shfletuesit se cilat stile duhet të përdorë për të shfaqur elementët e faqes në ekran dhe cilat duhet të përdorë kur printon. Krijoni style.css dhe shkruani sa vijon atje:

Ekrani @media ( trupi ( ngjyra e sfondit: #0B73BD; font-familja: tahoma; ngjyra: #FFFFFF; ) tabela ( gjerësia: 600 px; ) #kolona e majtë ( gjerësia: 140 px; rreshtimi vertikal: lart; madhësia e shkronjave: 15 px ); ) ) @media print ( trupi ( ngjyra e sfondit: #FFFFFF; font-familje: tahoma; ngjyra: #000000; ) #përmbajtje (ngjyra e sfondit: #FFFFFF; mbushje: 5 px; madhësia e shkronjave: 15 px; ngjyra: # 000000 gjerësia: 600 px) #kolona e majtë (ekrani: asnjë;)

Blloku i parë i kodit CSS përshkruan se si elementët e faqes duhet të shfaqen në shfletues. Blloku u mor në shtesë mbajtëset para së cilës kemi shtuar ekranin @media. Kjo i bën të ditur shfletuesit se këto stile duhet të aplikohen për shfaqje:

Kështu duket faqja kur shikohet në një shfletues

Blloku i dytë përshkruan shfaqjen e elementeve të njëjta të faqes si i pari, por në në këtë rast në formën në të cilën do të duket dokumenti kur të printohet dhe tregohet me parametrin @media print. Meqenëse duam vetëm të printojmë përmbajtje të dobishme, atëherë ne ndalojmë që qelizat e majta (#leftcolumn) dhe të djathta (#rightcolumn) të shfaqen duke i caktuar ato vlera e shfaqjes: asnje.

Kështu duket një version i printuar i faqes së sajtit

Skedarët e stilit të veçantë

Nuk ka nevojë të kombinoni gjithçka në një skedar stili. Në vend të kësaj, mund të përdorni skedarë me dy stile dhe, kur i lidhni me faqet e sajtit, t'i tregoni shfletuesit se cilin skedar stili të përdorë për printim dhe cilin për shfaqje. E para (për shfaqjen në ekran) përcaktohet nga parametri media="screen", dhe e dyta do të përdoret për printim dhe përcaktohet nga parametri media="print":

Stilet për printim duhet të përshkruhen pas gjithë të tjerave, përndryshe Opera do të printojë bllokun e përmbajtjes së bashku me sfondin me ngjyrë që është menduar për dalje në shfletues dhe jo ngjyrën e bardhë që kemi zgjedhur për printim.

Gjithashtu, gjatë printimit, ne e zvogëlojmë rreptësisht gjerësinë e bllokut me përmbajtje në 600 px, sepse me një gjerësi prej 100% printeri "pret" një rrip të vogël teksti me anën e djathtë faqet. Ju lutemi vini re gjithashtu se kur printoni nga Opera, dhëmbëzimi përgjatë skajeve të fletës është pak më i vogël se në Internet Explorer dhe rreshtat e tekstit në një fletë letre bëhen më të gjera.

Tani nuk keni më nevojë të krijoni faqe shtesë për printim. Ju mund t'i informoni përdoruesit për mundësinë e printimit të një faqeje, për shembull, duke përdorur një lidhje me tekstin "print", kur klikohet, do të shfaqet një këshillë veglash me një mesazh në lidhje me aftësinë për të printuar drejtpërdrejt faqen aktuale pa një dizajn.

Kopjimi i artikullit është i ndaluar.

• Përkthimi

3. Njësi matëse absolute

Njësitë absolute të matjes nuk janë shumë të përshtatshme për versionet e faqeve në ekran, por për printim ato janë pikërisht ajo që ju nevojitet. Në stilet e printimit është plotësisht i sigurt, për më tepër, rekomandohet përdorimi i njësive matëse absolute, si cm, mm, in, pt ose pc.

Seksioni (diferencë-fund: 2 cm; )

4. Karakteristikat e faqes

Ju mund të përdorni rregullin @page për të kontrolluar vetitë e faqes, të tilla si madhësia, orientimi dhe kufijtë e tyre. Kjo është shumë e dobishme, të themi, kur keni nevojë që të gjitha faqet e printuara të kenë të njëjtat kufij.

printim @media ( @faqe ( margjina: 1cm; ) )
Rregulli @page është pjesë e standardit Paged Media Module, i cili ofron shumë gjëra interesante, si zgjedhjen e faqes së parë për printim, personalizimin faqe të zbrazëta, pozicionimi i elementeve në cepat e faqes dhe . Mund të përdoret edhe për të përgatitur libra për shtypje.

5. Menaxhimi i ndërprerjeve të faqeve

Meqenëse fletët e printuara, ndryshe nga faqet e internetit, nuk janë të pafundme, përmbajtja e faqeve të internetit herët a vonë përfundon në një fletë letre dhe vazhdon në tjetrën. Ka pesë veti për të kontrolluar ndërprerjet e faqeve.

▍Ndarja e faqes përpara elementit

Nëse dëshironi që një element të jetë gjithmonë në fillim të faqes, mund të detyroni një ndërprerje të faqes përpara tij duke përdorur veçorinë page-break-fore.

Seksioni (ndërprerja e faqes-para: gjithmonë; )

▍Ndarja e faqes pas elementit

Vetia page-break-after ju lejon të vendosni një ndërprerje të detyruar të faqes pas një elementi. Duke përdorur këtë pronë, ju gjithashtu mund të parandaloni thyerjen.

H2 (ndërprerja e faqeve pas: gjithmonë; )

▍Ndarja e faqes brenda një elementi

Vetia e thyerjes së faqes brenda është e dobishme kur dëshironi të shmangni ndarjen e një elementi midis dy faqeve.

Ul (ndërprerja e faqes brenda: shmang; )

▍Linjat e varura të sipërme dhe të poshtme

Ndonjëherë në pushim i detyruar Nuk ka nevojë për faqe, por ju duhet të kontrolloni daljen e paragrafëve në kufijtë e faqeve.

Për shembull, nëse rreshti i fundit i një paragrafi është Faqja aktuale nuk përshtatet, dy rreshtat e fundit të këtij paragrafi do të shtypen në faqen tjetër. Kjo është për shkak se vetia që e kontrollon këtë (të vejat, d.m.th. "rreshtat e varur në krye") është caktuar si parazgjedhje në 2.

P ( të vejat: 4; )
Nëse ndodh një situatë tjetër dhe vetëm një rresht i një paragrafi përshtatet në faqen aktuale, i gjithë paragrafi do të printohet në faqen tjetër. Vetia përgjegjëse për linjat e varura më të ulëta (jetimët) është vendosur gjithashtu në 2 si parazgjedhje.

P (jetimët: 3;)
Qëllimi i kodit të mësipërm është se për të parandaluar mbështjelljen e të gjithë paragrafit Faqja tjetër, të paktën tre rreshta duhet të përshtaten në faqen aktuale.

Për ta kuptuar më mirë këtë, hidhini një sy shembullit të përgatitur duke përdorur CodePen. Dhe këtu është një version i korrigjimit të të njëjtit shembull, është më i përshtatshëm për t'u testuar.

*, *: para, *: pas, *: shkronja e parë, p: rreshti i parë, div: rreshti i parë, kuota: rreshti i parë, li: rreshti i parë ( sfondi: transparent ! e rëndësishme; ngjyra: #000 !i rëndësishëm; kuti-hije: asnjëra
Meqë ra fjala, stilet CSS për printim janë një nga përjashtimet e pakta ku direktiva e rëndësishme! është absolutisht normale ;)

7. Heqja e përmbajtjes së panevojshme

Për të mos humbur bojën, duhet të hiqni çdo gjë të panevojshme nga versioni i printuar i faqes, të tilla si rrëshqitje të mëdha të bukura, reklama, mjete lundrimi në faqe dhe të ngjashme. Kjo mund të bëhet duke vendosur veçorinë e ekranit në asnjë elemente të panevojshme. Është shumë e mundur që do ta gjeni të drejtë të shfaqni vetëm përmbajtjen kryesore të faqes dhe të fshehni gjithçka tjetër:

Trupi > *:jo(kryesore) (ekrani: asnjë; )

8. Shfaqja e adresave të lidhjeve

Lidhjet, siç shfaqen zakonisht në faqet e internetit, janë krejtësisht të padobishme në shtyp, përveç nëse lexuesi i versionit në letër të dokumentit nuk e di se ku çojnë.

Për të shfaqur adresat e lidhjeve pas paraqitjes së tyre të tekstit, thjesht përdorni stilin e mëposhtëm:

A:pas (përmbajtja: " (" attr(href) ")";)
Sigurisht, me këtë qasje, shumë gjëra të panevojshme do të "deshifrohen". Për shembull, lidhje relative, lidhjet absolute në të njëjtin vend ku ndodhet faqja e printuar, lidhjet me spiranca etj. Për të mos rrëmuar faqen e printuar, do të ishte më mirë të përdorni diçka të tillë:

A:not():after (përmbajtja: " (" attr(href) ")";)
Duket e çmendur, sigurisht. Kështu që unë do të shpjegoj kuptimin të këtij rregulli në anglisht të thjeshtë: "Shfaq vlerën e atributit href pranë çdo lidhjeje që ka një atribut që fillon me http, por nuk përmban mywebsite.com."

9. Shkurtesat e deshifrimit

Shkurtesat në tekst duhet të vendosen në etiketë , dhe transkriptet e tyre duhet të përfshihen në atributin e titullit. Nëse i formatoni shkurtesat në këtë mënyrë, kuptimet e tyre janë shumë të lehta për t'u treguar në një faqe të printuar:

Abbr:after (përmbajtja: " (" attr(titulli) ")";)

10. Printim i detyruar në sfond

Në mënyrë tipike, kur shfletuesit japin një faqe për printim, ata nuk shfaqin ngjyrën e sfondit dhe imazhet e sfondit, përveç nëse u thoni në mënyrë eksplicite ta bëjnë këtë. Megjithatë, ndonjëherë e gjithë kjo duhet të shtypet. Vetia jo standardizuar print-color-adjust do të na ndihmojë këtu, e cila ju lejon të anashkaloni cilësimet e paracaktuara për disa shfletues.

Header ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )

11. Pyetjet mediatike

Nëse shkruani pyetje mediatike si kjo më poshtë, mbani në mend se rregullat CSS në pyetje të tilla nuk do të ndikojnë në versionin e printuar të faqes.

Ekrani @media dhe (gjerësia min.: 48em) ( /* vetëm ekran */ )
Pse është kështu? Puna është se rregullat CSS zbatohen vetëm nëse vlera e gjerësisë min është 48em dhe nëse lloji i medias është ekrani. Nëse e hiqni qafe këtë pyetje mediatike nga fjalë kyçe ekran , atëherë do të kufizohet vetëm nga vlera min-gjerësi.

@media (min. gjerësi: 48em) ( /* të gjitha llojet e mediave */ )

12. Shtypja e kartave

Aktuale Versionet e Firefox-it dhe Chrome mund të printojë harta, por, për shembull, Safari nuk mund ta bëjë këtë. Çfarë duhet të bëni kur printoni karta? Nje nga opsionet universale– përdorni harta statike në vend të atyre dinamike.

Harta ( gjerësia: 400 px; lartësia: 300 pikselë; imazhi i sfondit: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=refushal=roadmapngt "); -webkit-print-color-adjust: saktë; print-color-adjust: saktë; )

13. Kodet QR

Printimi i kodeve QR që përmbajnë lidhje të rëndësishme mund të përmirësojë shumë përdorshmërinë e versioneve në letër të faqeve të internetit. Ja një pjesë nga The Smashing Magazine ku mund të gjeni këshilla të dobishme në lidhje me këtë temë. Një prej tyre është përfshirja e adresave të tyre në formën e kodeve QR në faqet e printuara. Si rezultat, përdoruesi, për të hapur faqen nga e cila është bërë printimi në shfletues, nuk do të duhet të shkruajë adresën e tij të plotë në tastierë.

14. Rreth printimit të faqeve jo të optimizuara

Ndërsa punoja në temën e printimit të faqeve në internet, zbulova një mjet të shkëlqyer që ju lejon të përgatitni me lehtësi faqe jo të optimizuara për printim. Duke përdorur Printliminator

Etiketa:

• CSS
• vulë
• Zhvillimi i uebit

Shto etiketa