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.
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 ) 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 , 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.
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).
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 ) 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 , 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...