Cum sa iti faci CSS pentru tiparire
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
(2 votes, average: 5 out of 5)
Loading ...
Fara raspunsuri Subscrie
Cum comentezi?