Tictac Soluciones Informáticas > Diseño web > Versión para imprimir con CSS y Media Query Print

Versión para imprimir con CSS y Media Query Print

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

2018-08-27T10:05:17+00:0002/08/2017|Diseño web, HTML5|

Deje su comentario

Centro de preferencias de privacidad

Estrictamente necesarias

Cookies necesarias para el correcto funcionamiento de nuestra web. Por ejemplo, necesitamos que unas cookies estrictamente necesarias estén habilitadas con el objetivo de guardar tus preferencias sobre el uso de cookies. Si deshabilitas esta cookie, no podremos guardar tus preferencias. Esto quiere decir que cada vez que visites nuestra web, tendrás que volver a habilitar o deshabilitar las cookies otra vez.

wordpress_test_cookie, Wp-settings-time-1, wp-settings-1, gdpr, 1P_JAR

AdvertisingEstadísticas y análisis

Cookies de análisis de terceros. Estas cookies son generadas por Google Analytics. Google almacena la informacion recogida por las cookies en servidores ubicados en Estados Unidos, cumpliendo con la legislación Europea en cuanto a protección de datos personales y se compromete a no compartirla con terceros, excepto cuando la ley le obligue a ello o sea necesario para el funcionamiento del sistema. Google no asocia su direccion IP con ninguna otra información que tenga.

_ga, _gid, _gat

Analytics

Other