En este artículo explicaré otra de las ventajas de la maquetación sin tablas y el uso correcto de CSS: resolver el problema de imprimir una página web.

Como ya expliqué en el artículo Maquetación sin tablas, una de las ventajas de las mismas es la mejora de la accesibilidad del dispositivo. Esto quiere decir que la página web se verá correctamente (quizás no de la misma manera, pero se podrá leer perfectamente), en ordenadores antiguos o nuevos, en PDA o móviles WAP, e incluso en impresoras. Recordemos que las impresoras son un dispositivo de salida al igual que un monitor o un dispositivo braille.

Una de las bondades de CSS, es que se puede definir una hoja de estilos para diferentes tipos de dispositivos (enlace en inglés), incluso la impresora. Para definir un fichero con una hoja de estilos para una impresora solo hay que especificar el atributo media="print" en la línea de la sección <head> (enlace en inglés) donde se incluye el fichero:

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

Lo habitual es escribir una hoja de estilos normal para cualquier navegador, y otra para la impresora:

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

Crear la hoja de estilos para imprimir no es nada laborioso, se hace en 2 minutos. Tan solo se trata de copiar el fichero normal (en el ejemplo, estilos.css) y renombrarlo (en el ejemplo, imprimir.css). En el fichero de impresión solo tienes que desactivar la visualización de los elementos que te interesen con el estilo display:none, modificar colores que quizás no se vean correctamente en papel, y tamaños de letras o capas que puedan ser demasiado grandes para imprimir (recuerda que las unidades de medida (enlace en inglés) de letras y capas han de ser relativas - tanto por ciento o em -, y si usas alguna absoluta, la pantalla va en píxeles - px - y la impresora en puntos - pt).

#menuprincipal
{
display:none;
}

#menusecundario
{
display:none;
}

#contenidos
{
background-color: #FFFFFF;
color: #000000;
padding: 0;
margin: 0 ;
border-left: 1px none #C9BDAA;
border-right: 1px none #C9BDAA;
text-align: justify;
}

Normalmente, se suele desactivar la visualización de los menús. Éstos ocupan espacio, y no hace ninguna falta imprimirlos en papel. Lo ideal, es dejar el papel como si fuera un documento de un procesador de textos como OpenOffice.org Writer o Microsoft Word.

Para hacer tus pruebas sin tener que gastar una sola hoja de papel, utiliza el previsualizador de página (Vista preliminar en Firefox). Este será el aspecto exacto que tendrá la página una vez impresa.

Vista preliminar en Firefox de un artículo que escribí en mi antigua empresa Astureco-PFS Informática

Vista preliminar en Firefox de un artículo que escribí en mi antigua empresa Astureco-PFS Informática.