attribute - CSS para establecer el tamaño de papel A4

css hoja a4

Question

Necesito simular un papel A4 en la web y permitir imprimir esta página como se muestra en el navegador (Chrome, específicamente). Establecí el tamaño del elemento en 21 cm x 29,7 cm, pero cuando envío para imprimir (o imprimir vista previa) clip de mi página.

¡Mira este ejemplo en vivo !

HTML

<div class="book">
    <div class="page">
        <div class="subpage">Page 1/2</div>    
    </div>
    <div class="page">
        <div class="subpage">Page 2/2</div>    
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px red solid;
    height: 256mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

Creo que me estoy olvidando de algo. Pero, ¿qué sería?

• Chrome : página de recorte, doble página ( es justo lo que necesito para que funcione )
• Firefox : funciona a la perfección.
• IE10 : lo creas o no, ¡es perfecto!
• Opera : muy buggy en la vista previa de impresión

Answer 1

Analicé esto un poco más y el problema real parece ser asignar initial width página initial a la regla de medios print . Parece que en el width: initial Chrome width: initial en el elemento .page da como resultado escalar el contenido de la página si no se define ningún valor de longitud específico para el width en ninguno de los elementos principales ( width: initial en este caso se resuelve en width: auto ... pero en realidad cualquier valor menor que el tamaño definido en la regla @page causa el mismo problema).

Entonces, no solo el contenido ahora es demasiado largo para la página (alrededor de 2cm ), sino que el relleno de la página será un poco más que los 2cm iniciales y así sucesivamente (parece presentar el contenido bajo width: auto al ancho de ~196mm 210mm y luego escala todo el contenido hasta el ancho de 210mm ~, pero extrañamente exactamente el mismo factor de escala se aplica a los contenidos con cualquier ancho inferior a 210mm ).

Para solucionar este problema, simplemente puede asignar la anchura de papel A4 y hight a html, body o directamente a .page y, en este caso, evitar la palabra clave initial .

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{Esto parece mantener todo lo demás como está en tu CSS original y solucionar el problema en Chrome (probado en diferentes versiones de Chrome en Windows, OS X y Ubuntu).}

Answer 2

https://github.com/cognitom/paper-css parece resolver todas mis necesidades.

Papel CSS para una impresión feliz

Solución de impresión frontal: ¡previsualizable y recargable en vivo!

Answer 3

CSS

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

DEMO