Muchas veces cuando se diseña un sitio uno de los detalles que se pasa por alto es preocuparnos por como lucirá una impresión del mismo. El diseño de impresión va a estar controlado por una hoja de estilo aparte en donde colocaremos todas nuestras reglas.

Una pregunta que muchos se hacen es si es realmente necesario contar con esta hoja de estilo. Si me preguntan a mi, la respuesta es sí, es necesario en cada sitio. Muchas veces nuestros lectores tienen intenciones de retener la información que les ofrecemos, y para esto recurren a la impresión. Por eso que mejor que brindarles una impresión amigable.

Introducción

Lo primero que debemos hacer es insertar nuestra hoja de estilo en nuestro Header de la siguiente forma:

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

Lo que esto significa es que la print.css solo sera “llamado” cuando se requiera una impresión.

Ok, pero que incluyo en esta hoja de estilo?

Básicamente esta hoja de estilo va a re-escribir las reglas de nuestra hoja original, podremos borrar todo lo que no consideremos redundante de imprimir, como por ejemplo (en Eliseos.net) el Sidebar, definir el tamaño de la fuente base, en lugar de usar px (pixel) usaremos pt (points).

Darle formato a nuestra fuentes.

Quizás el paso mas importante, en este paso vamos a decirle a nuestra hoja de estilo que haga las fuentes lo mas legible posible, para eso podemos usar usar:

body {
 font:12pt "times new roman",times,serif;
 background:none ! important;
 color:#111 ! important
}

De esta forma nos aseguramos que el color siempre sea el negro y un tamaño base legible de 12pt.

Definir el tamaño de la impresión

Este es un paso optativo, ya que lo que vamos a definir el tamaño de container o wrapper. Tené en cuenta que los siguientes valores no son universales, tendrás que ajustarlos a tu diseño.

#content,#wrapper {
 width:auto;
 border:0;
 margin:0 5%;
 padding:0;
 float:none !important
}

Le estaremos dando a nuestro wrapper un tamaño total de pagina ya que mas adelante eliminaremos nuestra Sidebar. Por eso que antes te mencione que este paso es optativo y debes tener cuidado cuando lo trabajes.

Remover lo innecesario

Como lo mencione anteriormente una acertada medida es no imprimir todo aqello que no sea necesario. Para llevarlo acabo solo tenemos que usar la propiedad display:none por ejemplo:

#nav,#sidebar,#header {
 display:none
}

Links

Una buena idea es darle un poco de contraste a nuestro links para que el usuario los pueda diferenciar:

a:visited,a:link {
 text-decoration:underline;
 color:#781351
}
 
#post img a:after {
 content:" (" attr(href) ")";
 font-size:90%
}

La segunda linea es un detalle que añade la dirección del link que se esta imprimiendo inmediatamente después (en este caso) después de una imagen.

Saltos de pagina

Otra muy buena idea es usar los saltos de pagina para un mejor legibilidad. Estos saltos los podemos usar para que los comentario de una entrada se impriman en la hoja siguiente, o también que las notas de pie de paginas vallan a otra hoja.

#comments,#notas_al_pie {
 page-break-before:always
}

Un poco de estilo a los encabezados.

Otro detalle mas para aumentar la legibilidad podría ser centrar nuestros encabezados y darles otra familia de fuente para resaltar.

h6,h5,h4,h3,h2,h1 {
 font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif
}
 
#header h1 {
 text-align:center;
 font-size:42pt;
 font-style:italic;
 margin:0
}

Hoja Final

Luego de ver cada estilo y sus propiedades nuestra hoja de impresión lucirá de la siguiente manera:

body {
	font:12pt "times new roman",times,serif;
	background:none ! important;
	color:#111 ! important
}
 
#content,#wrapper {
	width:auto;
	border:0;
	margin:0 5%;
	padding:0;
	float:none !important
}
 
#nav,#sidebar,#header {
	display:none
}
 
h6,h5,h4,h3,h2,h1 {
	font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif
}
 
#header h1 {
	text-align:center;
	font-size:42pt;
	font-style:italic;
	margin:0
}
 
a:visited,a:link {
	text-decoration:underline;
	color:#781351
}
 
#post img a:after {
	content:" (" attr(href) ")";
	font-size:90%
}
 
#notas_al_pie {
	page-break-before:always
}

Una vez implementado notaras como tu usuarios de lo agradecen.