Propiedades de impresión CSS page-break-after y page-break-before

  • Por
  • CSS
page-break-after y page-break-before son propiedades de estilos CSS que se aplican a la hora de imprimir páginas web en la impresora, para forzar saltos de página después o antes de ciertos elementos.
Existen propiedades de CSS como page-break-after y page-break-before que sirven para alterar el aspecto de las páginas web al ser impresas en papel. Estos atributos sirven en concreto para forzar saltos de página antes o después de elementos de la página. Con page-break-after podemos definir si deseamos un salto de página después de un elemento, mientras que con page-break-before definimos la posibilidad de incorporar un salto de página antes de un elemento.

Recordemos que con CSS se pueden definir tanto los estilos que deseamos aplicar a la hora de ver la página en el monitor como a la hora de imprimirla con una impresora. Eso ya lo explicamos en el artículo CSS para imprimir páginas web. Pero estos dos atributos son un poco distintos, porque los podemos utilizar libremente en la especificación de estilos en global de la web, siendo que, tanto page-break-after como page-break-before, no tienen representación en el momento de visualización de la página en la pantalla del ordenador, pero sí a la hora de imprimirla en la impresora.

Atributo CSS page-break-after

Sirve para forzar, o no, un salto de línea después de un elemento de la página. Se puede colocar en elementos de bloque, como tablas o capas DIV. Un uso típico sería:

<div style="page-break-after: always;">
Contenido del div
...
</div>


Entonces, a la hora de imprimir la web, se insertará un salto de línea después del bloque DIV.

Atributo CSS page-break-before

De manera similar al anterior atributo, page-break-before sirve para decir si queremos, o no, forzar un salto de página antes de un elemento. Si lo colocamos con el valor always, haremos que siempre se cambie de página antes de imprimir dicho elemento.

Esto puede venir muy bien para, por ejemplo, tablas u otros elementos que no queremos que se rompan en dos partes, si coincide un salto de página en medio de la impresión de la página. Con ello hacemos que se cambie de página, con un salto de página forzado y así en la nueva página es más fácil que tengamos espacio suficiente para que quepa la impresión de ese elemento.

Por ejemplo, podría darse este uso:

<table border="1" style="page-break-before: always;">
Otras etiquetas de la tabla
...
</table>


Otros posibles valores de los atributos

Tanto page-break-after como page-break-before permiten otros tipos de valores, aparte del always que hemos visto en los dos ejemplos anteriores.
  • auto: es el valor por defecto. Sólo coloca el salto de página si es necesario..
  • always: coloca siempre un salto de línea, después o antes del elemento.
  • avoid: evita colocar un salto de línea antes o después.
  • left: inserta uno o dos saltos de página, de modo que se pueda asegurar que la siguiente página es una página izquierda (page-break-after), o para asegurar que la página donde se empieza el elemento es una página izquerda (page-break-before). Imaginemos un libro abierto, que tiene páginas a la izquierda y a la derecha para saber a lo que se refiere una página izquierda.
  • right: inserta uno o dos saltos de página, para asegurar que se pueda insertar el elemento al principio de una página de derecha (page-break-before) o para asegurar que después del elemento comience una página derecha (page-break-after).
Compatibilidad de page-break-before y page-break-after con distintos navegadores

En principio, tanto Internet Explorer como Firefox y otros navegadores como Opera, soportan este atributo. El problema es que en Internet Explorer, al menos en la versión 7, funciona unas veces y otras no. Esto es una pena, porque no podemos estar seguros si la impresión va a ser tal como hemos definido con CSS para el documento.

Para solucionarlo a mi me ha ido bien colocando un DIV vacío (pero con un espacio en blanco &nbsp;) antes o después del elemento al que queremos asignar los saltos de página. Luego poniendo el page-break-after o page-break-before a ese DIV vacío. Además de separar por un <p> el DIV vacío del elemento. El código sería algo parecido a esto:

[Contenido de la página]
<div style="page-break-before: always;"> </div>
<p>
<table cellspacing="2" cellpadding="6" border="1" >
<tr>
   <td>Esta tabla</td>
   <td>Aparecerá en</td>
   <td>una nueva página</td>
</tr>
</table>
[Más contenido de la página]


Como se puede deducir del ejemplo, la página tendrá un contenido. Luego se forzará un salto de página antes del DIV que tiene el &nbsp;, de modo que, al imprimir, la tabla siguiente aparecerá siempre al principio de una página nueva.

He visto por ahí otros hack CSS para solucionar la compatibilidad de Explorer con estos atributos, pero complican un poco la solución. Así a mi me ha funcionado correctamente siempre el page-break-after o page-break-before en todos los navegadores.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

asgyo_asgyo

26/1/2011
Gracias!
Hola!
Sólo quería darte las gracias, no había caido en poner un div vacio y no había manera de encontrar porque no me funcionaba bien.
Un saludo

JMR

23/7/2011
Agradecer
muchas gracias andaba buscando esto hace tiempo par poder crear varis paginas con DOMPDF

daniel_canedo

01/12/2011
page-break-inside
También existe page-break-inside que tiene las propiedades auto, inherit, avoid. Supongo que las 2 primeras son sobeentendibles, pero "avoid" es para evitar que se haga un salto de línea dentro del bloque al que haga referencia la regla CSS.

Muy útil cuando, por ejemplo, deseamos que todo un texto de div no salga dividido en 2 páginas. OJO que sólo EVITA, esto no signifca que siempre nos mantendrá todo el texto en la misma página, ya que de darse el caso que el texto sea extremadamente extenso no será posible mantenerlo en una sóla página.

Cabe mencionar que no está compatible en todos los navegadores, de hecho yo lo probé al generar un pdf, pero al usarlo ya en un html en chrome, no me funciona.

Saludos y gracias!!!

saul

19/9/2016
page-before:avoid
no me lo respeta dentro de una tabla

saul

22/2/2017
page-before:avoid
en firefox no funciona.
habra solucion?