Hace poco tuve que afrontar en el trabajo una tarea poco habitual: "Dar la oportunidad al usuario de imprimir una web". Ante tan extraño reto y con total libertad para ejecutar este poco frecuente encargo, decidí ponerme a investigar. En el siguiente artículo transmitiré algunos consejos y sugerencias atesoradas durante este proceso.
Por qué, para qué y para quién
Antes de empezar a codear, es esencial tener claro si ¿es realmente necesario invertir tiempo y recursos en ello? Estamos rodeados de pantallas y el papel no crece de los árboles, ¡son los árboles!. Por principios ecológicos este argumento no debería ser desdeñable.
Las razones para la impresión pueden ser perfectamente aceptables pero ¿seguro que toda la información, datos, imágenes aportan valor al usuario? Podemos obviar encabezados, secciones, fondos, publicidad... En la grandísima mayoría de los casos el foco estará en un contenido concreto (Por ejemplo: El titular y cuerpo de un artículo periodístico, los datos de una tabla de una publicación o un listado de productos)
Optimizar para imprimir y no para impresionar
La transición de lo digital a lo analogico nos obliga a pensar de manera diferente:
- Los pixels/em/rem pasan a ser medidas del mundo offline pt,cm,mm
- La tinta es cara y la de color aún más. Céntrate en el blanco y negro
- Oculta lo innecesario, por regla general suelen ser headers, footers, fondos de colores y/o imágenes
La Media Query olvidada y el evento ancestral
La base de vuestros estilos pasarán por la propiedad @media print y la 'viejuna' función de JS window.print(). Su simplicidad y potencia hace muy fácil su uso, resumiéndose en: todos las propiedades CSS que apliques dentro de esta media query se aplicarán sola y exclusivamente a la impresión.
…
}
Ocultar elementos
Un simple display:none es lo único necesario para ocultar un elemento al imprimir.
.header,
.sidebar,
.footer {
display: none;
}
}
Mejora la legibilidad del texto impreso
Un punto interesante es cambiar la tipografía de todo el contenido por otra más legible al ser impreso. Mariana Eguaras tiene un post muy bien documentado sobre este asunto; a grandes rasgos la clave es usar una tipografía serif y el cuerpo del texto del tamaño de unos 12pt.
* {
font-family: 'Book Antiqua', 'Times New Roman', sans-serif !important;
}
p {
font-size: 12pt;
}
a {
text-decoration: underline;
}
}
El uso del !important es relativo y depende de las características del proyecto en sí. Aunque pequeños detalles como forzar el subrayado de los enlaces, es una buena práctica, no porque el usuario vaya a hacer click sobre un trozo de papel (xD), sino para indicarle que en su origen era una palabra/frase destacada y un punto sobre el que poder ampliar información.
No se puede obligar a visualizar el background (si está desactivada la opción)
El background en todas sus variantes background, background-color, background-image se puede cambiar como cualquier otra propiedad, pero si el usuario tiene activado o activa la opción de configuración del navegador que los omite, poco podemos hacer. Por ejemplo: en el caso de las opciones avanzadas de imprimir de Chrome está dentro de Configuración > Gráficos de fondo
.article-table thead {
background-color: black; /* :( */
background-repeat: repeat;/* :( */
background-size: 100%;/* :( */
background-image: url('/img/background_black.png');/* :( */
}
}
Prácticamente todos los navegadores al seleccionar la impresión blanco y negro, transforman todos los colores e imágenes a escala de grises
Manipular las páginas impresas pero sin magia
La propiedad @page permite modificar los márgenes de todas las páginas. Los márgenes específicos de la primera página respecto al contenido @page :first también, así como los de la derecha @page :right e izquierda @page :left. Por desgracia estas propiedades tienen muchas limitaciones de compatibilidad, por ejemplo Firefox no admite el @page el resto de navegadores sí la admiten. El diablo azul no admite @page :first y Opera tampoco (IE8+ ni Opera 9.2.+)
Para manejar los márgenes laterales, superior e inferior de la página podemos usar cm o porcentajes En lo personal recomendaría usar cm, pues se tiene un manejo más certero. En ningún caso tenemos el control del tamaño de papel (A4, A5, orientación vertical, orientación horizontal...) pues el usuario es el amo y señor de esas decisiones.
margin: 4cm 2cm;
}
@page :first {
margin: 6cm 4cm;
}
Además de los márgenes de las páginas, podemos determinar los saltos de línea, para ello usaremos page-break-after:always Además de always tiene otra serie de parámetros, en la mayoría de los casos poco relevantes:
auto | always | avoid | left | right | recto | verso
Los párrafos con esta propiedad asignada, al final del mismo, se les aplica el salto de línea, no antes. Si las últimas líneas del párrafo coincide por casualidad con el final de una página, el salto generará una nueva página sólo con las líneas últimas correspondientes.
.nextPage {
page-break-after:always
}
}
Conclusiones
La web en su origen gestionaba documentos y el html/css servían para darles formato y estructura. Si alzamos la vista al código podemos ver como manipulamos un tipo de documento <!DOCTYPE html>, como jerarquizamos mediante tags de sospechoso origen documental header, article, footer... o si seleccionamos un elemento con js document.getElement... vemos un poso de lo que fué internet orginariamente "un papel en una pantalla".
Las limitaciones que tiene el desarrollador para gestionar la impresión son enormes, pero no por ello hemos de olvidarlas.
Documentación Adicional
- https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
- https://alistapart.com/article/hiresprinting
- https://github.com/twbs/bootstrap/blob/v4-dev/scss/_print.scss
- https://github.com/zurb/foundation-sites/blob/develop/scss/typography/_print.scss