O pagina pentru tiparire are doar textul important, fara sidebaruri, headere. Cu un CSS destinat printului nu e nevoie de generarea altei pagini. CSS-ul are un media type, unde se specifica pentru ce mediul folosit: screen, print, handheld, etc.
O mare problema din punct de vedere formal sau de design, cum vreti sa-i spuneti, a blogurilor si a unor siteuri este ca tiparite arata prost. Pe ecran sunt desenate ok, dar cand e vorba de print, treaba se strica. Majoritatea publicatiilor online ce se vor serioase au cate un buton de tiparire langa articole/posturi care genereaza o pagina pentru tiparire doar cu continutul important, fara sidebaruri, headere, alte linkuri, etc. Totusi, treaba ar putea fi mult mai simpla folosind un CSS ok destinat printului.
Tipuri de CSS
CSS-ul are o functie numita media type, unde se specifica pentru ce mediu este destinat Cascadin Style Shhet-ul respectiv. Tipurile de medii suportate de CSS2 (standardul actual conform W3C) sunt dupa cum urmeaza:
all – CSS-ul este folosit pentru toate mediile
aural – destinat sintetizatoarelor vocale, cititoarelor vocale
braille – dupa cum ii spune si numele: pentru echipamente cu feedback tactil destinate nevazatorilor
embossed – pentru imprimante braille
handheld – dedicat telefoanelor mobile sau paratelor “tinute in mana”: PDA, smartphone, etc.
print – CSS destinat tiparirii pe hartie sau previewului pentru tiparire, tip despre care o sa vorbesc mai departe.
projection – pentru proiectii sau tiparire pe materiale transparente
screen – modul normal pentru ecrane de calculator sau telefoane mobile avansate
tty – terminale cu latime fixa de caractere: gen telefoane din generatii vechi. nu este recomandata definirea in pxeli a elementelor pentru acest media type.
tv – ultimul tip, dupa cum ii spune si numele – destinat televizoarelor sau ecranelor similare, adica: color, rezolutie mica, posibilitate redusa de scroll, sunet disponibil.
Declararea CSS-ului
CSS-ul este bine sa fie extern, intr-un fisier cu extensia .css. Declaratia/linkul din <head> catre fisierul CSS folosit trebuie sa mentioneze carui tip media este destinat. In mod normal, pentru afisarea pe ecran declaratia arata de genul:
<link rel="stylesheet" type="text/css" href="link-spre-fisierul -css-destinat-ecranului.css" media="screen" />
O declaratie pentru un fisier destinat afisarii informatiei in cazul tiparirii ar arata de genul:
<link rel="stylesheet" type="text/css" href="link-spre-fisierul -css-destinat-tiparirii.css" media="print" />
Structural arata la fel, difera doar media type-ul.
Ce contine CSS-ul pentru tiparire
In primul rand, trebuie avut in vedere ca atunci cand e specificat printul ca media type, backgroundul nu este luat in considerare. Ne adresam unei suprafete albe – hartia. Sa copiezi bucati din CSS-ul pentru ecran poate fi o solutie foarte proasta, mai ales daca ai un background inchis la culoare si text alb sau gri in pagina afisata pe ecran – text alb pe fond alb nu se prea citeste. :)
Pentru a evita erori de genul, e bine ca de la inceput sa fie definita foarte clar culoarea fontului si backgroundul, chiar ca nu e luat in considerare de multe browsere, e o masura de siguranta in plus.
background-color:#fff; /*background alb*/
font-color:#000; /*font negru*/
Urmeaza stabilirea fontului/familiei de fonturi si marimea (de exprimat in pt – puncte tipografice). In caz contrar este folosit defaultul de browser (va fi un font cu serife – pe hartie se citeste mai usor si probabil 12pt). Eu prefer fonturi fara serife si pe hartie, imi par mai elegante.
Exemplu. Prima linie in CSS-ul pentru print la mine arata asa:
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12pt; background-color:#fff; color:#000;}
Intr-un final vine partea cea mai importanta: scoterea elementelor inutile. Sidebarul/sidebarurile sunt complet in plus pe hartie. Nu are cine sa apese pe linkuri si nici de ce sa le vada, trebuie sa dispara. La fel si footerul – nu intereseaza pe nimeni. Ar mai putea fi vorba de navigare si elemente neinteresante. De preferinta, doar continutul trebuie sa ramana vizibil. Eu pe langa toate astea am mai scos si comentariile. Cel care tipareste un articol de pe internet are nevoie de o resursa pe hartie, de continut, nu de altceva.
#nav, #sidebar, #sidebar2, #footer, .navigation-up-post, .navigation-under-post, .block-comments {display:none;}
Tot ce e inutil se scoate cu diplay:none. Se identifica elementul nedorit (div, bloc de text, lista etc) si se trece in seria cu display:none. O singra declaratie e sufienta pentru toate elementele, daca sunt separate prin virgula.
Nota: Comentariile sunt de obicei intr-o lista cu clasa .commentlist, eu am incadrat-o intr-un alt div .block-comments in tema mea vizuala.
Studiu de caz
Pentru final am ales si doua studii de caz. Un blog, zic eu, destul de cunoscut, al lui Piticu si un site de ziar, iarasi cunoscut: Evenimentul Zilei. Niciunul dintre siteuri nu are CSS pentru print, dar nu arata la fel pe hartie (ma rog, arata unul mai prost decat celalalt).
EVZ-ul arata pur si simplu prost si este greu de citit, iar pagina lui piticu este kilometrica datorita sidebarului. 4 din cele 11 pagini nu intereseaza pe nimeni. De ce daca ambele nu au CSS pentru print arata diferit? La evz CSS-ul destinat ecranului este prost declarat, nu are media type si este considerat gloal:
<link href="http://evz.ro/template/css/main.css" rel="stylesheet" type="text/css">
La piticu, desi lipseste Style Sheet-ul pentru print, CSSu-l pentru ecran este declarat corect:
<style type="text/css" media="screen">
@import url( http://www.piticu.ro/wp-content/themes/shadedgrey-21/style.css );
</style>
Observati ca CSS-ul este declarat in moduri diferite. Nu conteaza foarte tare, exista mai multe moduri de a adauga css-ul extern si o sa revin pe subiect cu amanunte.
In contrast, cum ar arata acest post tiparit (prin screen dupa print preview in firefox, ca si mai sus):
Exemplu
In CSS-ul pentru print se pot seta toate elementele, la fel ca si in cel pentru ecran, cu diferenta ca dimensiunile in pixeli nu-si au locul, iar setarea latimii elementelor nu are niciun sens . In rest: fonturi, dimensiuni, margini, padding, culori, stiluri de liste, etc. – toate pot fi “personalizate”.
Pentru cei prea lenesi sa-si creeze propriul CSS, pot porni de la al meu, facand modificarile de rigoare – download.
(Se salveaza in folderul temei vizuale instalate – in cazul Wordpressului)
Alte resurse
Pentru cei care vor sa citeasca si in engleza, poate un pic mai detaliat decat am scris eu, trei resurse foarte bune:
- Eric Mayer in A List Apart: Going to Print
- Smashing Magazine – Printing the Web: Solutions and Techniques
- Specificatiile W3C – CSS Print Profile
Aboneaza-te la RSS feed
Un tutorial foarte bun, mersi!
Excelent tutorialul, din păcate prea puţină lume dă importanţă stylesheet-urilor pentru tipărire.
La ce-a spus Dan mai adaug un pont: uneori e util să aplicaţi pe diverse elemente clase “no-print” sau “print-only” pe care să le folosiţi pentru a decide selectiv ce să apară sau nu la print. De exemplu, aveţi un DIV footer care vreţi să apară la print, dar în el aveţi un rînd care nu vreţi să apară. Îl încadraţi într-un SPAN cu clasa “no-print” iar în CSS-ul de printare îi aplicati display:none. Similar, puteţi avea ceva ce vreţi să apară DOAR la printare (un text de copyright de exemplu). Îl marcaţi cu clasa print-only, în CSS-ul normal puneţi display:none iar în cel de printare nu faceţi nimic (deci va apărea).
Pentru cei interesaţi de încă un studiu de caz, vedeţi site-ul meu. În sursa paginii căutaţi după media=”print” şi veţi găsi adresa CSS-ului de printare. Vedeţi ce-am făcut în el. Daţi şi print-preview ca să vedeţi efectul.
ce spui tu tine mai mult de workflow, dar e o sugestie buna :)
Buna
iti citesc blogul de ceva vreme si am observat articole mai mult decat interesante, in special cele referitoare la atragerea de trafic. Acest blog a fost unul dintre factorii care m-au determinat sa incerc sa imi fac si eu un blog. Cum un blog personal nu prea are sens pentru mine ma gandeam la un blog colectiv nisat pe domeniul economisire/investitii.
Din pacate, fiind un profan intr-ale wordpressului am intampinat dificultati tehnice. Una dintre ele esta faptul ca imi apare http://funinvest.ro/despre asta cand vreau sa dau pe o pagina noua. Cred ca are legatura cu .htaccess, mai exact cu lipsa lui, dar de fiecare data cand incerc sa il uploadez cu Filezilla, aceta dispare.
Sper sa ma poti ajuta, si iti multumesc pentru ceea ce scrii, chiar daca nu. :)