Cum să vă stilați site-ul pentru imprimare cu CSS

Ce legătură are imprimarea cu web-ul?

Cei mai mulți dintre noi trăiesc online, obținând toate informațiile noastre de pe web. Suntem conectați toată ziua, în fiecare zi, de pe mai multe dispozitive. Poate că ați auzit că tipăritul a murit când, de fapt, acest lucru cu siguranță nu este adevărat! S-ar putea să nu imprimăm la fel de des ca cândva, dar există situații în care vizualizarea conținutului pe un dispozitiv nu înlocuiește pur și simplu o copie tipărită pe hârtie. Aveți conținut de instrucțiuni valoros, cupoane valorificabile, instrucțiuni, exemple de portofoliu sau orice altceva pe care utilizatorii ar prefera să vadă în tipărire? Dacă da, configurarea regulilor de printare personalizate pe site-ul dvs. web va ajuta cu siguranță la formarea experienței pentru utilizatori.

Cum să proiectați pentru imprimare

Toată magia este conținută în CSS prin definirea stilurilor specifice tipăririi. S-ar putea să vă fie util să creați o foaie de stil print.css separată, astfel încât să fie separată de toate celelalte stiluri. Rețineți că nu toate site-urile au o foaie de stil de tipărire; aceasta este o caracteristică suplimentară și un pas în procesul de dezvoltare. Dacă nu sunt specificate stiluri de imprimare, stilurile implicite sunt utilizate pentru imprimare. Vom defini stiluri pentru a face lucrurile mai eficiente pentru imprimare, care vor trece peste orice setări implicite.

Convenția de denumire și stilurile specifice vor fi unice pentru foaia de stil a propriului proiect, dar aceste concepte se vor aplica. După ce sunt adăugate elementele de bază, parcurgeți foaia de stil implicită a site-ului dvs. web și căutați orice situație unică care necesită stiluri de imprimare pentru a asigura cea mai bună experiență de imprimare.

Considerații privind culoarea și aspectul

Majoritatea oamenilor preferă să imprime în alb-negru din cauza cheltuielilor cu cerneala colorată. De asemenea, există un contrast mai mare atunci când textul este negru și este imprimat pe hârtie albă. Probabil că sunteți familiarizat cu interogările media, deoarece acestea sunt esențiale în designul web modern și receptiv. Interogările media sunt, de asemenea, necesare pentru crearea stilurilor de imprimare.

Acesta este ceea ce va face textul din corp negru și va scăpa de orice culoare de fundal pentru o imprimare optimă:

@media print {
body {
color: #000;
background: #fff;
}
}


Sunt șanse ca textul să fie tipărit în Times New Roman. Nu este nimic în neregulă cu asta, dar ce se întâmplă dacă doriți să specificați un font diferit? La fel cum ați făcut în stilurile dvs. implicite, acest lucru se poate face și în tipărire. În timp ce suntem la asta, să nu uităm de înălțimea liniei.
body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}


Ascunderea elementelor inutile
Probabil că ați fost condiționat să păstrați display: none la minimum, dar acest lucru este în întregime în regulă pentru stilurile dvs. de imprimare. Ascunzând unele elemente, le oferiți utilizatorilor o modalitate mai bună de a imprima și păstrați tot ce nu este necesar de pe hârtie. Scopul este de a le permite să imprime în mod eficient cel mai important conținut, nu pagina web exactă.
		


Există elemente de pagină care nu sunt necesare, cum ar fi navigarea, subsolul, bara laterală și imaginile de fundal, așa că aici este display: none va fi util.
@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}


Articolele sunt adesea tipărite, așa că este grozav ca fiecare articol să înceapă pe o pagină separată. Este mult mai ușor pentru utilizator să-și organizeze imprimările dacă informațiile cheie sunt grupate și nu răspândite pe mai multe pagini.
Adăugând acest lucru la foaia de stil de imprimare, articolele vor începe întotdeauna pe o pagină nouă:
		


article {
page-break-before: always;
}


Păstrarea listelor neordonate împreună pe aceeași pagină este și o idee grozavă:
ul {
page-break-inside: avoid;
}


Să facem un pas mai departe și să facem același lucru pentru titluri, imagini, citate, tabele și alte elemente ale listei:
h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}


Aici este locul în care distanța poate fi într-adevăr reglată fin pentru imprimări. Nu se întâmplă prea des să vezi centimetri în design web, dar funcționează grozav în scopul de a determina marginile paginii. Regula @page este modul în care vom viza spațierea. Acest exemplu va permite 2 cm în jurul tuturor marginilor. Această măsurătoare poate fi personalizată pentru a permite mai mult sau mai puțin spațiu. De exemplu, utilizatorii dvs. ar putea dori să ia note și ar fi util să acordați o marjă mai mare.
		


@page {
margin: 2cm;
}


Dacă paginile sunt destinate să fie tipărite și puse într-un liant, rețineți că există opțiunea de a ajusta marginile pentru fiecare altă pagină. Pagina din stânga este pentru paginile 1, 3, 5... iar pagina din dreapta este pagina 2, 4, 6...
@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}


Personalizarea primei pagini este utilă în anumite cazuri. Folosind pseudo-clasa :first page, se poate determina stilul primei pagini tipărite:
@page :first {
margin: 1cm 2cm;
}



Imprimarea te stresează? Iată câteva sfaturi pentru a vă imprima proiectul ca un profesionist.
		


Idei de imagini și text introductiv
Acestea se pot aplica sau nu pentru site-ul dvs., dar este bine să le rețineți totuși.
Pentru a preveni tăierea și scurgerea imaginilor peste marginea paginii tipărite, adăugarea unei declarații de lățime maximă va împiedica acest lucru.
img {
max-width: 100% !important;
}


Un mesaj frumos de bun venit este un plus grozav. Conținutul tipărit va fi disponibil pentru o vreme, așa că este întotdeauna plăcut să includeți un mesaj prietenos sau un memento.
header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}


Acum, că am acoperit câteva dintre elementele de bază ale analizei tipăririi, este ușor să încorporați aceste idei în foaia dvs. de stil de imprimare. Deși imprimarea nu este ceea ce ne gândim în cele din urmă când folosim web-ul, este o modalitate excelentă de a oferi utilizatorilor tăi aceeași experiență grozavă, indiferent de modul în care accesează conținutul.
		



		
		
Doriți mai multe sfaturi de design? Abonați-vă la Layout!
		
Vom trimite cel mai nou design și conținut WordPress direct în căsuța dvs. de e-mail, o dată pe săptămână.
		

		
		Da, te rog!