CSS для установки формата бумаги A4

Question

CSS для установки формата бумаги A4

мне нужно имитировать бумагу формата А4 в интернете и разрешить печатать эту страницу, как она отображается в браузере (Chrome, в частности). Я установил размер элемента в 21 см x 29,7 см, но когда я отправляю на печать (или предварительный просмотр), он обрезает мою страницу.

посмотреть этот видео!

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>

Кажется, я что-то забыл. Но что бы это могло быть?

хром страница вырезка, разворот (это именно то, что мне нужно, чтобы он работал)

Firefox: он отлично работает.

IE10: верьте или нет, это прекрасно!

Опера: очень глючит на предварительный просмотр

731 3

css printing print-preview

3 ответов:

Comments

Ничего не найдено.

Martin Turjak · Accepted Answer · 2014-09-14 19:29:09

я посмотрел на это немного больше и актуальна проблема, кажется, с присвоением initial на странице width под print правила СМИ. Похоже, что в Chrome width: initial на .page элемент масштабирование содержимого страницы, если для на любом из родительских элементов (width: initial в этом случае сводится к width: auto ... но на самом деле любое значение меньше, чем размер, определенный под @page правило вызывает тот же вопрос.)

так что не только содержимое слишком долго для страницы (примерно 2cm), но и заполнение страницы будет немного больше, чем начальное 2cm и так далее (кажется, чтобы отобразить содержимое под width: auto ширина ~196mm а затем масштабировать весь контент до ширины 210mm ~ странно, но точно такой же коэффициент масштабирования применяется к содержимое с любой шириной меньше 210mm).

исправить эту проблему вы можете просто в print Media rule назначьте ширину и высоту бумаги формата A4 на html, body или непосредственно в .page и в этом случае избежать initial ключевое слово.

демо
@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}
^{это, кажется, держать все остальное так, как это в вашем исходном CSS и исправить проблему в Chrome (проверено в разных версии Chrome под Windows, OS X и Ubuntu).}

Salim · Accepted Answer · 2015-05-20 12:34:04

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>

демо

Mark Boulder · Accepted Answer · 2017-05-09 17:53:51

https://github.com/cognitom/paper-css кажется, чтобы решить все мои потребности.

бумага CSS для счастливой печати

Front-end решение для печати-просмотр и живая-перезагрузка!