page-break dentro de un DIV con posición relativa

merchay · #1 (**permalink**) 13/04/2011, 17:13

Buenas a todos.

Necesito que al previsualizar una página HTML (print preview) se registre un salto de página de manera correcta, pero restringido a las condiciones del siguiente código:

Código:

<html>
	<div style="height: 960px; width: 600px; display: block; position: relative;" >
		<div style="top:20px; position: absolute;">DIV 1</div>
		<div style="top:1050px; position: absolute;">DIV 2</div>
	</div>
</html>

Tener componentes con posición absoluta dentro de un DIV con posición relativa.
Buscando en la web encontré que el tamaño vertical en "px" de una página A4 es 960px, pero como se ve en el código, el segundo DIV está mucho más abajo que eso.

Además, el page break no se ejecuta automáticamente, y en la práctica no puedo agregar a mano un style="page-brake-before:always"... porque mi página es creada con expansión dinámica a través de un iterador de Tapestry.

Cualquier ayuda es bien recibida. Gracias.

zerokilled · #2 (**permalink**) 14/04/2011, 04:52

Cita:

Buscando en la web encontré que el tamaño vertical en "px" de una página A4 es 960px...

buenas,
de donde sea que hayas obtenido ese dato, tecnicamente no esta mal ni bien. la conversion de cualquier unidad a pixeles no se hace sobre un valor fijo sino a base de otros aspecto. en este caso, sobre la cantidad de puntos o pixeles en una dimension para una unidad dada. mas aun, no todos los dispositivo tienen un mismo valor. por ejemplo, un monitor por lo general esta configurado a 96ppi (pixel-per-inch) lo cual es equivalente a ~3.7795 pixeles en un milimetro.

monitor: 96ppi / 25.4mm = ~3.7795 pixel/mm (pixel-per-millimeter)
impreso alta resolucion: 300dpi / 25.4mm = ~11.811 pixel/mm

de modo que si un A4 de alto mide 297mm
monitor: ~3.7795 * 297 = 1123px
impreso alta resolucion: ~11.811 * 297 = 3508px

como ves, absolutamente no es lo mismo. mi recomendacion es que si vas a imprimir un documento html, siempre utiliza unidades relacionadas al impreso.

en tu caso, asumiendo que 960px equivale a 297mm, se entiende que la resolucion/milimetro es 960 / 297 = 3 pixel/mm o lo mismo que 82ppi. si estos son tus parametros, entonces esta correcto. por eso al inicio mencionaba que tecnicamente no esta bien ni mal.

kseso? · #3 (**permalink**) 14/04/2011, 06:16

En cada medio hay que utilizar las medidas propias. Para medios impresos el tamaño de las cajas en mm o cm y las fuentes en puntos o mm. Para éstas últimas debería apoyarse en cualquier editor de textos para tener una referencia.

La mejor manera es crear un archivo css propio para la impresión (en papel) e incluirlo con el media="print"

Aquí se podrá informar algo más al respecto [ing], incluido los saltos de página y sus posibles valores.

merchay · #4 (**permalink**) 14/04/2011, 08:23

Muchas gracias por sus comentarios a cerca de los pixels-per-inch. Me han servido de mucho para entender el concepto.

Sin embargo, el problema principal permanece. El DIV 2, que está posicionado en un lugar por debajo del tamaño normal de una página no se puede visualizar (queda 'escondido') y si coloco un page-break-before en medio de DIV 1 y DIV 2 el break no aplica directamente ya que al estar estos dentro de un DIV más externo, el salto de página se aplica debajo de éste gran DIV.

Gracias por sus comentarios.