Hartija: CSS para Impresión

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.

  1. <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
  2. <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.

[css]
#sidebar, #menu, #commentform, #adsense {
display:none;
}
[/css]

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.

Comentarios Total 1 comentario


jopicar
Publicado: 29/09/2008 1:29 am

Buena y simple utilidad!! gracias por compartirla y explicarla.
Un abrazo.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)