Format de pàgina d'impressió

No hi ha res pitjor que un cop impresa una pàgina trobar que falten les últimes paraules de cada línia. També pot resultar molest, i una despesa innecessària de paper, quan les columnes de la dreta i l'esquerra apareixen, deixant un espai mot petit pel contingut, utilitzant en la impressió més fulls del necessari.

De forma general els comandaments de CSS que necessitareu per donar format a la pàgina són:

  width: 100%; margin: 0; float: none;

Aquests comandaments s'hauran d'aplicar a tots els elements contenidors, <div> o <span> per a les disposicions de pàgina CSS, així com per a les disposicions de taules i de formularis, per assegurar que el contingut de la pàgina s'estén per tota l'amplada del full de paper. Així, el comandament CSS complert seria semblant a:

#contenidor, #contenidor2, #contingut {
width: 100%; margin: 0; float: none;
}

table, form{
width: 100%; margin: 0; float: none;
}

Cal canviar el tipus de lletra?

Alguns fulls d'estil d'impressió canvien la mida de la lletra, habitualment a 12pt, però generalment no és una bona idea, ja que si els usuaris incrementen la mida de la lletra a la pantalla, llavors a la impressió també serà més gran... llevat que s'especifiqui una mida fixa de lletra en el full d'estil de la impressió.

Altres fulls d'impressió canvien el tipus de font, font-family, a un tipus de la família serif, per exemple Times New Roman, ja que són de més fàcil lectura en format imprès. Tant si trieu una opció com l'altre, cal que tingueu present que els usuaris poden sentir-se una mica desconcertats en veure, en el format imprès, un tipus de lletra diferent al de la pantalla.

També cal que tingueu en compte que, per defecte, les imatges i colors de fons no s'imprimeixen. De tal manera que potser en algun cas caldrà canviar el color del text per tal que hi hagi un contrast raonable del text en l'absència del fons.

Enllaços

Moltes vegades les impressions són en blanc i negre, per tant cal que us assegureu que els enllaços tenen un contrast suficient en l'entorn del text. En el cas que no sigui així, assigneu als enllaços un color més fosc en la versió impresa. Per exemple:

a:link, a:visited {color: #781351}

Tornar a l'inici de la pràctica

Valid XHTML 1.0 Strict Valid CSS Level Double-A conformance icon, 
          W3C-WAI Web Content Accessibility Guidelines 1.0