Меню

Настройки принтера в html



Веб-страница для печати

О чём вообще идёт речь? Что значит подготовить страницу для печати средствами CSS? В CSS имеется возможность настроить вид страницы, если пользователь захочет распечатать ее на принтере.

Предположим, ваша страница не имеет подготовленного варианта для печати. Если страница имеет сложную структуру навигации и контента, то при печати вылезет совсем не то, что вы видите на экране.

Вы можете получить представление о том, как будет выглядеть страница на бумаге, если выберите в меню браузера Файл | Предварительный просмотр. К вашему удивлению, верстка при печати поплывет и страница может измениться до неузнаваемости. Более того, страница, которая выглядит компактно на вашем экране, при печати может занять несколько полупустых страниц. Кроме того, если на вашей странице активно используются блоки рекламы, то ее совсем необязательно печатать на принтере. Именно, поэтому в CSS есть возможность настройки вида документа для печати.

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

Настройка печатной версии страницы по сути ничем не отличается от обычной настройки стилей для экранной версии. Ваша задача сводится к упрощению внешнего вида страницы, учитывая различные факторы при печати: черная-белая печать, размер бумажной страницы, избыток информации и т.д.

Чтобы настроить печатную версию сайта, достаточно включить ваш файл print.css в раздел head страницы с параметром media=»print». Браузеры при печати найдут данный файл и будут использовать стили из него.

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

  • Сбросьте все стили, которые отвечают за отступы (margin, padding). Они могут стать источником головной боли при печати.
  • Обратите внимание на шрифты. Возможно, шрифты для сайта не совсем хорошо выглядят на бумаге. Установите нормальный размер шрифта, интервалы и тому подобное.

Это может выглядеть следующим образом:

Очень часто на сайте присутствуют элементы, которые не нужны при печати — поисковое поле, врезки, спонсорские блоки, социальные закладки, flash, формы обратной связи и т.д. Вы можете отказаться от них простым способом — используйте конструкцию dispaly: none.

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

Предположим, пользователь хочет распечатать ваш пост, но не хочет распечатывать комментарии к нему. Вы можете помочь ему, если будете использовать стиль page-break-before: always;, что позволит перенести комментарии на новую страницу. В этому случае пользователь может указать в настройках количество нужных ему страниц.

Страницу можно распечатать через меню браузера Файл | Печать.

Если вы еще не используете файл стилей для печати, то почему бы не начать это делать уже сегодня? Помогите вашим читателям, и они скажут вам спасибо.

Источник

Делаем версию для печати

Есть два способа делать страницу для печати:

1. Специально выводить отдельным скриптом страницу без меню и лишнего оформления.

2. Выводить ту же страницу, которую просматриваем при просмотре сайта, но уже с другими подкреплёнными стилями, где скрываются ненужные элементы.

Довелось делать документы(накладные, счёт фактура и прочее) для печати. Так что пошёл по первому варианту. Но это просто в моём случае. Более гибкий как мне представляется второй вариант.

Вот мой опыт, заметки:

1. Главное правило — будь проще и люди к тебе потянутся(с)хз кто. 🙂 Короче не используйте разнообразие оформления. Человеку просто надо прочитать распечатанный текст, нечего его грузить лишним оформлением. Да и краску в принтере тратить.

2. Не используем фоновые изображения, их всё равно не будет при печати. Или будут, но не во всех браузерах. По крайней мере у меня какие то подобные грабли случались.

3. Стараемся использовать белый фон, чёрный текст. Если обратно, то будет тратиться много краски. Цветной текст думаю не нужно делать — всё равно у многих чёрно-белый принтер.

4. Если нужно чтобы следующий контент печатался обязательно на следующей странице, вставляем блок div с классом pagebreak перед этим текстом. Описываем класс в стилях:

текст за этим блоком будет распечатываться уже на новой странице. Работает во всех современных браузерах. Да и не современных то же. Один IE до 7ой версии включительно подводит. Но на него надо забивать!

5. И так, печать. Пользователь можно сам выбрать печать. Можно поставить на

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

Это кнопка будет при просмотре страницы, но печататься не будет, так как мы задали display: none; в style для media=»print», то есть в стилях для печатающего устройства. При нажатии на кнопку будет выводиться окно печати.

Тем, кто хочет супер автоматизировать процесс печати, чтобы например открываем страницу и принтер сразу начал печатать страницу — охладите свой пыл или того, кто вас просит это сделать. Я этот способ не нашёл. Да его и нет. Потому что это логично. Представьте, заходите вы на сайт, а там через javascript запрограммлена печать ста копий страниц. И принтер приходит в бешенство и начинает печатать эту кучу страниц без вашего ведома. Нелогично? Нелогично!

Читайте также:  Мазда 3 2014 настройка блютуз

В одно время меня усердно просил сделать такую штуку один менеджер проектов. Пришлось ему всё это обяснять, приводить примеры, чтобы он понял что это нельзя сделать, да и не нужно.
6. Если кто то будет жаловать на то, что распечатываются адрес страницы, title и прочая херь в колонтитулах — посоветуйте ему настроить свой браузер. Со стороны сайта это не настраивается. По крайней мере я не знаю как. Например в Firefox это настраивается в «Печать» — «Параметры страницы» — «Поля и колонтитулы»

7. Кстати в догонку к предыдущему. Допустим пользователь отключил вывод всех колонтитулом, в том числе и адрес страницы. То есть если пользователь спустя некоторое время посмотрит на распечатку, он не сможет понять, с какого сайта он это распечатал. Так может стоит сделать небольшую заметку с указанием ресурса, адреса страницы, логотипа или ещё чего нибудь.

8. Используйте крупный размер шрифт(в пределах разумного конечно). Главное чтобы при печати всё было читабельно.

9. Используйте подходящий для чтения шрифт. В принципе и сайт же мы не для робота делаем, а для пользователя, чтобы он читал и шрифт можно использовать с сайта. Просто на сайте иногда в угоду дизайнера может быть какой то неудобный для чтения шрифт. Так сделаем же хотя бы для печати нормальный шрифт. Вот тут например писал про безопасный шрифт для глаз.

10. Думаю нужно использовать размерности, независимые от устройства — абсолютные размерности. Например in,cm,mm,pt,pc.

Абсолютные единицы измерения

Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)

11. Вот полезная ссылка http://www.webdevout.net/browser-support-css#css2propsprint. Описание стилей можно найти на сайте http://htmlbook.ru
Вообще советую пройтись по всему списку CSS свойств, даже если вы опытный разработчик. Для себя с удивлением обнаружил незнакомые CSS свойства и что некоторые CSS свойства уже можно безбоязненно использовать.

Конечно же это не полный список советов. Это просто мои мысли.

Источник

Настройка параметров печати из JS

Так. из того, что я могу найти в Google, я не могу найти способ использовать Javascript для установки моих настроек печати (читать: поля, ориентации, нижний колонтитул и т. д.).

Я собираюсь сказать своему боссу, что то, что он хочет сделать, невозможно. Я хотел проверить, будете ли вы штрафовать людей за это. Пожалуйста, дайте мне знать.

Я обнаружил,что в FF вы можете использовать некоторые настройки user_pref(key, val) для настройки предпочтений пользователя, но это не работает для более чем 90% моих пользователей. Я я ищу что-то, что будет охватывать IE (как можно больше), FF и Chrome.

спасибо ниндзя, которые отвечают.

4 ответов

Так. после целого дня поисков я думаю, что нашел ответ на свой собственный вопрос. Короче говоря, ответ заключается в том, что JS и/или CSS не позволят вам переопределить настройку страницы по умолчанию браузера клиента.

вот что я пробовал. Если вы создадите простой HTML файл с и пустой головой, и телом, которое содержит только текст «тест», вы сможете увидеть, что я тестировал.

таблицы стилей печати не могут решить вашу проблему. Установка поля на тело 0px 0px 0px 0px-это не то же самое, щелкнув Файл > Параметры страницы и настройки все поля в 0. Несмотря на то, что печатные листы стиля хотели бы, чтобы вы поверили, они разные. Попробуйте сами. Вот почему таблицы стилей печати не решают вашу проблему.

JS не может решить вашу проблему. Можете ли вы представить, если каждая страница, которую вы посетили, изменила ваши локальные свойства JS? Чтобы разрешить каждой странице доступ к локальным настройкам печати, нарушение безопасности, и не допускается. Из-за этого JS не может решить вашу проблему.

Я хотел бы, чтобы кто-то ответил Здесь и дал мне знать, что я ошибаюсь. Иначе. фтопку. и это должно произойти. У меня куча старых пользователей. и заставить их установить поля в их настройке страницы-это боль. Также клиент не хочет, чтобы мы рефакторинг странице, так что им не нужно. Я между молотом и наковальней.

вы можете установить ориентацию страницы и поля с помощью CSS:

вы также можете установить нижний колонтитул в нижней части каждой страницы с помощью элемент.

EDIT: как указал Beejamin, это дом на полпути. Вы не можете изменить настройки принтера (те, которые отображаются в диалоговом окне печать при нажатии кнопки печать). Кроме того, IE сильно не хватает поддержки @page селектор, (огляделся, чтобы увидеть, поддерживает ли IE9 его и не смог найти что угодно.) В качестве альтернативы вы всегда можете попробовать применить его к телу в таблице стилей печати.

хотя с моей головы я не знаю, насколько это эффективно.

Я думаю, что вам в значительной степени не повезло, пытаясь сделать это в HTML и CSS. Большая часть проблемы заключается в том, что поля принтера зависят от типа принтера: большинство принтеров имеют минимальное поле, которое они могут установить (эквивалентно пространству, которое им нужно для захвата страницы, и левому/правому движению головы.

Читайте также:  Trinus vr настройка черный экран

допустимые поля также будут варьироваться в зависимости от размера бумаги (маржа обычно может быть меньше на меньшем листе, чем максимум, который примет принтер). Для например, при загрузке бумаги формата А5 в принтер формата А4 поля, которые можно задать, будут отличаться от полей при загрузке формата А4.

ни одна из этой информации не доступна на веб-странице, через CSS, javascript или что-либо еще.

теперь, что касается решения, PDF-файлы позволяют вставлять некоторые настройки принтера по умолчанию в файл-Acrobat pro позволит вам указать параметры масштабирования, количество копий по умолчанию и т.д. Я бы не прочь поспорить, что есть больше потенциальных настроек доступно в формате файла, который Acrobat не предоставляет.

существует множество полнофункциональных инструментов генерации PDF для любой серверной технологии, которую вы используете. хорошие из них даже позволят вам предоставить URL — адрес и визуализировать HTML+CSS в PDF-контент-это в некоторой степени автоматизирует генерацию. Однако генерация PDF-файлов довольно интенсивна, и она не будет бесшовной для пользователя (и потребует плагинов PDF для большинства браузеров).

Я знаю, что это не идеально, но я бы посмотрел на эту улицу. Удачи!

Источник

Как создавать страницы для печати с помощью CSS

В этой статье мы рассмотрим искусство создания удобных для печати веб-страниц с помощью CSS.

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

Таблицы стилей печати

CSS Print может быть:

  1. Применяется в дополнение к стилю экрана. Принимая ваши стили экрана в качестве основы, стили принтера переопределяют эти значения по умолчанию при необходимости.
  2. Применяется как отдельные стили. Стили экрана и печати совершенно разные; оба запускаются из стилей браузера по умолчанию.

Выбор будет зависеть от вашего сайта / приложения. Лично я большую часть времени использую стили экрана в качестве основы для печати. Тем не менее, я использовал отдельные таблицы стилей для приложений с радикально отличающимися результатами — например, система бронирования сеансов конференции, которая отображала сетку расписания на экране, но хронологическое расписание на бумаге.

Таблицу стилей печати можно добавить в HTML head после стандартной таблицы стилей:

Стили print.css будут применяться в дополнение к стилям экрана , когда страница печатается.

Для разделения экрана и печатных носителей main.css следует указывать screen :

Кроме того, стили печати могут быть включены в существующий файл CSS с использованием правил @media . Например:

Можно добавить любое количество правил @media print , так что это может быть полезно для сохранения связанных стилей вместе. Правила экрана и печати также можно разделить при необходимости:

Тестирование вывода на принтер

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

Предварительный просмотр

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

Кроме того, вы можете сохранить или просмотреть страницу, экспортировав ее в PDF.

Инструменты разработчика

DevTools ( F12 или Cmd/Ctrl + Shift + I ) может эмулировать стили печати, хотя разрывы страниц не будут отображаться.

В Chrome откройте Инструменты разработчика и выберите « Дополнительные инструменты» , затем «Рендеринг» в меню с тремя точками в правом верхнем углу. Измените Emulate CSS Media для печати внизу этой панели.

В Firefox откройте Инструменты разработчика и щелкните значок имитации переключаемых материалов для печати на панели стилей вкладки «Инспектор»:

Подмена медиа-атрибута

Предполагая, что вы используете тег link для загрузки CSS, вы можете временно изменить атрибут media на screen :

Опять же, это не будет показывать разрывы страниц. Не забудьте восстановить атрибут media=»print» после завершения тестирования.

Удалить ненужные разделы

Прежде чем делать что-либо еще, удалите и сверните избыточный контент с помощью display: none; . Типичные ненужные разделы на бумаге могут включать навигационные меню, изображения героев, верхние и нижние колонтитулы, формы, боковые панели, виджеты социальных сетей и рекламные блоки (обычно что-нибудь в iframe ):

Возможно, потребуется использовать display: none !important; , если функциональность CSS или JavaScript показывает элементы в соответствии с конкретными состояниями пользовательского интерфейса. Использование !important обычно не рекомендуется, но мы можем обосновать его использование в базовом наборе стилей принтера, которые переопределяют настройки экрана по умолчанию.

Стайлинг печати

Теперь можно применять стили для печати. Рекомендации:

  1. убедитесь, что вы используете темный текст на белом фоне
  2. рассмотреть возможность использования шрифта с засечками, который может быть легче читать
  3. отрегулируйте размер текста до 12pt или выше
  4. измените отступы и поля, где это необходимо. Стандартный cm , mm или in блоки могут быть более практичными.

Дополнительные предложения включают в себя.

CSS Columns

Стандартная бумага формата A4 и US Letter может привести к более длинным и менее читаемым строкам текста. Попробуйте использовать CSS-столбцы в макетах печати. Например:

В этом примере столбцы будут созданы, когда есть хотя бы горизонтальное пространство в 37em . Нет необходимости задавать медиа-запросы; дополнительные столбцы будут добавлены на более широкой бумаге.

Читайте также:  Настройки для gopro 960

Используйте границы вместо фона

Ваш шаблон может иметь разделы или выноски, обозначенные более темными или обратными цветовыми схемами:

Сохраните чернила, представив эти элементы с рамкой:

Удалить или инвертировать изображения

Пользователи не захотят печатать декоративные и несущественные изображения и фоны. Вы можете сделать по умолчанию все изображения скрытыми, если у них нет класса print :

В идеале напечатанные изображения должны использовать темные цвета на светлом фоне. Может быть возможно изменить цвета SVG, встроенные в HTML, в CSS, но в некоторых ситуациях у вас будут более темные растровые изображения:

CSS фильтр может быть использован, чтобы инвертировать и корректировать цвета для печати. Например:

Добавить дополнительный контент

Печатные СМИ часто требуют дополнительной информации, которая не будет необходима на экране. Свойство CSS content можно использовать для добавления текста псевдоэлементов ::before и ::after . Например, отображать URL-адрес ссылки в скобках после текста:

Или вы можете добавить сообщения только для печати:

В более сложных ситуациях рассмотрите использование класса, например print , для элементов, которые должны быть видны только при печати Например:

Большинство браузеров отображают URL-адрес и текущую дату / время в верхнем и нижнем колонтитулах печатной страницы, поэтому редко возникает необходимость генерировать эту информацию в коде.

Разрывы страниц

Свойства CSS3 break-before и break-after позволяют контролировать , как страница, столбец или область разрывы ведут себя до и после элемента. Поддержка отличная, но старые браузеры могут использовать подобные свойства page-break-before и page-break-after .

Следующее значения break-before и break-after могут быть использованы:

  1. auto : по умолчанию — перерыв разрешен, но не принудителен
  2. avoid : избежать разрыва на странице, столбце или области
  3. avoid-page : избежать разрыва страницы
  4. page : вызвать разрыв страницы
  5. always : псевдоним page
  6. left : сделать разрывы страниц, так что следующая страница слева
  7. right : принудительно разрывать страницы, чтобы следующая страница была правильной

Пример: форсировать разрыв страницы непосредственно перед любым заголовком h1 :

Остерегайтесь чрезмерного использования разрывов страниц. В идеале для вывода на принтер следует использовать как можно меньше страниц.

Свойство break-inside (и более старое page-break-inside ) указывает, разрешен ли разрыв элемента внутри элемента. Обычно поддерживаемые значения:

  1. auto : по умолчанию — разрыв разрешен, но не принудителен
  2. avoid : по возможности избегайте внутреннего разрыва
  3. avoid-page : по возможности избегайте внутреннего разрыва страницы

Это может быть предпочтительнее, чем указывать разрывы страниц, поскольку вы можете использовать как можно меньше бумаги, избегая разрывов страниц в сгруппированных данных, таких как таблицы или изображения:

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

Свойство orphans аналогично widows за исключением того, что контролирует минимальное количество строк, чтобы показать в нижней части страницы.

Элемент box-decoration-break управления границами между страницами. Когда элемент с рамкой имеет внутренний разрыв страницы:

  1. slice : по умолчанию, разбивает макет. Верхняя граница показана на первой странице, а нижняя граница показана на второй странице.
  2. clone : копирует поля, отступы и границы. Все четыре границы показаны на обеих страницах.

Наконец, CSS Paged Media (@page) имеет ограниченную поддержку браузера, но предоставляет способ нацеливания на конкретные страницы, чтобы можно было определить альтернативные поля или разрывы:

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

Имейте в виду, что контроль разрыва страницы — это не что иное, как совет браузеру. Нет гарантии, что разрыв будет вызван или предотвращен, потому что макет ограничен пределами бумаги.

Как применить CSS3 преобразования к фоновым изображениям

CSS-преобразования хороши, но они (пока?) Не применяются к фоновым изображениям. В этой статье представлен обходной путь для тех случаев, когда вы действительно хотите повернуть фоновое изображение или оставить фиксированное фоновое изображение во время вращения его элемента контейнера.

Масштабирование, наклон и поворот любого элемента возможны с помощью CSS3 свойства transform . Он поддерживается во всех современных браузерах без префиксов поставщиков.

Отличный материал. Тем не менее, это вращает весь элемент — его содержимое, границы и фоновое изображение. Что если вы хотите повернуть только фоновое изображение? Или что, если вы хотите, чтобы фон оставался фиксированным во время вращения контента?

Там нет W3C CSS предложение для background-image преобразований. Это было бы невероятно полезно, так что, возможно, однажды появится, но это не помогает разработчикам, которые хотят использовать подобные эффекты сегодня.

Один из вариантов — создать новое фоновое изображение из оригинала, скажем, повернутое на 45 градусов. Это может быть достигнуто с помощью:

  1. процесс манипулирования изображениями на стороне сервера
  2. canvas код обработки изображений на стороне клиента или
  3. API, предоставляемые некоторыми сервисами CDN для хостинга изображений.

Но все это требует дополнительных усилий, обработки и затрат.

К счастью, есть решение на основе CSS. По сути, это хак, который применяет фоновое изображение к псевдоэлементу ::before или, ::after а не к родительскому контейнеру. Псевдоэлемент может быть преобразован независимо от содержимого.

Источник

Adblock
detector