En frecuente querer poner un botón de imprimir para que el usuario pueda imprimir la sección actual de la página web que está visualizando. Pero, generalmente, no queremos que se imprima toda la sección de la web. Por ejemplo, el pie y los menús generalmente no son necesarios.

Existe la forma de controlar el estilo de la versión imprimible mediante CSS y el Media Query @media print. Así podemos controlar qué elementos deben o no aparecer, su tamaño y su ubicación.
Además, esta gestión de estilo de la versión para imprimir nos vale tanto para desarrollos a medida como para plataformas desarrolladas con WordPress, Joomla, Drupal, Prestahop, Magento… es decir, nos vale en todos los casos, siempre y cuando tengamos la opción de personalizar el CSS. Para muchas de estas plataformas hay desarrollados plugins o módulos que te permiten añadir el botón de imprimir, pero casi siempre será necesario personalizar y optimizar el estilo para que el contenido se imprima como tú quieres.
Si necesitas el código para incluir un botón o link para imprimir la página, te damos las instrucciones aquí:
Si no es el caso, sigue leyendo.
Una vez tengamos una forma de solicitar que se imprima la página, modificaremos su estilo con Media Queries, en concreto con la regla @media print. Los estilos que incluyamos bajo:

@media print { }

Tendrán sólo efecto en la versión imprimible y no cuando el usuario esté visualizando la página web. Esto es maravilloso porque nos permitirá cambiar los estilos.

¿Qué os recomiendo hacer en el css de la versión para imprimir?

1.- Ocultar los elementos que no queremos que se impriman como el pie, el menú, etc utilizando la propiedad display:none.
Ej.

#cabecera, #menu, #pie {      display: none !important;}



2.-Modificar el tamaño de algunos elementos (como imágens) y el tamaño de letra de algunos textos, como los títulos, que generalmente en web aparecen muy grandes.


3.- Mostrar la URL de los enlaces. Uno de los principales problemas de las páginas HTML impresas es la pérdida de información relativa a los enlaces ya que, si no hacemos nada al respecto, mostrará el texto del enlace, pero no la página de destino. Para mostrar al lado de un enlace la dirección a la que apunta utilizaremos la propiedad content y el pseudo-elemento :after.

Ej:




a:after { content: » (» attr(href) «) «;}




Y lo que ya sería una solución súper PRO es que, además de incluir la URL del enlace, incluyésemos un código QR que permitiese al lector dirigirse automáticamente a esa URL, sin necesidad de teclearla, simplemente con un smartphone a mano. Para ello nos serviremos de la herramienta Google Chart APi que sirve para crear gráficos web de forma interactiva.


Si estamos utilizando PHP para una página web a medida, podremos proporcionar la URL actual de forma dinámica:




@media print { h1:after { content: url(https://chart.googleapis.com/chart?cht=qr&chs=150×150&chl=http://&choe=UTF-8); position: absolute; right: 0; top: 0; }












¿Cómo depuramos la versión para imprimir?


Pero…. ¿cómo sabemos cómo está quedando la versión antes de dar al botón de imprimir? Es frecuente que los desarrolladores utilicemos el inspector de elementos del navegador (herramientas para desarrolladores) o alguna otra herramienta del tipo Firebug. Esto nos permite resolver problemas de diseño, identificando los elementos del html y modificando dinámicamente sus estilos.


Para utilizar este inspector para depurar el css de la versión imprimible hay un truco. Podéis leer las instrucciones aquí:


Instrucciones para depurar el CSS de la versión imprimible de una web