CSS para establecer el tamaño de papel A4


233

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

¡Mira este ejemplo en vivo !

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;
  }
}
<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>

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

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

11
Gracias por la plantilla, es increíble.
vektor

1
La respuesta correcta está aquí: stackoverflow.com/a/34018790/293856
unom


Respuestas:


241

Investigué esto un poco más y el problema real parece ser la asignación initiala la página widthbajo la printregla de medios. Parece que en Chrome width: initialel .pageelemento da como resultado la escala del contenido de la página si no se define un valor de longitud específico para widthninguno de los elementos principales ( width: initialen este caso se resuelve en width: auto... pero en realidad cualquier valor más pequeño que el tamaño definido en la @pageregla causa el mismo problema).

Entonces, no solo el contenido ahora es demasiado largo para la página (aproximadamente 2cm), sino que también el relleno de la página será un poco más que el inicial 2cmy así sucesivamente (parece reducir el contenido width: autoal ancho ~196mmy luego escalar todo el contenido hasta el ancho de 210mm~ pero extrañamente se aplica exactamente el mismo factor de escala a los contenidos con cualquier ancho menor que 210mm).

Para solucionar este problema, simplemente puede, en la printregla de medios, asignar el ancho y la altura del papel A4 ao html, bodydirectamente .pagey, en este caso, evitar la initialpalabra clave.

MANIFESTACIÓN

@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 su CSS original y solucionar el problema en Chrome (probado en diferentes versiones de Chrome en Windows, OS X y Ubuntu).


¿Cómo llegaste al 256mm(y por lo tanto 237mm, eventualmente) para el .subpageelemento?
caw

@MarcoW. Creo que el OP 256mmestá ligeramente redondeado hacia abajo en la altura del papel A4 sin el relleno de la página: 297mm - 2*20mm... tal vez 257mmsería un poco más obvio ;-) Y en mi ejemplo anterior, 237mmrepresentaba el contenido ~2cm"demasiado largo" ... pero solo resuelto superficialmente el problema. Vea mi respuesta actualizada arriba para la solución real.
Martin Turjak

10
Hola @MartinTurjak, modifiqué tu violín a una versión de carta de EE. UU., En caso de que alguien esté interesado. jsfiddle.net/2wk6Q/2957 ¡Salud!
Ben

Tengo 4 campos en la impresión de una página, cómo dividir el tamaño igual de todos los campos ... ¿cuál es el tamaño de la página de impresión en pxl?
Vikram

2
@Brad: no funcionó para mí. Aún creando una página en blanco entre cada página.
Sebastian Farham

37

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>

MANIFESTACIÓN



2
Parece funcionar. Pero box-shadow: 0;no funciona (al menos en Chrome), debería serlo box-shadow: none;. Las dos declaraciones de margen también se pueden combinar margin: 0 auto 0.5cm;.
mts knn

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.