Cum sa faci CSS pentru tiparire

Dan — Sat, 23 Feb 2008 14:32:10 +0000

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 catre fisierul CSS folosit trebuie sa mentioneze carui tip media este destinat. In mod normal, pentru afisarea pe ecran declaratia arata de genul:

media="screen" />

O declaratie pentru un fisier destinat afisarii informatiei in cazul tiparirii ar arata de genul:

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:

La piticu, desi lipseste Style Sheet-ul pentru print, CSSu-l pentru ecran este declarat corect:

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

Badge pe coltul blogului

Dan — Wed, 21 Nov 2007 18:37:05 +0000

De cand am adus vorba de pluginul care scoate nofollow-ul la comentarii si care afiseaza (la dorinta bloggerului) un badge pe un colt al blogului, toata lumea m-a intrebat cum sa-si puna asa ceva si ei. Nu plugin, ci doar un badge, cu diverse informati ori linkuri. HMTL-ul e generos, CSS-ul la fel, variante exista mai multe. O aleg pe cea mai simpla, care consta doar in scrierea unei linii de cod.

Crearea imaginii pentru badge nu cred ca pune nimanui probleme, eu recomand sa nu fie mai mare de 150x150pixeli, dar neaparat gif transparent, nu png. De ce? Internet Explorer 6 din pacate nu se descurca prea bine cu png-urile transparente ori semi-transparente, iar aproximativ 35% dintre utilizatorii de internet inca folosesc browserul respectiv (Firefox-ul si Opera nu au probleme, dar e bine ca badge-ul sa arate ok in toate browserele). Imaginea se pune undeva online ca sa se poatra ajunge la ea printr-un link.

Bun, ca avem imaginea, ne mai trebuie doar codul care vine imediat dupa deschiderea tagului , de preferat inaintea altor div-uri sau elemente HTML.

Ctrl-C, Ctrl-V in pagina, se modifica datele linkului badgeului si a locatiei imaginii, Ctrl-S si e gata. :)

dece? Tutorial » HTML & CSS