Consells per al full d'estils d'impressió
Per posar en pràctica en el //print.css// el que s'ha explicat anteriorment, només cal que tingueu en compte un seguit de consells:
- Cal eliminar tot rastre d'elements de navegació. Un cop impresa la web, no serveix de res el menú de navegació, per tant cal eliminar tot allò que no formi part del contingut. Per això només s'han de cercar tots els identificadors i afegir //display:none//.
#menu, #peu, #capcelera, ..., .noimprimir {
display: none;
}
- Utilitzeu pt per determinar **la mida del text**. Els valors **px**, **%**, **em**, etc., són mides absolutes utilitzades per mostrar d'una mida determinada la informació en pantalla.
body {
font-size: 10pt;
}
- Utilitzeu tipus de lletra llegibles. Un tipus de lletra, font, que es veu bé a la pantalla, un cop impresa segurament no es veu igual. El tipus d'**Arial**, **Courier New** per a ample fixe, etc., us poden ser molt útils.
body {
font-family: Arial, sans-serif;
font-size: 10pt;
}
- Utilitzeu l'ordre float:none. Els elements flotants donen problemes amb alguns navegadors. Elimineu tots els elements flotants que no necessiteu, o en tot cas:
float:none
- Especifica el fons i el color de lletra per defecte. El fons sempre blanc i la lletra amb un bon contrast, negre o similar.
body {
background: #fff;
color: #000;
}
- Les taules s'imprimeixen sense l'aparença de la pantalla. Per defecte les taules s'imprimeixen sense les vores, en tot cas es pot utilitzar el mateix codi d'estil CSS de l'aparença en pantalla, per a l'aparença d'impressió. Aquesta norma també la podeu utilitzar per altres elements de la web com formularis.
- Per mostrar els enllaços utilitzeu
a[href]:after . Els enllaços es mostraran de color blau i entre parèntesis, a la dreta del text enllaçat.
a[href]:after {
content: " (Enllaç " attr(href) ")";
display: block;
color: blue;
text-decoration: none;
}
Això farà que el text enllaçat alhora d'imprimir-se es mostri justament al costat utilitzant (Enllaç http://...) en blau i sense subratllat.
- Podeu utilitzar la mateixa opció per les imatges, però amb l'atribut
alt=""
img[alt]:after{
content: " (Imatge " attr(alt) ")";
display: block;
color: ccc;
}
Fer plantilles CSS per a la impressió és el mateix que per a la presentació en pantalla. Retoqueu, deseu, refresqueu la web, previsualitzeu la impressió i si no us convenç torneu a començar. Recordeu però que és important eliminar els elements que no són útils en la lectura d'un full imprès com elements de navegació, anuncis, imatges animades, etc. Finalment el codi obtingut serà més curt i net que en el cas de la presentació en pantalla.
Tornar a l'inici de la pràctica
