Plantillas CSS para impresión y 9 consejos

Suele ser habitual tener hojas de estilo en CSS para la presentación de nuestras webs, una de las grandes ventajas de trabajar con XHTML y CSS es la separación de contenido y presentación: Con una plantilla CSS podemos modificar la forma de presentar información sin modificar el contenido.

Vamos a ver un ejemplo de plantilla CSS únicamente para impresión con algunos consejos para aplicar, lo primero es definirla en el documento y aunque podríamos hacerlo todo en un CSS mediante @media lo vamos a hacer en dos por sencillez inicial:

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

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

Lo importante de esto es que el CSS al cual se le da un media="print" es el de impresión y el media="screen" el clásico para presentación, hay otros cómo por ejemplo media="handheld" para dispositivos de mano (PDA's, etc) pero estos ya no entran en está entrada. Ahora sólo toca poner lo que queramos en print.css por lo que es hora de los consejos:

1. Elimina todo rastro de elementos de navegación: al imprimir no sirve de nada un menú de navegación, el lector no va a poder pinchar en él por lo tanto elimina todo lo que no forme parte del contenido. Es muy fácil, sólo debes pillar los distintos identificadores (id="") y añadirles un display: none;.

   #menu, #footer, #cabecera, .contenido-irrelevante {
     display: none;
   }
   

2. Utiliza pt en lugar de px, % o em: Los valores px, %, em, etc., son medidas pensadas para mostrar a un determinado tamaño información en pantalla mientras que pt sirve mejor a nuestros propósitos. Recomendación:

   body {
     font-family: Arial, sans-serif;
     font-size: 10pt;
   }
   

3. Utiliza fuentes MUY legibles: Lo que con una fuente se lee bien en pantalla, impresa no tiene por que verse igual de bien: Arial para texto normal y Courier New para código (ya que usa ancho fijo) te servirán. Huye del típico abuso de Comic Sans o Verdana a 10 pixeles.

4. Utiliza float:none;: Los elementos flotantes dan problemas con algunas versiones de Mozilla Suite, borra los floats que no necesites o en su lugar utiliza float: none;.

5. Especifica el fondo y el color de letra por defecto: Fondo siempre blanco y letra con un buen contraste (negro o similar). Esto es importante porque de lo contrario se puede dar el caso que usemos un fondo de color y nos imprima con ese color, con el consiguiente gasto (estúpido) de tinta:

   body {
     background: #fff !important;
     color: #000 !important;
   }
   

6. Las tablas salen sin presentación: por defecto las tablas aparecen sin bordes, si tienes una forma de presentar las tablas en CSS para la web, copia esa parte del código al fichero CSS para impresión. Ésto también se puede aplicar a cualquier elemento en que la presentación en papel no sea óptimo..

7. Utiliza a[href]:after para mostrar los enlaces. Seis líneas de CSS y los enlaces se mostraran justo a la derecha del texto enlazado entre paréntesis y con un bonito tono azul. Si no recuerdo mal los selectores (:after, :before, etc) no funcionan en Internet Explorer.

8. Puedes hacer lo mismo que en el punto siete pero con el atributo alt="" de las imágenes.

9. Resumiendo: Hacer plantillas CSS para impresión es lo mismo que para presentación: retocar, refrescar la web, "previsualizar impresión" y empezar de nuevo. Lo único que cambia es que debemos quitar elementos superfluos, no fiarnos de lo que se ve en pantalla y que el código del CSS usado al final sera mucho más corto que en la presentación.

Actualmente tengo pendiente hacer una versión impresa en condiciones pero lo más importante ya está: elementos de navegación fuera, publicidad fuera, arial 10pt +/- para una buena impresión y solamente se muestra logo+artículo.

Referencias para ir leyendo...

• Going to Print.
• ALA's New Print Styles.
• Print Different.

Y ya de paso recomiendo "Principios básicos de CSS" en castellano por parte de Tierra de nómadas.