CSS: Imprimiendo saltos de página

Mar 14, 2008

Imaginemos un informe de 200 hojas generado con PHP por pantalla. Supongamos que lo queremos archivar y guardar coherentemente en un típico A-Z de los que tanto gustan a la gente. Igual a la hora de imprimir esa pequeña vista nos llevamos una sorpresa viendo cómo las páginas se cortan por donde corresponda.

Aquí un pequeño css-tip para que estas cosas no pasen. Cuando imprimimos una página web el navegador la procesa -renderiza- y envía a la impresora un postscript para que ésta no tenga mucho que pensar. El pequeño hack consiste en aplicar un css distinto para la impresión. Para ello primero debemos definirlo en la web y luego hacer los ajustes correspondientes:

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Prueba de Impresión</title>
 <link href="pantalla.css" rel="stylesheet" type="text/css" media="all" />
 <link href="impresora.css" rel="stylesheet" type="text/css" media="print" />
</head>

Ahora tenemos dos archivos de estilos, uno que afecta a todo -all- y otro a la impresión -print-. Ajustamos colores, fuentes, links, backgrounds y demás elementos que puedan ser conflictivos y, para los saltos de página -usando un contenedor- podemos hacer lo siguiente:

.clase3 { page-break-after: always; }

De forma que justo despues de clase3 haga un salto y empiece clase4 (o la que corresponda) en el siguiente folio. Ahora un ejemplo completo y entendible, pantalla.css:

body { background-color: #fff; color: #000 }
.clase2 { page-break-after: always; }
.clase4 { page-break-after: always; }

El html correspondiente:

<div class="clase1">Esto sale en la primera página</div>
<div class="clase2">Esto sale en la primera página</div>
<div class="clase3">Esto sale en la segunda página</div>
<div class="clase4">Esto sale en la segunda página</div>
<div class="clase5">Esto sale en la tercera página</div>

Hay varios tipos de page-break, page-break-after, page-break-before, page-break-inside... más información. Y todo ello contando con el beneplácito de la W3C. Me encanta el css.