Creando páginas imprimibles con CSS

Una de las grandes ventajas de trabajar con estándares (lease XHTML y CSS ) y separar el Contenido de la Forma, es el hecho de que las páginas pueden verse bien en cualquier medio de difusión: Pantalla, Impresión, Palm, WebTV, etc. Como el Contenido (la página XHTML ) no cambia, se puede adaptar Forma con distintas hojas de estilo CSS enfocadas a medios específicos lo que nos evita el trabajo de crear paginas para cada medio. En este artículo se explica como aprovechar el potencial de CSS para que nuestras páginas se vean bien incluso al imprimirse.

Seleccionando nuestro Objetivo

Es importante antes de empezar definir claramente que páginas necesitan estilos para impresión. Por ejemplo en nuestro sitio web, sólo los artículos de nuestro blog, por el momento, cuentan con esta característica. Se debe tener en cuenta que hay páginas del sitio que no están hechas para ser impresas, como por ejemplo la página de inicio, porque Internet obviamente es un medio muy distinto a los tradicionales.

Hojas de Estilo para Pantalla y para Impresora

El primer paso que se debe realizar es declarar en el head de nuestra página que hoja de estilos afectará un medio específico, lo que se hace de la siguiente forma.

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

El parámetro media es lo que permite discriminar a que medio afectará la hoja de estilos correspondiente. En nuestro caso tenemos una hoja de estilos para el medio "screen", que es la pantalla de computador común y corriente, y otra hoja para el medio "print".

Esta es la forma más fácil de trabajo y es la que ocuparemos en este artículo. Sin embargo, es muy usado que que la hoja de estilos general afecte a todos los medios incluyendo el medio print (especificando media="all" en vez de media="screen" o simplemente no especificando medio), por lo que la hoja de estilos de impresión debe trabajar eliminando el formateo de la hoja de estilos general. Ése es un proceso epecífico para cada sitio por lo que no ha sido ocupada esa opción en este artículo.

Ocultando lo indeseado

Ahora empezamos a trabajar en nuestra hoja de estilos para la impresión. El primer paso consiste en ocultar las zonas de nuestra página que en una impresión normal no debieran ser vistas, como por ejemplo: Barras de Naveagación, Menús, Breadcrumbs, Cuadros de Herramientas, Formularios, etc. En este punto hay que aclarar que estamos trabajando sobre una página bien estructurada que sigue los estándares HTML o XHTML , de otro modo el asunto se hace más difícil.

Suponiendo que tenemos 3 divs para ocultar: #Encabezado, #Menu y #Publicidad, debemos declarar en nuestra hoja de estilos, lo siguiente:

#Encabezado, #Menu, #Publicidad{
  display: none;
}

Debemos hacer esto con cada elemento que deseemos ocultar.

Ajustando todo al Área Imprimible

Debemos ahora hacer que nuestro contenido se ajuste exactamente al ancho de la hoja que se usará para impresión. El ancho puede variar dependiendo del tipo de hoja, por lo que el ancho de nuestros elementos contenedores (por ejemplo un div #container) debe ser relativo, lo que se consigue con la siguiente declaración.

body, #container{
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

Podríamos haber especificado width:100%, pero según la experiencia de Eric Meyer mostrada en el Artículo ALA's New Print Styles, es preferible ocupar auto. Es preciso aplicar float:none para eliminar un problema de los navegadores Mozilla con elementos flotantes.

Tipografía para impresión

Es el momento ahora de trabajar sobre el texto. Debemos llevar todos nuestros textos a una fuente de fácil lectura. En mi experiencia la fuente Arial en tamaño 10 puntos es una buena opción, pero puedes considerar subir el tamaño a 11 o 12 puntos.

body, p, td, th{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  color: #000;
  background: #fff;
}

Nota que aparte de ajustar el tipo de letra y su tamaño, hemos especificado el color negro y el fondo blanco como valores por defecto. Para dar una mejor apariencia al documento, podemos especificar un tipo de letra distinto para los títulos.

h1, h2, h3, h4, h5, h6{
  font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
}

Podemos cambiar el color de otros elementos para que resalten en nuestro documento

blockquote, pre, code, cite{
  color:#666;
}

Otros Ajustes

Lo presentado anteriormente es un formateo básico. Tu sitio web seguro necesitará otros ajustes, por lo que debes tener en cuenta los siguientes puntos:

• Las imágenes de fondo no son impresas por los navegadores, por lo que no debes ocuparlas.
• Las tablas se muestran sin fondo y sin líneas de separación por lo tanto debes especificar un estilo para ellas como por ejemplo:

  table{
  border-collapse:collapse;
}
td, th{
  border:1px solid #666;
}

• Puedes crear texto específico para la impresión, como por ejemplo un pie de página con la información de derecho de autor del material. Como no queremos que se vea en pantalla ocupas la propiedad display: none pero esta vez en la hoja de estilos de la pantalla.

Más Información

Visita el sitio web de Eric Meyer, o sus artículos en A List Apart: Going to Print y ALA’s New Print Styles. Si te interesa puede conocer otros tipos de medios distintos a screen y print en la página Media Types de la W3C .