SigT » Plantillas CSS para impresión y 9 consejos

Via SigT » Plantillas CSS para impresión y 9 consejos: "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 añadiendo una línea igual que la siguiente (cambiando screen por print):

Lo vamos a hacer diferente ¿por qué? pues porque algunos navegadores no muestran la hoja para impresión en “Previsualizar impresión” si no es de la siguiente manera dentro de :

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 solo toca poner lo que queramos en print.css, es hora de los consejos:

1. Elimina todo rastro de elementos de navegación: Una vez impreso no sirve de nada un menú, 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 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 absolutas para mostrar a un determinado tamaño información en pantalla en lugar de ello utiliza pt, 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, Courier New para ancho fijo, etc., te servirán.
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:

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

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.
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 IE.
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”, ver cambios y empezar de nuevo. Lo único que cambia es que vamos a quitar los elementos de navegación y 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 y más para leer

• 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.