Creéis que se suelen imprimir las páginas web con mucha frecuencia?
La respuesta es sí, los ejemplos más comunes de esto pueden ser páginas de periódicos, hoteles, restaurantes o cualquier tipo de información.
Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta <link/>.
Para ver como queda en pantalla se utiliza (media="screen") y cuando queramos que se imprima (media="print"):
También se puede hacer usando ‘media queries’.
Relacionamos la páginas: <link rel=»stylesheet» type=»text/css» href=»estilos.css» />
Dentro de estilos.css:
Propiedades a tener en cuenta:
@page: Define las dimensiones y comportamiento de la página.page-break-before: Define el comportamiento de un salto de página antes del elemento.page-break-after: Define el comportamiento de un salto de página después del elemento.page-break-inside: Define el comportamiento de un salto de página dentro del elemento.orphans: Controla el mínimo número de líneas de un bloque contenedor que se deben dejar al final de una página.widows: Controla el mínimo número de líneas de un bloque contenedor que se deben dejar al principio de una página.
Una cosa importante a la hora de imprimir una página web es no imprimir la cabecera (<header>), el pie de página (<footer>), el menú de navegación principal (<nav>) e información adicional al contenido (<aside>). Si tenemos la página estructurada en esos bloques es fácil quitarlo:
También es importante quitar las imágenes, en Google Chrome la opción se llama «Gráficos en segundo plano»:
En Mozilla Firefox la opción se llama «Imprimir fondo (colores e imágenes)»:
Y en Microsoft Internet Explorer se llama «Imprimir colores e imágenes de fondo»:
Aunque hay algunos navegadores antiguos no disponen de esta opción. Por lo que es más fácil desactivar las imágenes de fondo en la propia página para garantizar que realmente la página se imprima sin dichas imágenes en cualquier navegador:
El tema de los enlaces también es importante, un usuario no puede pulsar sobre un enlace en una página web impresa para navegar al destino del enlace. Para evitar esto podemos mostrar todos los enlaces de la página con:
Si sólo queremos mostrar los enlaces externos usaríamos:
Podemos forzar saltos de páginas dependiendo de lo que contenga nuestra página, si quisiéramos hacer saltos de página cada h1 que esté a continuación de otro h1 sería:
Puede pasar que no queramos que incluya saltos de página en medio de un elemento como puede ser una lista:
Comprobar el estilo de impresión:
Hay 3 opciones:
- Añadir un estilo alternativo para la pantalla: <link rel=»alternate stylesheet» type=»text/css» href=»print.css» media=»screen» title=»Estilo para impresión» />
- Utilizar la opción de «Vista preliminar» o «Vista previa de impresión» que ofrecen los navegadores para visualizar en pantalla la forma de imprimir la página web.
- Imprimir a un documento PDF. El navegador Google Chrome ofrece esta opción de forma nativa, pero también se puede instalar una impresora PDF para poder imprimir desde cualquier programa.
