CSS print, página optimizada para la impresión

Hace poco tiempo hablábamos del código optimizado para diseñar e-mails y newsletter, ahora le toca el turno al formato de impresión.

Por cierto, entre tantas versiones (pantalla, e-mail, impresión) cabe recordar eso de «una web única» tan promulgado por la W3C. Bueno, lo que si es cierto es que las ventajas de los estándares web permiten una mejor adaptación al dispositivo o medio final y esto conlleva un ahorro de trabajo enorme.

Vamos al ataque con el CSS optimizado para la impresión.

Media

Evidentemente lo primero que tenemos que hacer es indicar el medio al que van destinadas las hojas de estilo.

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

Estilo

  • Para la impresión viene bien dejar elásticos los contenedores, no fijar tamaños y menos aún bajo unidades en pixeles.
  • Evitar el uso de float y position absolute.
  • Aplicar bordes a los elementos que lo requieran, por ejemplo contenedores (div) o tablas.
  • Eliminar todos los elementos de: navegación, menús, tags, opciones (compartir, enviar por e-mail, saltar al contenido, subir, etc.) Lógicamente todo aquello que no podamos usar en papel. Para esto podemos hacer uso de display: none;
  • También podemos ahórranos los comentarios.

Al igual que en otras muchas situaciones menos es más, así que evitar estilos innecesarios todo lo posible.
Y en cuanto al contenido, cuanto menos se imprima mejor!, tengamos presente la naturaleza 🙂

Textos

Hace mucho mucho tiempo (en mi época de estudiante) recuerdo haber leído acerca de la legibilidad de fuentes para pantalla o impresión.

  • Sans-serif: más legibles en pantalla.
  • Serif: más legibles en papel.

Había mucho escrito sobre este asunto, pero me quede especialmente con una cosa; Los trazos acabados en remates ayudan a la legibilidad y son más apreciables en papel, en cambio se produce el efecto inverso en pantalla. Por esta razón los remates de Sans-serif son recomendables para papel y no tan legibles en pantalla (a muy grandes rasgos y teniendo en cuenta el tamaño de letra).

Por cierto, recomiendo el libro «Manual de tipografía, del plomo a la era digital». Yo tengo la edición 2001 supongo que saldrían nuevas ediciones, es buenísimo!

Imágenes

Una regla que puede servirte es pensar que las imágenes que no aporten información y sean meramente decorativas deben ir como estilo (background-image).

Dos enlaces interesantes al respecto:

  • Un test, web sin imágenes, sin CSS, sin JavaScript, plugins, etc.
  • Accesibilidad en imágenes

En versiones antiguas de Opera, creo recordar que también imprimía el background-image, en cualquier caso aquello era modificable mediante una opción.
Hoy en día y contemplando la mayoría de navegadores no tendremos problemas.

Enlaces

En papel vemos un enlace de color azul y subrayado, pero desconocemos donde obtener esa información y no podemos ver el recurso al que apunta.

Para evitar esto podemos tomar con ayuda los pseudo-selectores de CSS y hacer que los enlaces sean acompañados de la URL.

a { text-decoration: none; }
	a[href]:after { content: " (" attr(href) ")"; }

Con ello mostraríamos un enlace así: aurea webdesign (http://aurea.es).