Al construir un portal web se suele olvidar que hay otros dispositivos aparte del navegador para acceder a este. Otro día hablaré del acceso desde dispositivos móviles, pero aquí voy a dar algunas recomendaciones (cosas que he ido aprendiendo) para preparar la correcta impresión de una página web desde la hoja de estilos.
¿Por qué hacerlo?
Cuando se imprime una página web desde el navegador, si no se indica lo contrario toma la hoja de estilos tal cual se visualiza por pantalla. Esto no es conveniente dado que se pueden los tamaños de los elementos que se visualizan en pantalla no tienen por qué ser aptos para la impresión, se modifican al convertir de píxeles a puntos, se muestra información no relevante para la impresión, no se contempla el contraste de colores para la impresión en monocromo, etc.
Informar que cuando se imprima la página use una hoja de estilos diferente
Para informar de que existe una hoja de estilos específica para impresión se debe indicar entre las etiquetas <head> y </head> del html de la página la inclusión del fichero css de impresión como una hoja de estilo más.
<LINK rel=stylesheet type=text/css href=»print.css» media=» print «>
En este caso literalmente indicamos que el fichero print.css es una hoja de estilos (stylesheet) que se usará al visualizar la página mediante la impresora (media=print).
A partir de este momento cuando se imprima la página, se ignorará la hoja de estilos por defecto y se interpretará lo que se indique en el fichero print.css
Las unidades de medida
Cuando se trabaja en pantalla las medidas que se manipulan son píxeles. Asimismo cuando se trabaja en papel (en cualquier ámbito) las medidas son centímetros. Así pues al igual que en el mundo no-informático cuando se trabaja con un css de impresión las medidas serán centímetros en lugar de píxeles. Es mucho más controlable ya que el número de píxeles por centímetro puede variar entre sistemas y no es un valor controlable desde la web.
Entonces para especificar que una página ocupe el ancho de un DIN-A4 bastará con indicar:
body{width: 18cm; margin: 0; padding:0}
¡Un momento! ¿18 centímetros? ¡Si un DIN-A4 mide 21!
Pues sí, pero hay unos márgenes que debemos respetar, 1,5 centímetros de margen por lado no está mal.
A partir de este punto se pueden poner anchos relativos y absolutos sin problema, tal como se realiza en una visualización normal en pantalla
#miPagina{width: 90%; margin: 1cm}
También se debe tener en cuanta que el tamaño de letra tampoco se indica en píxeles, sino que se debe indicar en puntos (pt) al igual que trabajan los editores de texto habituales, controlando así el tamaño real en la impresión.
body{font-family: verdana, arial, helvetica; font-size: 10pt;}
Qué mostrar
Cuando se imprime una página carece de sentido imprimir muchos de los elementos que la componen. ¿Para qué imprimir un menú si no se puede hacer clic en él? ¿Es necesaria esa imagen de cabecera de 500 píxeles de alto?¿No bastaría con el logotipo de la empresa?
Una buena práctica es ocultar toda información que no sea útil en impresión. Ahorramos espacio usable para mostrar la información realmente útil y de paso hacemos que el usuario ahorre papel y tóner (por ecología, consumismo, practicidad,…)
.cabecera,
.menu{display: none}
.cabecera .logo{display: block}
Y tal vez sea útil mostrar más información de la que se visualiza en pantalla. Se puede dar el caso de que interese tener a mano la dirección y teléfono de contacto, que es una información útil y visible en la correspondiente sección de la web, pero que cuando se imprime la página esta información no es accesible, no podemos hacer clic para buscarla.
En este caso personalmente juego con una clase .soloImpresion a la cual oculto en la hoja de estilos de pantalla y muestro en la de impresión.
html de la página
<div class=»direccion soloImpresion»>
<h4>Direccion<h4>
<p>C/ del Olmo 13<br>
Tél. 987654321</p>
</div>
pantalla.css
.soloImpresion{display: none}
print.css
.soloImpresion{display: block}
Los márgenes
Los márgenes de la página no los podemos controlar. Cada máquina tiene una configuración diferente de impresión y es uno de los parámetros que debemos hacer acto de fe, considerar que están razonablemente configurados y maquetar en función de ello.
El resto de márgenes, el de los elementos, como he indicado antes se puede indicar en centímetros o unidades relativas (% y em)
Las imágenes y colores de fondo
Un factor a tener en cuenta es que las imágenes y colores de fondo en la configuración por defecto de la mayoría de navegadores no se imprime. Esto se debe tener muy en cuenta, sobretodo si usamos letras claras sobre un fondo de tipo imagen oscuro. En este caso al imprimir no se verá nada.
Si se desea que una imagen se imprima se deberá insertar la imagen en el html mediante una etiqueta <img>
En impresión se debe tener en cuenta qué imágenes son útiles realmente para imprimirlas. Si se considera que una imagen no es más que decorativa es bueno ocultarla.
Las decoraciones en títulos se pueden hacer con subrayados, bordes y tipografías, acelerando así la impresión y haciendo a su vez páginas más accesibles.
