Какова безопасная ширина в пикселях для печати веб-страницы?
Моя страница содержит большие изображения, и я хочу убедиться, что они не будут обрезаны при печати.
Я знаю о разных полях браузера и размерах бумаги US Letter / DIN A4. Итак, мы получили стандартный размер букв и некоторые значения DPI по умолчанию. Но могу ли я преобразовать их в значения пикселей, чтобы указать в widthатрибуте изображения ?
Ответы:
Что касается истинного «универсального ответа», я не могу его дать. Однако я могу дать простой и окончательный ответ на некоторые детали ...
670 ПИКСЕЛЕЙ
По крайней мере, это кажется безопасным ответом для продуктов Microsoft. Я прочитал много предложений, в том числе 675, но, протестировав это сам, я придумал 670.
Если оставить в стороне все DPI, проблемы с полями, аппаратные различия, этот ответ основан на том факте, что если я использую предварительный просмотр печати в IE9 (со стандартными полями) - и УСТАНАВЛИВАЮ РАЗМЕР ПЕЧАТИ НА 100%, а не на значение по умолчанию «сжатие по размеру» , все умещается на странице, не обрезаясь по ширине.
Если я отправлю себе электронное письмо в формате HTML и получаю его с помощью Windows Live Mail 2011 (чем стал Outlook Express) и распечатываю страницу с шириной 670 - снова все подходит. Это верно, если я отправлю его в виде реальной бумажной копии или файла MS XPS (виртуальная распечатка).
До экспериментов я использовал произвольную ширину 700. Во всех сценариях, упомянутых выше, часть страницы обрезалась. Когда я уменьшил до 670, все подошло идеально.
Что касается того, как я устанавливаю ширину - я просто использовал примитивную html-таблицу «обертку» и определил ее ширину равной 670.
Если вы можете диктовать программное обеспечение конечного пользователя, такие вопросы могут быть простыми. Если вы не можете (как это обычно бывает), вы можете проверить детали, например, какие браузеры они используют и т. Д., И жестко запрограммировать решения для наиболее важных из них. Между IE и FF вы охватите буквально около 90% веб-пользователей. Добавьте какой-нибудь другой код для «всех остальных», который обычно работает, и закончите ...
Это не так просто, как выглядит. Я просто столкнулся с аналогичным вопросом, и вот что у меня получилось: Во-первых, небольшая предыстория в Википедии .
Затем в CSS для бумаги они имеют ptточку, или 1/72 дюйма. Поэтому, если вы хотите иметь тот же размер изображения, что и на мониторе, сначала вы должны знать DPI / PPI вашего монитора (обычно 96, как указано в статье в Википедии), затем преобразовать его в дюймы, а затем преобразовать в баллы (разделите на 72).
Но опять же, у браузеров есть всевозможные проблемы с печатаемым контентом, например, если вы попытаетесь использовать теги float css, браузеры на основе Gecko обрежут ваши изображения посередине страницы, даже если вы используете page-break-inside: избегайте ; на ваших изображениях (см. здесь, в системе отслеживания ошибок Mozilla ).
В этой статье на A List Apart есть (гораздо) больше о печати из браузера .
Кроме того, при предварительном просмотре печати необходимо задать ширину «Сжимать по размеру», а также различные размеры и ориентацию бумаги.
Итак, вы либо просто выбираете подходящий размер изображения в дюймах, я имею в виду в пунктах (7,1 "* 72 = 511,2, поэтому width: 511pt;будет работать для бумаги формата Letter) независимо от размеров пикселей, либо выбираете ширину в процентах и основываете ширину вашего изображения. от размера бумаги.
Удачи...
Одним из решений проблемы, которое я нашел, было просто установить ширину в дюймах. Пока я только тестировал / подтверждал, что это работает в Chrome. Он хорошо работал для того, для чего я его использовал (для печати листа 8,5 x 11)
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print, вы можете установить их. Вы можете установить size: letterили size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
Для печати я не устанавливаю ширину и не удаляю препятствия, которые мешают вашему макету печати иметь динамическую ширину. Это означает, что если вы сделаете окно браузера все меньше и меньше, содержимое не будет вырезано / скрыто, а документ просто станет длиннее. Таким образом, вы можете быть уверены, что все остальное сделает принтер / создатель pdf.
А как насчет элементов с фиксированной шириной, таких как изображения или таблицы?
Варианты, которые я могу придумать:
http://www.intensivstation.ch/en/css/print/
или любой другой результат Google для комбинаций: CSS, print, media, layout
Чтобы избежать обрезки изображений при печати на веб-странице, можно использовать следующее правило CSS:
@media print {
img {
max-width:100% !important;
}
}
Принтер не понимает пиксели, он понимает точки (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">
<img>тегу окружение, <div>div получает ширину и высоту в pt, а img получаетwidth:100%; height:100%;
Я сомневаюсь, что есть один ... Это зависит от браузера, от принтера (физический макс. Dpi) и его драйвера, от размера бумаги, как вы указываете (и я, возможно, тоже захочу печатать на бумаге B5 ...), от настроек ( пейзаж или портрет?), плюс вы часто можете изменить масштаб (процент) и т. д.
Позвольте пользователям изменять свои настройки ...
width:autoкоторая отрегулирует ширину содержимого в соответствии с шириной бумаги