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

Question

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

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

Я знаю о различных полях браузера и размерах бумаги США Letter / DIN A4. Таким образом, мы получили стандартный размер буквы и некоторые значения DPI по умолчанию. Но можно ли преобразовать их в значения pixel для указания в атрибуте width изображения?

Answer 1

Что касается истинного «универсального ответа», я не могу его дать. Однако я могу дать простой и точный ответ на некоторые подробности ...

670 ПИКСЕЛОВ

По крайней мере, это похоже на безопасный ответ для продуктов Microsoft. Я прочитал много предложений, в том числе 675, но после тестирования сам 670 - это то, что я придумал.

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

Если я отправлю себе электронное письмо в формате HTML и получу его с помощью Windows Live Mail 2011 (то, что стало Outlook Express), и я распечатаю страницу шириной 670 - снова все подходит. Это справедливо, если я отправляю его в настоящую печатную копию или в файл MS XPS (виртуальная распечатка).

До того, как я экспериментировал, я использовал произвольную ширину 700. Во всех сценариях, упомянутых выше, часть страницы была обрезана. Когда я уменьшил до 670, все идеально подошло.

Что касается того, как я устанавливаю ширину - я просто использовал примитивную «обертку» html-таблицу и определил ее ширину 670.

Если вы можете диктовать программное обеспечение конечного пользователя, такие вопросы могут быть простыми. Если вы не можете (как это обычно бывает, конечно), вы можете проверить детали, например, какие браузеры они используют и т. Д., И жестко закодировать решения для важных. Между IE и FF вы охватите буквально около 90% веб-пользователей. Вставьте какой-нибудь другой код для «всех остальных», который обычно работает, и называйте это днем ​​...

Answer 2

Это не так просто, как выглядит. Я просто столкнулся с похожим вопросом, и вот что я получил: Во-первых, немного информации о Википедии .

Далее в CSS для бумаги они имеют pt, то есть точку, или 1/72 дюйма. Поэтому, если вы хотите, чтобы изображение было того же размера, что и на мониторе, сначала вы должны знать DPI / PPI вашего монитора (обычно 96, как упомянуто в статье в Википедии), затем преобразовать его в дюймы, а затем преобразовать в очки (делим на 72).

Но опять же, у браузеров возникают всевозможные проблемы с печатным контентом, например, если вы попытаетесь использовать теги float css, браузеры на основе Gecko обрежут ваши изображения в середине страницы, даже если вы используете разрыва страницы внутри: избегать; на ваших изображениях (см. здесь, в системе отслеживания ошибок Mozilla ).

В этой статье (1013) * A List Apart .

есть (много) больше о печати из браузера.

Кроме того, в предварительном просмотре печати необходимо указать ширину «Уменьшить до нужного» и различные размеры и ориентации бумаги.

Так что либо вы просто выбираете хороший размер изображения в дюймах, я имею в виду точки (7,1 "* 72 = 511,2, поэтому width: 511pt; будет работать для бумаги размером с букву), независимо от размеров пикселей, или переходите в ширину в процентах от ширины и на основе ширины изображения укажите размер бумаги.

Удачи ...

Answer 3

Одним из решений проблемы, которую я нашел, было просто установить ширину в дюймах. Пока что я только протестировал / подтвердил эту работу в Chrome. Это хорошо сработало для того, для чего я его использовал (для распечатки листа 8,5 x 11)

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

Answer 4

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

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

Изображения

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

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

Таблица

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

http://www.intensivstation.ch/en/css/print/

или любой другой результат Google для комбинаций: CSS, печать, медиа, макет

Answer 5

Решение, гарантирующее, что изображения не обрезаются при печати на веб-странице, должно иметь следующее правило CSS:

@media print { 
  img { 
    max-width:100% !important;
  } 
}

Answer 6

Принтер не понимает пиксели, он понимает точки (pt в CSS). Лучшее решение - написать дополнительный CSS для печати со всеми его размерами в точках.

Затем в вашем HTML-коде, в разделе head, поместите:

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">

Answer 7

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