Configurar CSS para mejorar impresión de nuestro sitio web

lunes, mayo 09, 2011
COMPARTE EL POST

print

Es muy curioso pero es cierto, no hay muchos sitios web que dediquen un espacio del diseño a presentar un buen contenido al momento de que el usuario decida imprimir; es decir, no muchos sitios preparan sus páginas para ser impresas, terminando en un alboroto total.

Hoy vamos a ver cómo configurar nuestro sitio con CSS para mejorar la impresión, para que cuando el usuario de imprimir, sólo salga el contenido que le importa y nada más.

¿A qué te refieres exactamente?

Si todavía no entienden lo que estoy diciendo les daré un ejemplo. En Firefox tenemos la posibilidad de pre visualizar cómo va a ser impresa la página web que queremos imprimir.

image

El ejemplo que tomo es de una noticia del Universal, y como podemos ver, el formato no es el mejor para que la noticia sea impresa, haciendo que el usuario decida copiar y pegar la información en un documento de procesador de textos.

Entonces para eso vamos a usar los estilos CSS, para configurar bien nuestra página, y que al momento de imprimirla no decepcionemos al usuario.

Configurando CSS

Lo que tenemos que hacer es mencionar el tipo de “media” que queremos usar para activar ciertos estilos a nuestra página, siendo el siguiente necesario para configurar la impresión:

<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print” >

o también este directamente en nuestro archivo:

<style media='print' type='text/css'>

Después vamos a buscar las capas, id’s o estilos que no queremos que aparezcan al momento de imprimir y hacemos lo siguiente:

#id1, .estilo1, h3, #id2, .estilo2{
     display: none;
}

Obviamente hay que cambiar los nombres que puse arriba por los de ustedes, de esa forma tendrán un sitio más o menos así:

image

¡Síguenos en Twitter!


Deja tu comentario