Какова безопасная ширина в пикселе для печати веб-страницы?
Моя страница содержит большие изображения, и я хочу убедиться, что они не будут разрезаны при печати.
Я знаю разные поля браузера и размеры бумаги Letter Letter/DIN A4. Таким образом, мы получили стандартные буквы и некоторые значения DPI по умолчанию. Но могу ли я преобразовать их в значения пиксель, чтобы указать в атрибуте "width" изображения?
Что касается истинного "универсального ответа", я не могу его предоставить. Я могу, однако, дать простой и окончательный ответ для некоторых подробностей...
670 PIXELS
По крайней мере, это, по-видимому, безопасный ответ для продуктов Microsoft. Я прочитал много предложений, в том числе 675, но после тестирования я сам это 670, что я придумал.
Все ошибки DPI, проблемы с марже, различия в оборудовании в стороне, этот ответ основан на том факте, что если я использую предварительный просмотр в IE9 (со стандартными полями) - и УСТАНОВИТЕ РАЗМЕР ПЕЧАТИ до 100%, а не по умолчанию "усадка чтобы соответствовать", все подходит для страницы без обрезания этой ширины.
Если я отправлю HTML-письмо себе и получаю его с помощью Windows Live Mail 2011 (каким был Outlook Express), и я печатаю страницу шириной 670 - снова все подходит. Это справедливо, если я отправлю его на реальную копию или файл MS XPS (виртуальная распечатка).
Прежде чем экспериментировать, я использовал произвольную ширину 700. Во всех упомянутых выше сценариях часть страницы была отключена. Когда я уменьшился до 670, все идеально подойдет.
Что касается того, как я установил ширину, я просто использовал примитивную таблицу "обертка" html и определил ее ширину как 670.
Если вы можете диктовать программное обеспечение конечных пользователей, такие вопросы могут быть прямолинейными. Если вы не можете (как это обычно бывает, конечно), вы можете протестировать данные, например, какие браузеры они используют и т.д., И жестко определить решения для важных. Между IE и FF вы охватите буквально около 90% веб-пользователей. Поместите другой код для "всех остальных", который обычно работает и называет его днем ...
Это не так просто, как выглядит. Я просто столкнулся с подобным вопросом, и вот что я получил: во-первых, немного фона на wikipedia.
Далее, в CSS, для бумаги, они имеют pt, то есть точку или 1/72 дюйма. Поэтому, если вы хотите иметь такой же размер изображения, как на мониторе, сначала вам нужно знать DPI/PPI вашего монитора (обычно 96, как упоминалось в статье в Википедии), затем преобразовать его в дюймы, а затем преобразовать в точек (разделите на 72).
Но опять же, у браузеров есть всевозможные проблемы с печатаемым контентом, например, если вы пытаетесь использовать теги float css, браузеры на базе Gecko сократят среднюю страницу изображений, даже если вы используете разрывы страниц, внутри: избегать; на изображениях (см. здесь система отслеживания ошибок Mozilla).
В этой статье больше говорится о печати из браузера в A List Apart.
Кроме того, в предварительном просмотре печати вам нужно иметь дело с шириной "Shrink to Fit" и различными форматами бумаги и ориентациями.
Итак, либо вы просто определяете хороший размер изображения в дюймах, я имею в виду точки, (7.1 "* 72 = 511.2, поэтому width: 511pt; будет работать на бумаге с размером буквы) независимо от размеров пикселей или ширины ширины прохода, и основывайте ширину изображения на размере бумаги.
Удачи...
Одним из решений проблемы, которую я нашел, было просто установить ширину в дюймах. Пока что я только тестировал/подтвердил это, работая в Chrome. Он отлично работал для того, для чего я использовал его (для распечатки листа размером 8,5 x 11).
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
Для печати я не устанавливаю никакой ширины и не удаляю никаких препятствий, которые не позволяют динамику ширины вашего макета печати. Если вы сделаете окно браузера меньше и меньше, контент не будет вырезан/скрыт, но документ будет больше. Таким образом, вы можете быть уверены, что остальные будут обрабатываться принтером/pdf-создателем.
Как насчет элементов с фиксированной шириной, таких как изображения или таблицы?
Параметры, о которых я могу думать:
http://www.intensivstation.ch/en/css/print/
или любой другой результат Google для сочетаний: CSS, печать, мультимедиа, макет
Принтер не понимает пиксели, он понимает точки (pt в CSS). Лучшее решение - написать дополнительный CSS для печати со всеми его мерами в точках.
Затем в вашем HTML-коде в разделе главы поставьте:
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
Решение, обеспечивающее, чтобы изображения не вырезались при печати на веб-странице, должно иметь следующее правило CSS:
@media print {
img {
max-width:100% !important;
}
}
Я сомневаюсь, что есть один... Это зависит от браузера, от принтера (физический максимальный dpi) и его драйвера по размеру бумаги, как вы указываете (и я могу печатать на бумаге B5 тоже...) на настройках (пейзаж или портрет?), плюс вы часто можете изменить масштаб (процент) и т.д.
Пусть пользователи настраивают свои настройки...