Estoy diseñando un conjunto de páginas HTML para imprimir, y quiero que los elementos de las páginas terminen en la misma escala entre sí. Por ejemplo, hay una clase de div cuyo ancho se define como 200px de ancho aparece en cada una de varias páginas. Quiero que aparezca exactamente del mismo tamaño cuando se imprime cada página (adecuado para, por ejemplo, recortar y superponer).

Estoy usando algunas cosas que funcionan mejor en Chrome (principalmente la regla de zoom CSS para tener copias más pequeñas de elementos en otro lugar), así que lo ideal sería seguir usando Chrome. (Esto sería más fácil en Firefox, porque tiene una relación de escala explícita en el diálogo de impresión). Pero parece que en Chrome,Mantener el mismo elemento un tamaño consistente cuando se imprime de diferentes páginas está lejos de ser fácil.

La generación de PDF de Chrome (que es lo que hace la impresión desde Chrome debajo del capó) parece seleccionar alguna sección para definir el ancho de la página y escalar el resto de la página en función de eso. O tal vez intenta establecer el tamaño de la página para que se ajuste a un número "óptimo" de elementos en una página. Si los elementos de encuadre exterior de cada página no tienen el mismo tamaño en todos los casos, entonces parece que los elementos con un tamaño de pantalla de 200 px pueden salir desde 3-4 cm hasta 1,5-2cm o incluso más pequeños.

Solo usando@page size no ayuda: tengo este CSS y no hace ninguna diferencia:

@media print {
  @ page size: 297mm 210mm 
}

¿Alguien tiene alguna idea sobre cómo hacer que las cosas se impriman con tamaños consistentes?

Una solución extrema que podría aplicar es convertirlas en todas las partes de una gran página HTML, y usar Javascript para marcar ciertas partes como las únicas partes que se imprimirán ... Ni siquiera estoy seguro de si eso funcionaría, y es así. Estaré más limpio para agilizar las cosas en unas pocas páginas diferentes. Entonces, ¿hay alguna otra idea?