Juan Manuel Domingo, 27 de Enero de 2008 a las 13.16

Optimiza tu sitio para una impresión correcta mediante estilos CSS

A veces queremos imprimir alguna página web interesante, pero resulta un dolor de cabeza porque el contenido se pierde entre barras de navegación, publicidades, logotipos, etc., o peor, queda cortado y debemos imprimirlo en varias hojas y “pegarlas”. Otro problema es el color, generalmente se imprime en escala de grises (blanco y negro), y es muy difícil de leer el contenido impreso de algunos sitios. Todo esto se soluciona creando versiones para imprimir de cada una de las páginas, pero hay un modo mucho más sencillo de optimizarlas: Usando estilos CSS.

Los formularios, barras de navegación, etc. puede que se vean hermosos desde el navegador, pero molestan demasiado a la hora de imprimir contenido. Por medio de estilos CSS podremos generar versiones para impresión de nuestras páginas sin necesidad de duplicarlas.

Crea un nuevo archivo de estilos CSS: print.css
Agrega las siguientes líneas de código:
- body {font-family: arial,helvetica,sans; font-size: 13px; background:fff; color:000;}
  (Esto es para que al imprimir el texto sea negro sobre fondo blanco).
- a,a:visited,a:link {color:#000; text-decoration:none}
  (Esto es para que no se impriman subrayados los links).
- .noprint {display:none}
  (Esto hará desaparecer las barras de navegación, formularios, publicidad, etc).
Edita el código HTML de tu sitio encerrando todo lo que no quieras que se imprima (de nuevo, menús, publicidad, etc.), en el siguiente tag: <span class=”noprint”> . . . </span>
(Donde los puntos suspensivos no van y en su lugar irá todo el código de cada elemento que no deba imprimirse).
Por último, agrega <link rel=”stylesheet” media=”handheld,print” href=”print.css” /> dentro del <HEAD> de tu página.

¡Listo! ahora cada vez que alguien quiera imprimir una página de nuestro blog o sitio web no tendrá problemas, economizará tinta y papel y podrá leer el contenido sin esfuerzo.

Fuente: Digital Inspiration