Безопасная ширина в пикселях для печати веб-страниц?

Какова безопасная ширина в пикселях для печати веб-страницы?

Моя страница содержит большие изображения, и я хочу убедиться, что они не будут обрезаны при печати.

Я знаю о разных полях браузера и размерах бумаги 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;
    }
}

Для печати я не устанавливаю ширину и не удаляю препятствия, которые мешают вашему макету печати иметь динамическую ширину. Это означает, что если вы сделаете окно браузера все меньше и меньше, содержимое не будет вырезано / скрыто, а документ просто станет длиннее. Таким образом, вы можете быть уверены, что все остальное сделает принтер / создатель pdf.

А как насчет элементов с фиксированной шириной, таких как изображения или таблицы?

Изображений

Варианты, которые я могу придумать:

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

Столы

• удалить фиксированную ширину
• используйте ландшафт, если у вас действительно есть таблицы с большим количеством информации
• не используйте таблицы для разметки
• исключить из печати
• извлечь содержимое, распечатать его как абзацы

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">

Я сомневаюсь, что есть один ... Это зависит от браузера, от принтера (физический макс. Dpi) и его драйвера, от размера бумаги, как вы указываете (и я, возможно, тоже захочу печатать на бумаге B5 ...), от настроек ( пейзаж или портрет?), плюс вы часто можете изменить масштаб (процент) и т. д.
Позвольте пользователям изменять свои настройки ...