Как написать XHTML и CSS для печати? Как сохранить чернила принтера с печатью CSS?

Question

Я не говорю только о mke print css или media=print

Вопросы:

• Я говорю о том, что еще мы должны делать в XHTMl и на экране css и печатать css (другое чем disply:none в печатном виде css) мы должен заботиться о том, чтобы получить хороший отпечаток от страницы сайта.
• И нужна ли нам особая забота о изображения, фоновые изображения в CSS, вспышка, серебристый свет, iframe
• Как сохранить чернила принтера при печати CSS?

Answer 1

В A List Apart есть несколько полезных статей на эту тему: Переход к печати и Печать книги с помощью CSS: Boom!

Answer 2

Следующая методика на самом деле использует больше чернил, но имеет отношение к созданию печатной версии страницы.

Предположим, что есть страница, где гиперссылки на самом деле очень важны дляконтент - скажем, это список полезных сайтов по теме xyz.Не уверен, почему кто-то распечатал бы это, но если они это сделают, куча подчеркнутых предложений не очень поможет.

Вы можете фактически использовать CSS, чтобы распечатать URL .

Для потомков код:

a:link:after, a:visited:after { content:" [" attr(href) "] "; }

Я бы рекомендовал делать это только для выбранных ссылок, используя класс, что-то вроде

a.printable:link:after, a.printable:visited:after { content:" [" attr(href) "] "; }

У меня естьдля этой цели всегда нравились угловые скобки, поэтому я, вероятно, переписал бы это

a.printable:link:after, a.printable:visited:after { content:" <" attr(href) "> "; }

Важно помнить, что сущности не допускаются в значении "content:" в css.Обычно вы просто вводите необработанный текст, который вам нужен.

Кроме того, для печати вам, вероятно, следует использовать pt вместо px или em для определения размера.Вы можете сделать размер меньше, чем эквивалент экрана.Размер по умолчанию часто устанавливается в 12 пунктов, но вы можете легко сделать его в 11 пунктов и при этом сохранять достаточную читабельность.Это сэкономит приличное количество чернил (и бумаги!) В долгосрочной перспективе.

С возможным исключением контент-графики (иными словами, графики, составляющей содержательный контент страницы, в отличие отк графике, используемой для верстки, украшения или приукрашивания), почти нет текста не должно быть на странице.Границы и фоны следует исключать, за исключением редких случаев (например, когда необходимо обратить внимание на фрагмент текста, хотя простое выделение его жирным шрифтом, вероятно, будет столь же эффективным, и опять же сэкономит чернила).Если вы используете css для придания необычного вида <hr> s, полностью избавьтесь от стиля при печати и просто используйте встроенный стиль или замените все <hr> s простой черной или серой линией (и, опять же, используйтеpt, как в 2pt, а не px, чтобы изменить высоту).

Я не могу вспомнить многих ситуаций, когда у вас был бы контент в iframe, которым вы бы хотели бытьраспечатаны.Если это так, то вполне возможно, стоит сделать версию страницы для печати, которая доставит содержимое из iframe и непосредственно в документ, что сделает его намного лучше для печати. ​​

Answer 3

Хотя я признаю, что это не самый практичный ответ, который вы получите, вы можете рассмотреть ecofont , шрифт, разработанный специально для экономии чернил принтера. * См. Комментарий.

Answer 4

С точки зрения XHTML делать особо нечего, кроме проверки правильности кода и его семантики.

Теперь о печати css. Вы можете подумать, что некоторые люди могут напечатать вашу страницу в черно-белом режиме, или у них может быть очень мало цветных чернил (и, следовательно, получить более тусклые цвета). Поэтому, если у вас есть светлые цвета, пастель или места, где нет большого контраста между текстом и фоном, убедитесь, что вы увеличили контраст в стиле печати. Попробуйте напечатать свою страницу в черно-белом режиме и посмотрите, как она выглядит.

Я не уверен, как печатаются плагины, такие как flash и silverlight, но вы можете добавить к ним фоновые изображения в вашем файле print.css, чтобы, если они не были напечатаны, вы могли получить снимок вспышки вместо белая дыра.

В качестве изображений я бы предложил то, что сказал Тон ван Ланквелд. Установите для них разрешение 150 точек на дюйм, а также убедитесь, что они хорошо выглядят на CMYK (это можно сделать в Photoshop, выбрав «Просмотр»> «Цвета доказательства»).

Проверьте свои шрифты тоже. Некоторые, возможно, должны быть меньше, некоторые больше. Если у вас много текста, вы можете рассмотреть возможность использования более «основанного на печати» шрифта, такого как Helvetica или Times New Roman (особенно если вы используете экранные шрифты, такие как Verdana).

Наконец, чтобы сэкономить чернила, я бы удалил все, что не является абсолютно необходимым (да display:none). Я бы держался подальше от фоновых изображений в print.css по той же причине. Я бы установил все гиперссылки на черный (или цвет текста) без подчеркивания, поскольку нет причин размещать их на печатной странице. Вы также можете сэкономить немного чернил, используя # 111 или # 222 вместо # 000 (но это может повлиять на удобочитаемость).

Answer 5

Фоновые изображения не печатаются. Это возможно, но настройка по умолчанию в вашем браузере; не печатать фоновые изображения.

Я уверен, что изображения имеют разрешение 150 точек на дюйм. Тогда они не слишком большие для экрана и приемлемые для бумаги. Формат GIF не сохраняет информацию о точках на дюйм в файле, но вы можете дать ей приемлемый размер с помощью CSS.

Меньшему шрифту нужно меньше чернил.