Uso de Page break con @media queries. Saltos de página en los medios impresos

Uso de Page break con @media queries. Saltos de página en los medios impresos

Por Kseso ✎ 3

El crédito lo primero:
Idea original de David Walsh. Publicada en su blog.

Antes de seguir, si desconoces o quieres conocer un poco más qué son los medios paginados, la regla @page y cómo crear tu propio css para controlar la impresión de tu página, tienes este artículo: Estilos Css para imprimir: La regla @page en los medios paginados

Como sabes, se pueden controlar los saltos de página con las propiedades page-break-before antes del elemento, después: page-break-after o dentro del elemento: page-break-inside.
Recuerda que los saltos de página sólo se pueden aplicar a elementos de bloque.

La técnica que publica David Walsh se ayuda de las @media queries para tener un mayor control y hacerlos más fáciles.
Consiste en incluir un elemento en el html, en este caso un div con su clase: <div class="page-break", en aquellos puntos donde queramos forzar un salto de página a la hora de imprimir, tal que así:

<h1>Título de la página</h1> <!-- Bloque de contenido --> <!-- Más Contenido --> <div class="page-break"></div> <!-- Bloque de contenido --> <!-- Más Contenido --> <div class="page-break"></div> <!-- Bloque de contenido --> <!-- Más Contenido -->

Y en el Css definir las propiedades oportunas, discriminando los media con ayuda de las reglas @Media queries:

@media all { .page-break { display:none; } } @media print { .page-break { display:block; page-break-before:always; } }

Recuerda:
1.- el artículo original lo puedes ver aquí
2.- Si quieres más info sobre las reglas @media queries puedes hacer uso del buscador del blog.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 3

  1. Se me ocurre que mejor que poner un div vacío se podría usar un hr, se que la etiqueta va muy regulera en HTML5 pero podría funcionar aquí.

    ResponderEliminar
    Respuestas
    1. Quizás Dinael, quizás.
      Pero fíjate en la fecha del artículo (2012) y que éste no deja de ser un eco del original.

      Además, debería probarlo, el elemento <hr/> no deja de ser un elemento vacío y que por su naturaleza tiene una serie de particularidades que no se si afectarían a su uso para esto.
      De lo que sí que estoy casi seguro al 100% es que no se podría usar page-break-inside con él ;-)

      Un saludo

      Eliminar
    2. mmmmm... eso si.. no se podría usar el page-break-inside es cierto entonces no dije nada :P

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap