de saltos de página para la impresión a doble cara en HTML y CSS

Question

tengo saltos de página que trabajan para medios impresos con una rápida page-break-after: always. Los utilizo para separar múltiples informes en un único trabajo de impresión por lotes. Desafortunadamente, cuando el trabajo de impresión tiene doble cara, el salto de página puede hacer que la impresora inicie un informe en la parte posterior del informe anterior.

¿Hay alguna manera de forzar un salto de página a una página par? ¿O, alternativamente, para detectar en qué número de página aparecerá un determinado elemento?

Answer 1

No hay funcionalidad incorporada en CSS para esto.

Una idea:
Se podría tal vez trate de envolver cada uno de sus informes en un div y luego usar algo como jQuery para calcular la height de la div a averiguar si se termina en una página impar.

Si termina en una página impar, luego inserte un div vacío con su clase de salto de página después de eso para que se transmita a la página siguiente.

EDITAR
Obviamente, esto sólo es realmente trabajar si se conoce el dpi a la que se imprime página en su impresora de destino. No hay una respuesta mágica que funcione para todos los escenarios.

• 72 dpi (web) = 595 x 842 pixeles
• 300 dpi (impresión) = 2480 x 3508 pixeles ("210 mm X 297 mm @ 300 dpi")
• 600 dpi (impresión) = 4,960 X 7016 píxeles

Tendría que experimentar un poco aquí con su configuración de impresora estándar para ver qué funciona para usted/su cliente (s). Si hay varios escenarios, puede dejarlos seleccionar desde un menú desplegable.

Así que tendría que utilizar jQuery para comprobar la altura en píxeles de la div, compararla con la altura en píxeles de la página para ver si el div termina en una página par o impar - luego inyectar el salto de página si los extremos de informe en una página impar.

También necesitaría saber por adelantado si el usuario va a utilizar la impresión dúplex, ya que solo necesitaría hacer esto para la impresión dúplex.

Answer 2

Hay funcionalidad CSS en el estándar. Estás en el camino correcto. Uso:

<div style="page-break-after: right"> 
-- your content -- 
</div> 

El problema es que, actualmente, el único navegador importante que admite esto es Opera. Sin embargo, Opera tiene sus propios problemas complejos con la impresión, pero podría funcionar para su situación.