Яка безпечна ширина в пікселях для друку веб-сторінки?
Моя сторінка містить великі зображення, і я хочу переконатися, що вони не будуть вирізані під час друку.
Я знаю про різні поля браузера та розміри паперу США 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).
Але знову ж таки, браузери мають всілякі проблеми із вмістом для друку, наприклад, якщо ви спробуєте використовувати плаваючі теги 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;
}
}
@media print, ви можете встановити їх. Ви можете встановити size: letterабо size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
Для друку я не встановлюю жодної ширини та не усуваю жодних перешкод, що перешкоджають макету друку мати динамічну ширину. Це означає, що якщо ви зменшуєте і зменшуєте вікно браузера, вміст не вирізається / приховується, але документ просто стає довшим. Таким чином, ви можете бути впевнені, що все інше буде обробляти принтер / pdf-Creator.
А як щодо елементів із фіксованою шириною, таких як зображення чи таблиці?
Варіанти, які я можу придумати:
http://www.intensivstation.ch/en/css/print/
або будь-який інший результат Google для комбінацій: CSS, друк, носій, макет
Рішенням для того, щоб запобігти різанню зображень під час друку на веб-сторінці, є таке правило 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 отримує ширину висоту в пт, а img отримуєwidth:100%; height:100%;
Я сумніваюся, що він є ... Це залежить від браузера, від принтера (фізичний макс. Dpi) та його драйвера, від розміру паперу, як ви вказуєте (і я, можливо, захочу надрукувати також на папері B5 ...), від налаштувань ( альбомний чи книжковий?), плюс ви часто можете змінити масштаб (відсоток) тощо.
Дозвольте користувачам налаштувати свої налаштування ...
width:autoякий відрегулює ширину вмісту до ширини паперу