Una de Código

Una acción que es ampliamente utilizada en proyectos web es la impresión de datos en dispositivos tales como una impresora. Estos datos pueden ser recibos y sus copias, contratos, etc.

Imprimir en un proyecto web es relativamente sencillo, basta con enviar una orden javascript “window.print()” al navegador, para que éste nos presente el diálogo de impresión.

Esta operación se complica si deseamos imprimir contenido en más de una página, pero el contenido de la primera página, no la llena completamente. Por ejemplo, si estamos realizando una reserva de estancia en un apartamento, a través de internet, una impresión podría ser el resguardo de la reserva y una copia. Una para el dueño del apartamento a entregar en el momento de inicio de la estancia y otra, la copia, para el cliente que realiza la reserva.

Una primera idea que nos viene a la cabeza seguramente consiste en rellenar la primera página con lineas en blanco, a partir de donde finaliza el texto impreso. Si bien es una manera efectiva, plantea tantos o más problemas como los que soluciona. A saber, debemos conocer de antemano la longitud del texto, y lo que es más díficil, el tamaño de la página física en la que realizaremos la impresión.

Otra solución, mucho más elegante consiste en utilizar una propiedad de CSS llamada page-break-before. Con ella le indicamos al navegador cuando imprimimos, que debe realizar un salto de página, justo antes del elemento que tiene definida esta propiedad CSS.

Solamente deberiamos tener en cuenta, si estamos realizando un bucle, que no debemos poner la propiedad en el primer elemento u obtendremos una primera página en blanco al realizar la impresión.

Visto lo anterior, podríamos preguntarnos, ¿a que viene publicar un post con algo tan sencillo? Pues que como siempre, la batalla de navegadores se cobra sus habituales víctimas: los desarrolladores. En Internet Explorer 7, no siempre funciona esta propiedad. Al imprimir un texto simplemente se ignora, y aparecen todas las páginas una detrás de la otra, sin separación, como si fueran una sola.

Entonces, ¿que hacemos?. Como siempre, recurrir a técnicas no del todo puristas. Si incluimos las propiedades height y line-height al tag html que incorpora el page-break-before, el navegador de Microsoft ya puede realizar el salto de página.

Si tenemos un código como el siguiente, que no funciona en IE7.

<div style="page-break-before:always;">
... texto y html ...
</div>

Debemos dejarlo de la siguiente manera:

<div style="page-break-before:always;height:0;line-height:0;">
... texto y html ...
</div>

Si recargamos el navegador e imprimimos…. ¡ya tenemos la paginación correcta!

En este punto podríamos cerrar el post e ir a celebrar que ya hemos resulto el problema pero…, como ya dijimos unas lineas mas arriba, nada es tan sencillo como parece. Si esta página la visualizamos con Firefox, muy probablemente veamos que las lineas de texto se superponen las unas con las otras, ya que interpreta el line-height:0 correctamente, y no deja espacios entre líneas.

¿Qué debemos hacer pues? ¿Marginar un navegador frente al otro? ¿Complicar extremadamente el código?

Afortunadamente, la respuesta es que no. Una opción que recomendamos es hacer uso de las llamados comentarios condicionales de Internet Explorer. Estos comentarios, solamente son interpretados por la familia de IE. Los demas navegadores, los ignorarán como un comentario cualquiera.

Con lo que la manera de solucionar nuestro problema sería:

1. <!--[if IE]>

2. <div style="page-break-before: always;height:0; line-height:0;"></div>

3. <![endif]–>

4. <![if !IE]>

5. <div style="page-break-before: always;"></div>

6. <![endif]>
7. Download this code: codi.txt

Debemos fijarnos en la manera que está construida la segunda opción, sin los “- -”, de otra manera no funcionará.

El primer endif acaba con dos guiones y las comillas son las normales no las tipográficas.

De esta manera los navegadores de la familia IE construiran el tag con el truco del height / line-height y los demás navegadores, utilizarán la segunda versión.

Espero que estos trucos os resulten útiles en vuestros proyectos.codi

2008-10-23. Actualizado con el codigo correcto evitando que Wordpress elimine carácteres