Как установить границы печати Safari через CSS для печати без полей

Ответ 1

Есть 3 вещи, которые следует учитывать:

• Предел правила страницы, к сожалению

  @page {
  margin: 0cm !important;
  }
  

  Не влияет на Safari 6, где он работает в Chrome 23. Как я знаю, до тех пор, пока Safari не поддерживает это, нет решения (похоже, оно исправлено до 10 мм).

  /li >

• Настройки страницы, как показано здесь, возможно, вам придется определить пользовательский "Размер бумаги" в панели меню "Печать..." без каких-либо ограничений (вы сделали это уже btw).

• Очевидно, чтобы заботиться о другом внутреннем содержимом html, body... не иметь никакого поля.

Ответ 2

Выбранный ответ не совсем прав. Чтобы правильно ответить на вопрос, вам нужно сначала понять проблему.

Печать и принтеры без полей:

Очень немногие принтеры могут "на самом деле" печатать отпечатки без полей, даже если говорят, что делают. Просто немного увеличьте печать, чтобы он растянулся за пределы фактической страницы и, как правило, дал вам ползунок, чтобы настроить эту сумму. Причина в том, что у большинства принтеров нет датчика, чтобы определить, где бумага на самом деле, она предполагает, что бумага есть, а для большинства принтов не имеет значения, если она составляет 0,5 мм или даже 1 мм.

Для без полей важно, потому что печать выходит с белой (бумажной) рамкой вокруг него.

По этой причине 95% принтеров там имитируют эту "безграничную" печать, фактически заправляя чернилами в тонкий воздух немного, чтобы бумага была полностью покрыта краем. Печать в тонком воздухе плохая, может вызвать пятна в долгосрочной перспективе и его следует избегать, поэтому количество печати по краю должно быть скорректировано до минимума.

Хорошие широкоформатные принтеры имеют датчик для определения ширины бумаги, но он слегка менял бумагу, потому что длина от 50 до 150 м на рулон может вызвать даже несоосность 0,1 мм, чтобы стать проблемой и вызвать застревание бумаги.

Чтобы полностью исправить эту проблему, используется "bleed", где вы фактически создаете все на несколько более крупную бумагу, размер которой впоследствии уменьшается.

Хорошо... теперь вы знаете.

Перейти к проблеме печати без полей CSS:

Чтобы полностью понять эту проблему, нужно познакомиться с "ящиком".

Коробка моделирует поведение почти каждого элемента в CSS. Страница, которую вы хотите распечатать, обычно завершается тегом какого-либо типа: div с и id или класс, подобный этому:

<div class="page">lots of content</div>

Мы будем говорить о черной линии, называемой границей, и это две братья и сестры "margin" и "padding".

Неизвестно, что каждый принтер на самом деле сообщает, что поля внутри него могут печатать для каждого поддерживаемого формата бумаги.

Здесь HP 2800dtn делает это (просто наведите указатель мыши на размер бумаги на некоторое время, и он появится).

"Исправить":

Safari делает все правильно. Там я сказал это... это не ошибка.

Причина, по которой он, по-видимому, отказывается производить печать без полей, заключается в том, что она фактически невозможна (в реальном мире). Вы можете это сделать, но люди, печатающие его при 100% масштабировании, будут иметь содержимое, обрезанное принтером, которое, как я описал, не может печатать на краю.

Таким образом, большинство из них должны будут соответствовать полям "соответствовать бумаге" (по умолчанию OS X, уменьшено до примерно 98% масштабирования), затем включить режим печати без полей на принтере, который, в свою очередь, увеличивает масштабированную версию масштабирования 98% до 103%. Если вы делаете математику, вы получаете странное количество, вероятно, 101,5% от исходной версии (я не могу сказать точно, я не очень хорошо разбираюсь в математике, если он не делится на два:) Это не совсем проблема для шрифтов и векторной графики, но это приводит к хаосу в мире пикселей. Мир пикселей нравится, как и я, номер 2 по умолчанию, остальное просто "сглаживает" его.

Итак, вы не можете это исправить, потому что он не сломан. Safari помещает границу div и всех ее внутренних элементов в "область печати" на бумаге, о которой сообщает принтер. Хорошо!

Решение:

Вы не можете знать поля принтера, пока не нажмете команду + p и не выберите размер бумаги.

Но что вы можете сделать в CSS, чтобы понять, что "что вы видите, что вы получаете", чувствуя, что все любят?

• Используйте поле на выбранной div.page. Обратите внимание, что маржа вычисляется из элемента, содержащего этот div. Поэтому вам нужно обернуть page в actualpage

Определите CSS на тип носителя, чтобы на экране отображались воображаемые поля печати (близкие к реальным), а печать получила версию без полей.

/* @media all { */ /* I like using these */
  div.actualpage {
   ...
   height: 210mm; /* DIN A4 standard paper size */
   width: 297mm;
   ...
  }
  div.page {
   ...
   /* margin: 0;  you don't really have to explicitly set it to 0 unless it already set to something else */
   ...
  }
/* } */

@media screen {
 div.page {
  ...
  margin: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
  ...
  }
}

@media print {
 div.page {
  ...
  margin: 0mm; /* Browser will apply the correct margins when it prints */
  ...
  }
}

Если вы не можете перевернуть страницу в другой div, вы можете ее взломать (то есть: менее элегантное решение) с дополнением.

/* @media all { */ /* I like using these */
  div.page {
   ...
   height: 210mm; /* DIN A4 standard paper size */
   width: 297mm;
   /* padding: 0;  you don't really have to explicitly set it to 0 unless it already set to something else */
   ...
  }
/* } */

@media screen {
 div.page {
  ...
  padding: 5mm 5mm 5mm 10mm; /* printers usually have a bigger bottom margin*/
  ...
  }
}

@media print {
 div.page {
  ...
  padding: 0mm; /* Browser will apply the correct margins when it prints */
  ...
  }
}