unijimpe

Normalmente cuando se implementan Webs estas se preparan para verse adecuadamente en los Browsers, pero no se los prepara para ser impresos de manera correcta, para ayudarnos con este trabajo tenemos Hartija el cual es un CSS especialmente preparado para impresión.

Problemas en la Impresión
Uno de los principales problemas para la impresión son los colores pues normalmente en los webs se utilizan colores que se adecuan a la pantalla que hacen contraste con el fondo del diseño, pero estos colores no son necesariamente adecuados para impresión.

Además de ello no es adecuado en la versión de impresión el mostrar el Menú de navegación, los formularios, la publicidad, etc. Estos deben ocultarse en la versión de impresión.

Utilizando Hartija
Primero deescargamos los archivos de Hartija Downloads, extraemos el archivo y copiamos el archivo print.css al directorio de css de nuestro web. Luego de ello incluimos este estilo en nuestro HTML, ello lo hacemos utilizando el atributo media=»print», esto hará que este CSS solo se interprete para cuando accedemos a la versión de impresión mientras que para el browser este se seguirá viendo como antes.

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

Notese que nuestra hoja de estilos normal es llamada screen.css y la nueva hoja de estilos especial para impresión es llamada print.css. Hasta este punto ya tenemos nuestra versión de impresión funcionando correctamente.

Ocultando Bloques
El siguiente paso es ocultar el los bloques que no deseamos mostrar cuando se imprime nuestra página. Esto lo hacemos agregando es estilo a los elementos que deseamos ocultar, esto lo hacemos al final del archivo print.css.

#sidebar, #menu, #commentform, #adsense {
	display:none;
}

Si desean ver el funcionamiento de esta utilidad pueden ver la versión para impresión de este blog, en donde he ocultado, la publicidad, el sidebar, el menú y el formulario de contacto.

Posts Relacionados

• BlueTripCSS Framework
• Controlar el redimensionado de textarea con CSS
• CSS Impress
• Eliminar contornos con CSS
• Centrar contenido con CSS