Preparando páginas para impresión
Aprende cómo configurar tu sitio para que se puede imprimir correctamente sobre papel
Tienes un sitio que funciona perfectamente. Lo has testeado con diferentes navegadores bajo múltiples resoluciones, el HTML sigue los estandares marcados por la W3C y el CSS es impecable.
Incluso cumpliendo todo lo anterior, a veces olvidamos que hay más dispositivos que la pantalla, como el caso de la impresora.
¿Porqué es importante?
Como más texto contenga su sitio, más razón habrá para pensar en las impresoras. Mucha gente prefiere imprimir muchas páginas en vez de leerlas directamente en el monitor. De esta forma es mucho más fácil y cómodo.
Dándole a los usuarios la posibilidad de imprimir las páginas estás haciendo tu sitio mucho más usable. Al mismo tiempo, estas animando a la gente a hablar de tu sitio a otra gente.
¿Cómo hacerlo?
Tener un sitio con versiones imprimibles de los contenidos se puede hacer de muchas formas distintas. Una forma recomendada es usando CSS. Aunque no lo soportan los navegadores antiguos, CSS es una buena elección porque elimina la necesidad de crear versiones de páginas imprimibles diferentes de las páginas corrientes. La misma página puede tener un estilo para los navegadores y otro para las impresoras!
Vamos a empezar, abrimos el Bloc de Notas y empezamos creando un nuevo archivo CSS.
Modificando el diseño...
El primer paso es eliminar todo lo superfluo en una versión imprimible de una página. Anuncios publicitarios, menus de navegación, y todos los graficos innecesarios. Empezemos definimiendo la primera clase CSS en el nuevo archivo que acabamos de crear.
Seguidamente debemos pensar sobre el ancho de la página. Si tus páginas son demasiado anchas, lógicamente no cabrán en el papel. Los problemas con el ancho de una página suelen ocurrir porque contienen tablas con tamaño fijo. La solución es usar porcentajes en vez de tamaños fijos o simplemente asegurarse que el tamaño fijo no es demasiado ancho. Para que las páginas se impriman correctamente, deberían tener una ancho de unos 600 píxeles.
Como el codigo CSS sobreescribe al HTML, es fácil cambiar el ancho de las tablas. Por ejemplo, definiendo un ancho relativo de 100% se puede hacer con la siguiente clase:
...y no olvides los detalles!
Tu próxima preocupación es la fuente.La que usas para mostrar en la pantalla puede no ser la mejor para leer en el papel. Fuentes Sans-serif, como Arial, Verdana, Helvetica son consideradas perfectas para leer en la web. Por otro lado, en el papel es recomendado usar fuentes como Times New Roman.
Además del estilo de fuente, será necesario considerar el tamaño. La fuente ha de ser lo suficientemente larga como para pueda ser leída en condiciones. Nunca demasiado grande ya que ocuparía demasiado espacio. El tamaño óptimo recomendado está entre 12 y 14 (puntos).
Considera configurar el color de fondo de color blanco y el texto de color negro con CSS. Algunas impresoras imprimen fondos con imagenes y colores, lo que significa un gasto de tinta excesivo en algunos casos. Algo aún peor es que el texto y el fondo sean de colores parecidos, algo que hace el texto imposible de leer.
En este caso en vez de usar una clase definida por nosotros, es normalmente más cómodo cambiar el modo en que se muestra el texto dentro de la etiqueta html, BODY. Configurando la fuente de color negro a 12 puntos, la fuente Times New Roman y el fondo blanco se puede hacer de la siguiente forma:
El toque final
Después de crear la hoja de estilos hay que enlazarlo con los archivos HTML. Para hacer esto, simplemente copia el siguiente código entre las etiquetas
Ahora lo que hay que hacer es poner las clases CSS que hemos creado en el lugar apropiado de nuestros archivos HTML.