No olvides tu hoja de estilo CSS para impresión

Hacer una hoja de estilo para impresión es un detalle que a la hora de desarrollar una web, frecuentemente y por desgracia se pasa por alto. Sin embargo, es una de las cosas más sencillas y que mejor impresión (ja, ja) pueden dar al lector ocasional de tu página que por necesidad o comodidad decide imprimir tu contenido en papel, sobre todo en blogs, sitios de noticias, CV’s online…

http://www.flickr.com/photos/vernieman/7424907490

Predicando con el ejemplo, ayer me entretuve en incluir apenas una docena de líneas de CSS dedicadas a la impresión en esta web que estas leyendo ahora mismo.

El método clásico para usar una hoja de estilos para impresión es enlazarla en la etiqueta head de la página especificando el atributo media="print", para que estos estilos solo se apliquen en el papel, pero para ahorrar otra petición HTTP, he preferido incluirlo todo dentro del archivo CSS general de la página usando @media queries, que no solo son útiles para desarrollar web móviles y no dan ningún problema en navegadores modernos.

@media print {
...
}
  • En primer lugar vamos a ocultar las cabeceras, menús, navegación, pies de página, etcétera. No necesitamos estos elementos en una página impresa.
header, footer { display: none; }
  • Asegúrate que el contraste de color es bueno, usa texto negro sobre fondo blanco. Un pequeño truco es no usar nunca negro puro en una web, pero en el caso de una hoja de estilos de impresión debemos asegurarnos una buena legibilidad.
body { background: #fff; color: #000; }
  • También eliminaremos márgenes, resetearemos la anchura de la página para ocupar todo el papel, y definimos el tamaño de la fuente en puntos (pt), una unidad de medida precisa y consistente a través de dispositivos y plataformas, por lo que es recomendada para páginas impresas. He hecho varias pruebas y un valor de fuente entre 9 y 12pt ofrece una legibilidad adecuada.
.wrapper { margin: 0 auto; font-size: 9pt; width: 100%; max-width: none; padding: 4%; }
  • Para mi gusto, el subrayado por defecto de los enlaces no es atractivo cuando se traslada al papel, así que en su lugar, he dedicido poner la fuente de los enlaces en negrita y color negro.
a { text-decoration: none; font-weight: bold; color: #000; }
  • A continuación, un pequeño truco de usabilidad con el que mostraremos la URL del enlace junto al texto enlazado, para que el lector pueda ver a dónde estamos enlazando y pueda visitar el sitio más tarde. Para ello vamos a usar la pseudo clase after y asignarle el atributo href del enlace a la propiedad content para que aparezca en pantalla:
a:after { content: " [" attr(href) "] "; font-weight: normal; }
  • Y para terminar, he decidido eliminar la imagen destacada que incluyo en mis artículos, ya que no aporta demasiada información adicional y permite ahorrar tinta y espacio.
article .attachment-main_thumb { display: none; }

¡Y eso es todo! Para testear, puedes sustituir el valor del atributo @media de print a screen para poder ver el resultado en el navegador. Te animo a que heches un vistazo al CSS del blog y de mi Curriculum Vitae y probar a previsualizar la página para ver cómo queda.

Lee ahora: Se vende: Politweets.es »