De la dezvoltatorul front-end Manuel Matuzovich.

La marcaje

Manuel Matuzovich

Fostul manager Microsoft Aaron Gustafson în octombrie 2016 a scris pe Twitter, un apel către Indiegogo, unde a atras atenția companiei că paginile cu detaliile comenzii nu pot fi tipărite.

Când am văzut acest tweet, am rămas șocată, pentru că de foarte mult timp nu numai că nu optimizasem pagina pentru imprimare, ci nici măcar nu mă gândisem la asta o secundă. S-ar putea să rezolv în mod constant probleme legate de redimensionarea browserului și să mă asigur că paginile site-urilor noastre funcționează perfect în orice dimensiune și orice formă, sau poate pentru că aproape niciodată nu tipăresc singur paginile. Oricum ar fi, am uitat complet de stilurile pentru printare, ceea ce este rău.

Optimizarea paginilor web pentru imprimare este foarte importantă deoarece este în interesul nostru să ne asigurăm că site-urile sunt cât mai accesibile utilizatorilor, indiferent sub ce formă. Nu este nevoie să ghiciți cine sunt utilizatorii și care va fi comportamentul lor: oamenii încă mai imprimă pagini de site-uri. Gândește-te doar la toate aceste articole sau bloguri, rețete, informatii de contact, cum să ajungeți acolo sau site-uri web imobiliare. Într-o zi, cineva, undeva, va încerca cu siguranță să imprime una dintre paginile pe care le-ați creat.

Am încetat să mai folosesc imprimanta acasă de mult pentru că se strică la fiecare 10 minute. Dar nu toți sunt ca mine.

Gaydon Pickering

Modele de design inclusive

Dacă găsiți aceeași problemă pe care o am și eu, atunci sper că acest articol vă va reîmprospăta rapid cunoștințele. Dacă încă nu v-ați optimizat paginile cu folosind CSS, următoarele sfaturi vă vor ajuta să începeți.

1. Stiluri de încorporare pentru imprimare

Cel mai bun mod stiluri de imprimare inline - descrie directiva @media din CSS.

Puteți, de asemenea, să înline stiluri pentru imprimare în HTML, dar acest lucru va necesita o solicitare suplimentară.

2. Testare

Nu trebuie să tipăriți pagina de fiecare dată când faceți o mică modificare. În funcție de browser, este posibil să exportați pagina ca Fișier PDF, faceți o previzualizare a paginii sau chiar faceți ajustări în browserul propriu-zis.

Pentru a ajusta stilurile de imprimare în Firefox, deschideți Panoul pentru dezvoltatori (Shift + F2 sau Dezvoltare → Dezvoltare web → Panou pentru dezvoltatori), tastați media emulate print în linia de introducere din partea de jos a ferestrei browserului și apăsați Enter. Fila activă se va comporta ca și cum tipul media a fost tipărit până când închideți sau reîmprospătați pagina.

Emulați stilul de imprimare în Firefox

V browser Chrome deschideți Instrumentele pentru dezvoltatori (CMD + Opt + I (pentru macOS) sau Ctrl + Shift + I (pentru Windows) sau Vizualizare → Dezvoltator → Instrumente pentru dezvoltatori), răsturnați sertarul Consolei (Esc), deschideți panoul Rendering, bifați caseta Emulați CSS Media și selectați Print.

Se emulează stilul de imprimare în Chrome

3. Unități absolute

Unitățile absolute nu sunt bune pentru ecrane, dar funcționează bine pentru imprimare. Este perfect sigur și chiar recomandat să folosiți unități absolute, cum ar fi cm, mm, in, pt sau pc în stilurile de imprimare.

secțiune (marja-inferioară: 2cm;)

4. Reguli separate pentru pagină

De asemenea, puteți defini parametrii care acționează pe această pagină: dimensiuni, orientare și margini - folosind directiva @page. Acest lucru este grozav dacă doriți ca toate paginile să aibă câmpuri specifice.

@media print (@pagina (marja: 1cm;))

Există două moduri de a crea o pagină imprimabilă:

1. Afișați în mod special o pagină fără meniu și design inutil într-un script separat.

2. Afișați aceeași pagină pe care o vizualizăm atunci când vizualizam site-ul, dar cu diferite stiluri consolidate, unde sunt ascunse elemente inutile.

Am avut sansa sa fac documente (facturi, facturi etc.) pentru printare. Asa ca am mers dupa prima varianta. Dar acesta este doar cazul meu. A doua varianta mi se pare mai flexibila.

Iată experiența mea, note:

1. Regula principală - păstrează-l simplu și oamenii vor fi atrași de tine (c) xs who. 🙂 Pe scurt, nu folosiți o varietate de modele. O persoană trebuie doar să citească textul tipărit, nu există nimic care să îl încarce cu un design inutil. Și să risipi vopsea în imprimantă.

2. Nu folosim imagini de fundal, oricum nu vor fi tipărite. Sau o vor face, dar nu în toate browserele. De macar Mi s-a întâmplat un fel de greblare similară.

3. Încercăm să folosim fundal alb, text negru. Dacă se întoarce, o mulțime de vopsea va fi irosită. Nu cred că trebuie să faci text colorat - mulți au încă o imprimantă alb-negru.

4. Dacă doriți ca următorul conținut să fie tipărit pe pagina următoare, introduceți bloc div cu întreruperea de pagină a clasei înainte de acest text. Descriem clasa în stiluri:

Încărcare de pagină (încărcare de pagină-după: întotdeauna;)

Încărcare de pagină ( pagina - pauză - după: întotdeauna;

textul din spatele acestui bloc va fi imprimat deja pagina noua... Funcționează în toate browsere moderne... Da, și nu același modern. Un IE până la versiunea a 7-a inclusiv eșuează. Dar trebuie să înregistrezi pe el!

5. Și așa, imprimați. Utilizatorul poate alege singur imprimarea. Te poți îmbrăca

window.onload = funcție () (window.print ();)

și butonul în sine:

Sigiliu

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

Acest buton va apărea când pagina este vizualizată, dar nu va fi tipărit deoarece am setat afișarea: niciuna; in style for media = „print”, adică în stiluri pentru dispozitivul de imprimare. Apăsarea butonului va afișa fereastra de imprimare.

Pentru cei care doresc să super-automatizeze procesul de tipărire, astfel încât, de exemplu, să deschidă pagina și imprimanta să înceapă imediat imprimarea paginii - calm-ți ardoarea sau cel care îți cere să faci asta. Nu am gasit aceasta metoda. Da, nu este. Pentru că are sens. Imaginează-ți, mergi pe site și acolo, prin javascript, se programează tipărirea a o sută de copii de pagini. Iar imprimanta se înnebunește și începe să imprime această grămadă de pagini fără știrea ta. Este ilogic? Este ilogic!

La un moment dat, un manager de proiect mi-a cerut din greu să fac așa ceva. A trebuit să explice toate acestea, să dea exemple, ca să înțeleagă că acest lucru nu se poate face și nu este necesar.
6. Dacă cineva se plânge că adresa paginii, titlul și alte rahaturi din anteturi și subsoluri sunt tipărite, sfătuiește-l să-și configureze browserul. Acest lucru nu este configurabil din partea site-ului. Cel puțin nu știu cum. De exemplu, în Firefox acest lucru este configurat în „Imprimare” - „Configurare pagină” - „Margini și subsoluri”

7. Apropo, în urmărirea precedentului. Să presupunem că utilizatorul a dezactivat ieșirea tuturor antetelor și subsolurilor, inclusiv adresa paginii. Adică, dacă după un timp utilizatorul se uită la tipărit, nu va putea înțelege de pe ce site l-a imprimat. Deci poate ar trebui să faceți o notă mică care să indice resursa, adresa paginii, sigla sau altceva.

8. Folosiți o dimensiune mare a fontului (în limita motivului, desigur). Principalul lucru este că totul este lizibil la imprimare.

10. Cred că trebuie să utilizați dimensiuni independente de dispozitiv - dimensiuni absolute. De exemplu, în, cm, mm, pt, pc.

11. Aici link util http://www.webdevout.net/browser-support-css#css2propsprint. Descrierea stilurilor poate fi găsită pe site-ul http://htmlbook.ru
În general, vă sfătuiesc să mergeți în jur lista CSS proprietăți chiar dacă sunteți un dezvoltator cu experiență. Am fost surprins să găsesc străini Proprietăți CSSși că unele proprietăți CSS sunt deja sigure de utilizat.

Bineînțeles că nu este lista plina sfaturi. Acestea sunt doar gândurile mele.

Înainte era doar un standard pentru a crea un link sau, pentru a fi mai precis, un buton etichetat „Versiune tipărită”. Sunt necesare pentru a face o imprimare pe hârtie. Versiunea tipărită conține toate informatie necesara, dar îi lipsesc elementele interactive: butoane, formulare și altele asemenea.

Aceasta înseamnă că cineva folosește manual sau automat un script
a luat documentul original și, eliminând tot ce nu este necesar, a creat o copie a acestuia,
mai convenabil pentru imprimare. Poate lucrare similară a trebuit sa
faci si tu.

Soluție - imprimați foi de stil

Unul dintre lucrurile grozave despre CSS este capacitatea
crearea de foi de stil care vizează o varietate de dispozitive
retragere. Suntem obișnuiți să creăm foi de stil pentru a afișa pagini
ecran, dar nu suntem încă obișnuiți să ne gândim la alte mijloace de afișare. ȘI,
după cum confirmă link-urile „versiunea tipărită”, despre tipărirea documentului
ne gândim doar la prezentarea documentului într-o formă diferită.

Dar acum nu avem de ce să ne temem, acum să creăm o versiune tipărită
document, avem nevoie doar de un document bine structurat și
foaie de stil pentru imprimare!

Astăzi puteți lua orice (X) document HTML și îl puteți pregăti pentru
imprimarea folosind foi de stil fără a atinge marcajul. Și acum în
problemele legate de crearea și sincronizarea celor două versiuni aparțin trecutului
document - unul pentru ecran, celălalt pentru imprimare. Și ce este cel mai mult
plăcut: este la fel de ușor ca decojirea perelor să o faci.

Ocolirea erorii elementelor plutitoare

Browsere Gecko precum Netscape 6.x sau Mozilla au
problemă cu imprimarea elementelor lungi plutitoare.
Dacă elementul plutitor a depășit limitele paginii tipărite, atunci
restul dispare complet fără să apară pe următorul
pagină.

Dacă site-ul dvs. este similar cu „A List Apart”, de ex. articolele din el sunt
într-un bloc plutitor mare, aceasta înseamnă că cititorii
imprimarea va primi doar prima pagină a articolului.

Soluția, așa cum v-ați aștepta, este să suprascrieți proprietatea
„Plutește” la blocul cu textul înainte de imprimare. Pe scurt, pentru toată lumea
elementele flotante sunt setate la regula de stil „float: none”.
Făcând acest lucru, veți readuce toate flotoarele la aspectul lor normal și
documentul se va imprima conform așteptărilor - pagina per
pagina până la capăt.

Deci, asta i-am sugerat lui Zeldman pentru ALA și cum
de îndată ce a făcut asta, problema tipăririi a dispărut. Familia de browsere
Gecko, această eroare încă nu este remediată (la momentul scrierii
articol), dar totuși poate fi ocolit cu ușurință prin metoda sugerată mai sus.

Să pornim la drum

Mai jos este o foaie de stil „tipărită” pe care A List Apart a folosit-o pentru a rezolva problema tipăririi elementelor plutitoare:

#meniu (afișare: niciunul;) #wrapper, #conținut (lățime: automat; chenar: 0; marjă: 0 5%; umplutură: 0; float: niciunul! important;)

Un început bun. Foaia de stil este eliminată complet meniul din dreapta Asa de,
că nu este tipărită și setează chenare și margini pentru
conținutul articolului în așa fel încât textul de pe orice pagină
distanțate uniform de la o margine la cealaltă a zonei de imprimare.

Problema pe care am văzut-o a fost că prea multe stiluri concepute pentru ecran au ajuns în procesul de imprimare.

Privind conținutul etichetei articole noi pe site-ul ALA, găsim (în grosul umpluturii) următoarele rânduri:

Avem un fișier de foaie de stil, print.css, căruia îi aplicăm
dispozitive de imprimare„Print” a fost specificat de valoarea atributului „media”.
Fișierul foaie de stil nucss2.css importat cu
Vor fi folosite constructele @import pentru a-l ascunde din Navigator 4.x
la afișarea paginii pe orice dispozitiv de ieșire (atribut
media = „toate”). Poate fi un afișaj, o imprimantă, un proiector, un sintetizator.
vorbire și așa mai departe. Pe măsură ce ne-am despărțit, am putea scrie în foaia de stil pentru
directivă de imprimare pentru culoarea de fundal a paginii și specificați fonturile în
pixeli.

Articol înrudit: Set de bază pluginuri pentru WordPress

Va fi acesta un mare dezastru? Nu, dar majoritatea browserelor
implicit nu imprimați fundalul paginii, ci dimensiunile specificate în pixeli
fonturile care sunt atât de potrivite pentru afișarea pe ecran nu sunt așa
util la imprimare.

Deci, să îmbunătățim puțin foaia de stil pentru imprimare și să rezolvăm alte câteva probleme cu aspectul componentelor sale.

Albirea fundalurilor

O varietate de culori sunt folosite pentru elementele din meniul din dreapta.
Dar din moment ce am ascuns meniul la imprimare, nu trebuie să schimbăm nimic.
Acest lucru ne scutește imediat de posibile dureri de cap.

Deoarece imprimantele nu imprimă în alb, vom face fundalul paginii.
alb. De asemenea, trebuie să eliminați toate imaginile de fundal care
folosit la afișarea paginii pe ecran.

Dacă apelăm la proprietatea de fundal pentru a ajuta, vom rezolva dintr-o singură lovitură
ambele probleme. Pentru a face soluția mai flexibilă, să setăm elementul
„Body” are un fundal alb, iar elementele „wrapper” și „conținut” au
fundal transparent (și astfel culoare alba
"Corp"):

corp (fond: alb;) #meniu (afișare: niciunul;) #wrapper, #conținut (lățime: automat; marjă: 0 5%; umplutură: 0; chenar: 0; float: niciunul! important; culoare: negru; fundal : transparent;)

Setarea culorii prim plan(culoarea fontului) nu a fost absolut
necesar, dar cel mai bine este să nu uiți de asta. Deci acum avem două
Element neplutitor (#wrapper, #conținut) cu fundal transparent, și
pagina - cu fundal alb.

S-ar putea să vă îngrijoreze modul în care Navigator 4.x tratează valoarea
„Transparent”, dar deasupra nasului: NN4.x acordă atenție doar meselor
stiluri cu atributul „media” setat la „ecran”. Exact ca
în cazul directivei @import, foile noastre de stil imprimabile sunt întotdeauna
ascuns de ochii orbi ai Navigatorului 4. Deci, nu este nimic aici
îngrijorare.

Dimensiunea fontului pentru imprimare

Foaia de stil generală setează dimensiunea fontului la 11 pixeli. Foarte
alegere proastă la imprimare. Familia de fonturi în sine este Georgia în primul rând.
și apoi serif - excelent pentru imprimare, ca fonturi serif
de obicei arată mai bine pe hârtie. Doar dimensiunea trebuie schimbată
font. Ca aceasta:

corp (fond: alb; dimensiunea fontului: 12 pt;)

„Așteaptă!” Probabil vei exclama. - "Punctele sunt rele!"

Ei bine, da, așa a spus și a avut dreptate - pentru ecran este imposibil
setați dimensiunile fonturilor în puncte. La imprimarea acelorași paragrafe
are același sens ca acum zeci de ani. Din moment ce gătim
foaie de stil pentru imprimare, apoi definiți dimensiunea fontului pentru „corp” la 12
punctele vor fi corecte și naturale.

Cu toate acestea, puteți seta orice dimensiune doriți
Fontul de 12 puncte este cel mai comun font. Si din moment ce in tabelul general
stiluri, dimensiunile tuturor celorlalte elemente ale paginii sunt date relativ la
dimensiune în elementul „corp”, am terminat.

Marginalia

Reguli de stil existente stabilite pentru marginile din stânga și din dreapta
(marginile) elementelor de ambalare și conținut 5% dimensiune. Aceasta înseamnă că ambele
părțile la articol vor fi „ loc gol", Și fiecare astfel de" spațiu gol "va fi
să fie 10% din suprafața imprimabilă. Aceasta este o consecință a faptului că blocul cu
textul articolului „conținut” se află în interiorul casetei „înveliș” și
fiecare dintre ele are marje de 5% pe partea stângă și dreaptă.

Articol înrudit: Yandex.Școala de webmasteri

Foaia de stil generală originală este setată la 15% umplutură.
pentru blocul „conținut”. Granițele ne-au dat deja 10%, așa că avem nevoie
adăugați încă 5%. Este destul de ușor de făcut:

conținut div # (marja-stânga: 10%;)

Într-o altă versiune a soluției, s-ar putea lăsa marginile (marja) înăuntru
odihniți și adăugați 5% la umplutura din stânga. De la blocul „conținut”.
nu are fundal vizibil, am obține același rezultat.

Din păcate, unele browsere au probleme cu adecvat
gestionând umplutura astfel încât elementele să se miște în jurul paginii
mai bine cu marje.

Link-uri la imprimare

A fost o întrebare dificilă - ce să faci cu hyperlink-urile? Evident pe
imprimare, ele pot să nu fie la fel de utile ca pe monitor, dar este adesea important
dați un indiciu la ce se refereau în original. Deci asta sunt
inventat:

a: link, a: vizitat (culoare: # 520; fundal: transparent; greutate font: bold; text-decor: subliniat;)

Acest lucru conferă legăturilor o culoare suficient de întunecată pentru a fi aproape
negru cu imprimare alb-negru rămânând în același timp roșu închis
pentru imprimare color. Font aldine iar sublinierea asigură că
linkul va fi evidențiat în textul tipărit.

Într-un browser care acceptă pe deplin specificația CSS2, putem
scoateți URL-urile link-urilor după ele însele, făcând astfel serviciul celor care au
care va avea la îndemână o imprimare și un browser. Mai jos este regula,
care se aplică numai blocului „conținut” și, prin urmare, adreselor URL
alte link-uri nu sunt tipărite:

#conținut a: link: după, #conținut a: vizitat: după (conținut: "(" attr (href) ")"; dimensiunea fontului: 90%;)

Încercați-l în browsere bazate pe Gecko - Mozilla sau Netscape
6.x. Pe tipărit, după fiecare link, veți vedea între paranteze cele aferente
la URL-ul ei.

Browserele care nu înțeleg această regulă de stil nu vor avea niciuna
efecte nedorite - linkurile vor fi în continuare roșu închis,
subliniat și îndrăzneț. Imediat după textul link-urilor nu va fi afișat
URL-ul asociat, asta-i tot.

Rețineți că spațiile înainte și după paranteze sunt
parte a regulii de stil - nu uitați de spații, așa cum ar trebui
să fie incluse în document.

Există o problemă estetică cu această nouă regulă. Faptul,
că acesta indică introducerea literală a valorii atributului în document
href.

După ce am căutat codul oricărei pagini de pe site-ul „A List Apart”, am făcut rapid
observați acolo o mulțime de așa-numite „legături relative” ale formularului
„/ Probleme / 144”. Acestea vor fi introduse în document așa cum sunt.
este, dar mi-ar plăcea să fie adrese URL complete.

În astfel de cazuri, CSS3 ne poate ajuta. Orice selector de atribute,
folosind operatorul ^ = selectează elementele pe baza începutului acestora
valorile atributelor. Astfel putem alege orice atribut href,
începând cu o bară oblică și introduceți acolo textul înlocuind
sens existent atribut.

#conținut a: după (conținut: „(//www.alistapart.com” attr (href) „)”;)

Această regulă convertește toate valorile de tip „/ issues / 144 /” în
„//Www.alistapart.com/issues/144/”. Această regulă nu va putea ajuta
cazul adreselor URL relative care nu încep cu o bară oblică, ci to
din fericire ALA nu foloseste acest tip de link.

ATENŢIE! IMPORTANT! După cum s-a spus, un selector ca ^ =
se referă la selectoare ale specificației CSS3. Validator pentru CSS de la
consorțiul W3 poate testa doar conformitatea cu specificațiile
CSS1 și CSS2. Fără a înțelege selectorul specific CSS3, validatorul ar face-o
raportați o eroare chiar și atunci când selectorul nu contrazice
recomandările din caietul de sarcini.

Decorarea partea de sus a paginii

Privind din nou la foaia de stil finală, I
am constatat că nu prea îmi place antetul paginii. A fost mai degrabă
nu în antetul în sine, ci chiar în „sublinierea” numelui site-ului. Acest
sublinierea desigur se termină acolo unde se termină imaginea
antet. Mi-a trecut brusc prin minte că ar fi frumos să întind asta
subliniați toată lățimea paginii.

S-ar părea atât de dificil să creezi o pagină pentru tipărire? Doar creăm același document cu text, dar fără niciun design și punem un link către el dintr-o pagină obișnuită. Dar motoarele de căutare au acum un filtru de conținut duplicat, iar webmasterii trebuie să ascundă paginile pentru imprimare de la indexare. În plus, vizitatorii site-ului nu sunt, de asemenea, foarte convenabil, pentru că mai întâi trebuie să mergeți la o copie a paginii de care au nevoie, în care nu există elemente de design, apoi să faceți clic pe butonul „Tipărește”.

Aici CSS ne poate veni în ajutor, ceea ce nu numai că va reduce volumul de muncă pentru webmasteri și va simplifica utilizarea site-ului pentru vizitatori, dar va permite și evitarea sancțiunilor din partea motoarele de căutare pentru conținut duplicat.

Structura paginii

Deci, să folosim mai întâi HTML pentru a crea structura documentului nostru. De exemplu, am decis să folosesc un aspect de tabel pentru a fi mai ușor de înțeles:

Navigare pagina principala Articole Contacte

Titlul articolului Această pagină poate fi tipărită. Va fi tipărit doar textul articolului.

Anunțul dvs. ar putea fi aici

După cum puteți vedea, avem un tabel cu trei celule care sunt dispuse orizontal. Totul este ca un site obișnuit: navigare în stânga, conținut în mijloc și în partea dreaptă unități de anunțuri sau știri. Fiecare celulă a primit propriul id. Pentru partea stângă este coloana stângă, pentru partea dreaptă este coloana dreaptă, iar pentru celula din mijloc cu conținut este conținut.

Adăugarea CSS

Acum, folosind CSS, trebuie să spuneți browserului ce stiluri ar trebui să folosească pentru a afișa elementele paginii pe ecran și ce ar trebui să folosească la imprimare. Creați style.css și scrieți următoarele acolo:

Ecran @media (corp (culoarea fundalului: # 0B73BD; familia fonturilor: tahoma; culoarea: #FFFFFF;) tabel (lățime: 600px;) #coloană stânga (lățimea: 140px; aliniere verticală: sus; dimensiunea fontului: 15px ;) #rightcolumn (lățime: 110px; vertical-align: top; font-size: 15px;) #conținut (culoare fundal: # 32AADB; padding: 5px; font-size: 15px;) a (culoare: # FFFF00; )) @media print (corp (culoarea fundalului: #FFFFFF; familia fontului: tahoma; culoarea: # 000000;) #conținut (culoarea fundalului: #FFFFFF; umplutură: 5px; dimensiunea fontului: 15px; culoare: # 000000; lățime: 600 px;) #coloană stânga (afișare: niciuna;) #coloană dreapta (afișare: niciuna;))

Primul bloc al CSS descrie modul în care elementele paginii ar trebui să fie afișate în browser. Blocul a fost luat în plus breteleînainte de care am adăugat @media ecran. Acest lucru face browserul să înțeleagă că aceste stiluri trebuie aplicate pentru a fi afișate pe ecran:

Așa arată pagina când este vizualizată într-un browser

Al doilea bloc descrie afișarea acelorași elemente de pagină ca primul, dar în în acest caz așa cum va arăta documentul la imprimare, indicat de parametrul de imprimare @media. Deoarece vrem doar să fim tipăriți continut util, apoi interzicem afișarea celulelor din stânga (#leftcolumn) și din dreapta (#rightcolumn) prin alocarea acestora valoarea afișată: nici unul.

Așa arată versiunea tipărită a paginii site-ului web.

Fișiere de stil separate

Nu este necesar să combinați totul într-un singur fișier de stil. În schimb, puteți utiliza două fișiere de stil și, atunci când le conectați la paginile site-ului, spuneți browserului ce fișier de stil să folosească pentru imprimare și care pentru afișare. Primul (pentru afișare) este determinat de parametrul media = „screen”, iar al doilea va fi folosit pentru tipărire și este determinat de parametrul media = „print”:

Stilurile pentru imprimare trebuie descrise după toate celelalte, altfel Opera va imprima un bloc de conținut împreună cu un fundal colorat care este destinat pentru ieșire în browser, și nu culoarea albă pe care am ales-o pentru imprimare.

De asemenea, la imprimare, reducem strict lățimea blocului de conținut la 600px, deoarece la 100% lățime imprimanta „tăie” o mică fâșie de text cu partea dreapta pagini. Vă rugăm să rețineți, de asemenea, că atunci când imprimați din Opera, marginea de la marginile foii este puțin mai mică decât în Internet Explorer iar rândurile de text de pe o coală de hârtie sunt mai largi.

Acum nu mai trebuie să creați pagini suplimentare pentru imprimare. Puteți informa utilizatorii despre posibilitatea de a imprima o pagină, de exemplu, folosind un link cu textul „printare”, când faceți clic pe el, va fi afișat un sfat cu un mesaj despre posibilitatea de a imprima direct pagina curentă fără un design.

Copierea articolului este interzisă.

• Traducere

3. Unități absolute

Unitățile absolute nu sunt foarte potrivite pentru versiunile pe ecran ale paginilor, dar pentru imprimare sunt exact ceea ce aveți nevoie. Este complet sigur pentru stiluri de imprimare, în plus, se recomandă utilizarea unităților de măsură absolute, cum ar fi cm, mm, in, pt sau pc.

Secțiune (marja-inferioară: 2cm;)

4. Proprietăţile paginilor

Puteți utiliza regula @page pentru a controla proprietățile paginii, cum ar fi dimensiunile paginii, orientările și marginile. Acest lucru se dovedește a fi foarte util, să zicem, atunci când este necesar ca toate paginile tipărite să aibă aceleași margini.

@media print (@pagina (marja: 1cm;))
Regula @page face parte din standardul Paged Media Module, care oferă multe lucruri grozave, cum ar fi alegerea primei pagini de imprimat, personalizarea pagini goale, poziționarea elementelor în colțurile paginii și. Poate fi folosit chiar și pentru a pregăti o carte pentru tipărire.

5. Controlul întreruperilor de pagină

Deoarece foile tipărite, spre deosebire de paginile web, nu sunt nesfârșite, conținutul paginilor web se rupe mai devreme sau mai târziu pe o coală de hârtie și continuă pe următoarea. Există cinci proprietăți pentru a controla întreruperile de pagină.

▍Pagină înainte de element

Dacă doriți ca un element să fie întotdeauna la începutul paginii, puteți pune o întrerupere de pagină forțată în fața acestuia folosind proprietatea page-break-before.

Secțiune (întreruperea paginii-înainte: întotdeauna;)

▍Pagină după element

Proprietatea page-break-after vă permite să setați o pauză de pagină forțată după un element. Folosind această proprietate, puteți, de asemenea, să refuzați pauza.

H2 (încărcare de pagină după: întotdeauna;)

▍Pagină în interiorul elementului

Proprietatea page-break-inside este utilă atunci când doriți să evitați împărțirea unui element între două pagini.

Ul (încărcare de pagină: evitați;)

▍ Rândurile suspendate de sus și de jos

Uneori în pauză forțată nu este nevoie de pagini, dar trebuie să controlați rezultatul paragrafelor pe marginile paginii.

De exemplu, dacă ultimul rând al unui paragraf este pagina curenta nu se potrivește, ultimele două rânduri ale acestui paragraf vor fi tipărite pe pagina următoare. Acest lucru se datorează faptului că proprietatea care o controlează (văduve, adică „top orfani”) este setată implicit la 2. Aceasta poate fi modificată.

P (văduve: 4;)
Dacă apare o situație diferită și doar un rând al unui paragraf se potrivește pe pagina curentă, întregul paragraf va fi tipărit pe pagina următoare. Proprietatea orfani este, de asemenea, setată la 2 în mod implicit.

P (orfani: 3;)
Semnificația codului de mai sus este aceea pentru ca paragraful să nu se înglobeze în întregime pagina următoare, cel puțin trei rânduri trebuie să încapă pe pagina curentă.

Pentru o mai bună înțelegere a acestui lucru, aruncați o privire la un exemplu pregătit cu CodePen. Și aici este o versiune de depanare a aceluiași exemplu, este mai convenabil să o testați.

*, *: înainte, *: după, *: prima literă, p: prima linie, div: prima linie, blockquote: prima linie, li: prima linie (fond: transparent! important; culoare: # 000 ! important; box-shadow: niciunul! important; text-shadow: niciunul! important;)
Apropo, stilurile CSS pentru printare sunt una dintre puținele excepții în care directiva! Important este absolut ok;)

7. Eliminarea conținutului inutil

Pentru a nu irosi cerneală, ar trebui să eliminați tot ce nu este necesar din versiunea tipărită a paginii, cum ar fi diapozitive uriașe frumoase, reclame, instrumente de navigare pe site și așa mai departe. Acest lucru se poate face setând proprietatea de afișare la none on elemente inutile... Este foarte posibil să găsiți corect să afișați numai conținutul principal al paginii și să ascundeți totul:

Corp> *: nu (principal) (afisaj: nici unul;)

8. Ieșirea URL-urilor link-urilor

Link-urile, așa cum apar de obicei pe paginile web, sunt complet inutile atunci când sunt tipărite, cu excepția cazului în care cititorul versiunii pe hârtie a documentului știe unde duc.

Pentru a afișa adresele link-urilor după reprezentările lor textuale, este suficient să folosiți următorul stil:

A: după (conținut: „(” attr (href) „)”;)
Desigur, cu această abordare, o mulțime de lucruri inutile vor fi „descifrate”. De exemplu, legături relative, link-uri absolute pe același site unde se află pagina tipărită, link-uri cu ancore etc. Pentru a nu înfunda pagina imprimată, ar fi mai bine să folosiți așa ceva:

A: nu (): după (conținut: "(" attr (href) ")";)
Pare, desigur, nebunesc. Prin urmare, voi explica sensul a acestei reguliîn limbajul obișnuit: „Afișați valoarea atributului href lângă fiecare link care are un atribut care începe cu http, dar nu conține site-ul meu.com”.

9. Decodificarea abrevierilor

Abrevierile din text ar trebui să fie plasate în etichetă , iar decriptarea lor trebuie inclusă în atributul title. Dacă stilați astfel abrevierile, semnificațiile lor sunt foarte ușor de afișat pe o pagină tipărită:

Abr: după (conținut: „(” attr (titlu) „)”;)

10. Imprimare forțată în fundal

De obicei, browserele, atunci când redă o pagină pentru imprimare, nu afișează culoarea de fundal și imaginile de fundal, cu excepția cazului în care li se spune în mod explicit să facă acest lucru. Cu toate acestea, uneori este necesar să imprimați toate acestea. Aici ne ajută proprietatea non-standard print-color-adjust, ceea ce ne permite să suprascriem setările implicite pentru unele browsere.

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

11. Interogări media

Dacă scrieți interogări media similare cu cea de mai jos, rețineți că regulile CSS din astfel de interogări nu vor afecta versiunea tipărită a paginii.

Ecran @media și (lățime minimă: 48 em) (/ * numai ecran * /)
De ce este așa? Acest lucru se datorează faptului că regulile CSS se aplică numai dacă lățimea minimă este 48em și dacă tipul media este ecran. Dacă scapi de această interogare media de la cuvânt cheie ecran, acesta va fi limitat doar de lățimea minimă.

@media (lățime minimă: 48 em) (/ * toate tipurile de media * /)

12. Tipărirea hărților

Actual versiunile Firefoxși Chrome poate imprima hărți, dar Safari, de exemplu, nu. Ce zici de imprimarea cardurilor? Unul dintre opțiuni universale- folosiți, în loc de hărți dinamice, statice.

Hartă (lățime: 400 px; înălțime: 300 px; imagine de fundal: url ("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png=visual_refresh) "); -webkit-print-color-adjust: exact; print-color-adjust: exact;)

13. coduri QR

Imprimarea codurilor QR care conțin legături importante poate îmbunătăți considerabil utilizarea paginilor web pe hârtie. Iată materialul The Smashing Magazine unde puteți găsi sfaturi utile pe această temă. Una este să includă adresele lor sub formă de coduri QR pe ​​paginile tipărite. Drept urmare, utilizatorul nu trebuie să-și introducă adresa completă pe tastatură pentru a deschide pagina din care a fost făcută imprimarea în browser.

14.Despre tipărirea paginilor neoptimizate

În timp ce intru în subiectul tipăririi paginilor web, am descoperit un instrument grozav care vă permite să pregătiți comod pagini neoptimizate pentru imprimare. Cu Printliminator

Etichete:

• CSS
• sigiliu
• dezvoltare web

Adaugă etichete