Optimizar modo impresión de tu web sin malgastar papel

impresion-previa

Preparando las nuevas funcionalidades que incluirá el proyecto web que estoy desarrollando con mis alumnos para el próximo curso se me ha presentado la necesidad de probar cómo quedarán las hojas de estilo CSS de ciertas pantallas en modo impresión.

Por fortuna, tanto Mozilla Firefox como Google Chrome cuentan con la posibilidad de aplicar dichas hojas de estilo sin necesidad de tener que estar tirando continuamente hojas de papel (que la conciencia ecológica luego no me deja dormir 😉 )

Aquí os dejo el truco para obligar a los dos navegadores a utilizar la hoja de estilo correcta y ver cómo quedan maquetadas tus páginas al imprimirlas.

Indicar el CSS a utilizar para imprimir

Antes de detallar cómo simular la impresión en cualquiera de los navegadores, veamos cómo especificar la hoja de estilos CSS a utilizar.

Sólo necesitaremos indicar la hoja de estilos a utilizar con la etiqueta

<link href=”/css/impresion.css” type=”text/css” media=”print” />

Donde

  • href indica la ruta al fichero CSS (/css/impresion.css) que contendrá las reglas que deben aplicarse al intentar imprimir nuestra página web
  • media=”print” indica que dicha hoja de estilos sólo debe aplicarse a la hora de imprimir

Queda fuera del objetivo de este artículo expliar cómo crear la hoja de estilos para que se vea correctamente la página al imprimir (se elimine la publicidad, desaparezcan los menús de la página web, cambie los márgenes y/o el layout del contenido, …). Nosotros nos centraremos en simular la impresión. Sirva a modo de ayuda (de entre los tutoriales y trucos existentes en la Red) el siguiente artículo de Kseso.

Simular modo impresión

La de toda “la vida”

Vamos a ver Informático de Guardia, ¿¡¿ no es más sencillo utilizar una vista previa de impresión y dejarnos de rollos ?!?

Si lo que quieres es ver cómo queda tu página en papel… sí pero, si quieres hacer cambios y mejorar la vista de impresión, te vas a dar un lote de imprimir continuamente.

La IDEA es poder hacer cambios en la hoja de estilos y ver cómo quedan en “tiempo real” hasta conseguir el formato que más te convenga

En Mozilla Firefox

Realmente sencillo:

  1. Pulsa Shift+F2 para abrir la GCLI (línea de comandos de la barra de desarrollo, actualmente en versión beta) y
  2. Escribe media emulate print (pulsando enter al terminar)

Para que tu navegador pase a modo de impresión.

NOTA: Si quieres volver al modo “pantalla” (el de toda la vida) sin tener que cerrar la pestaña y/o ventana del navegador, siempre puedes escribir media emulate screen.

Por cierto… le voy a tener que dedicar un rato al modo impresión del blog XO

En Google Chrome/Chromium

Aquí, aunque no es complicado, requiere un poco más de pericia encontrar cómo cambiar el modo de renderizar la página.

  1. Abre la ventana de desarrollo (CTRL+SHIFT+C)
  2. Selecciona las opciones de renderizado
  3. Indica que deseas el modo impresión emular css de impresión en el navegador

Conclusión

Distintos modos de poder editar (en tiempo real) la hoja de estilos CSS de nuestra vista de impresión de modo que podamos configurar de un modo más cómodo cómo quedará nuestra web al ser impresa.

Y tú…

  • ¿Sueles editar hojas de estilo?
  • ¿Conocías cómo simular el modo de impresión en tu navegador?
  • ¿Cuál te parece más sencilla?
  • ¿Conoces otras formas de hacerlo?
  • ¿Sabes cómo activar este modo en otros navegadores web?

Un comentario en “Optimizar modo impresión de tu web sin malgastar papel

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s