Я использую для печати отдельную таблицу стилей. Можно ли установить правое и левое поле в таблице стилей, которые задают поле для печати (т.е. поле на бумаге).
Спасибо.
источник
Я использую для печати отдельную таблицу стилей. Можно ли установить правое и левое поле в таблице стилей, которые задают поле для печати (т.е. поле на бумаге).
Спасибо.
Вы должны использовать cm
или mm
как единицу, когда указываете для печати. Использование пикселей заставит браузер преобразовать его во что-то похожее на то, как оно выглядит на экране. Использование cm
или mm
обеспечит одинаковый размер на бумаге.
body
{
margin: 25mm 25mm 25mm 25mm;
}
Размеры шрифта используйте pt
для печатных носителей.
Обратите внимание, что установка поля на теле в стиле css не отрегулирует поле в драйвере принтера, которое определяет область печати принтера, или поле, контролируемое браузером (может быть изменено в предварительном просмотре печати в некоторых браузерах) ... Это просто установит поле документа внутри области печати.
Вы также должны знать, что IE7 ++ автоматически настраивает размер для наилучшего соответствия и приводит к тому, что все идет не так, даже если вы используете cm
или mm
. Чтобы изменить это поведение, пользователь должен выбрать «Предварительный просмотр», а затем установить размер печати 100%
(по умолчанию Shrink To Fit
).
Лучшим вариантом для полного контроля над печатными полями является использование @page
директивы для установки поля бумаги, что повлияет на поле на бумаге за пределами элемента тела html, который обычно контролируется браузером. См. Http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
В настоящее время это работает во всех основных браузерах, кроме Safari.
В Internet Explorer поле фактически установлено на это значение в настройках для этой печати, и если вы сделаете предварительный просмотр, вы получите это значение по умолчанию, но пользователь может изменить его в предварительном просмотре.
@page
{
size: auto; /* auto is the initial value */
/* this affects the margin in the printer settings */
margin: 25mm 25mm 25mm 25mm;
}
body
{
/* this affects the margin on the content before sending to printer */
margin: 0px;
}
Связанный ответ: Отключение параметров печати браузера (заголовки, нижние колонтитулы, поля) со страницы?
<body class="firefox">
чтобы в вашем css вы могли это сделатьbody.firefox {margin: 0mm; padding: 0.25in;}
, это на самом деле поле 0,75 дюйма, потому что Firefox уже добавляет 0,5 дюйма. Это должно работать до тех пор, пока вам нужны поля> = 0,5 дюйма.Во-первых, я пытаюсь заставить всех своих пользователей использовать Chrome при печати, потому что другие браузеры создают разные макеты.
Ответ на этот вопрос рекомендует:
@page { size: 210mm 297mm; /* Chrome sets own margins, we change these printer settings */ margin: 27mm 16mm 27mm 16mm; }
Однако в итоге я использовал этот CSS для печати всех своих страниц:
@media print { @page { size: A4; /* DIN A4 standard, Europe */ margin:0; } html, body { width: 210mm; /* height: 297mm; */ height: 282mm; font-size: 11px; background: #FFF; overflow:visible; } body { padding-top:15mm; } }
Особый случай: длинные столы
Когда мне нужно напечатать таблицу на несколько страниц, то
margin:0
с@page
лидировал до кровоточащих краев:Я мог решить эту проблему благодаря этому ответу :
table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-group; } tfoot { display:table-footer-group; }
Плюс установка полей сверху-снизу для
@page
:@page { size: auto; margin: 20mm 0 10mm 0; } body { margin:0; padding:0; }
Результат:
Я бы предпочел краткое решение, работающее со всеми браузерами. На данный момент я надеюсь, что приведенная выше информация может помочь некоторым разработчикам в решении подобных проблем.
источник
Обновленное, простое решение
@media print { body { display: table; table-layout: fixed; padding-top: 2.5cm; padding-bottom: 2.5cm; height: auto; } }
Старое решение
Создайте раздел с каждой страницей и используйте приведенный ниже код для настройки полей, высоты и ширины.
Если вы печатаете формата А4.
Тогда пользователь
Размер: 8,27 дюйма и 11,69 дюйма
@page Section1 { size: 8.27in 11.69in; margin: .5in .5in .5in .5in; mso-header-margin: .5in; mso-footer-margin: .5in; mso-paper-source: 0; } div.Section1 { page: Section1; }
затем создайте div со всем вашим содержимым.
<div class="Section1"> type your content here... </div>
источник
class=Section1
должно бытьclass="Section1"
.Я лично предлагаю использовать другую единицу измерения, чем
px
. Я не думаю, что пиксели имеют большое значение с точки зрения печати; в идеале вы должны использовать:Я уверен, что есть и другие, и одну отличную статью о print-css можно найти здесь: « Переход к печати » Эрика Мейера .
источник
px
это не имеет большого отношения к печати. Но браузеры «переводят» пиксельные единицы, так что это похоже на то, как это выглядит на экране. Он не использует "точки разрешения принтера" как пиксели (слава богу ...).Я также рекомендую pt по сравнению с cm или mm, так как это более точно. Кроме того, я не могу заставить @page работать в Chrome (версия 30.0.1599.69 m). Он игнорирует все, что я поставил для полей, больших или малых. Но вы можете заставить его работать с полями основного текста в документе, как ни странно.
источник
Если вам известен целевой размер бумаги, вы можете поместить свое содержимое в DIV с этим конкретным размером и добавить поле к этому DIV для имитации поля печати. К сожалению, я не верю, что у вас есть дополнительный контроль над функциями печати, кроме простого отображения диалогового окна печати.
источник