Print Styles

Стили для печати обычно размещаются внутри медиа-выражения:


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

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


Чтобы эффективно использовать лист бумаги при печати, размещайте содержимое на максимальной площади листа с помощью CSS, избавившись от всех возможных отступов и полей, управляя полями страницы с помощью правила @page:


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


Во-вторых, чтобы предотвратить печать изображений, превышающих по ширине печатный лист:


В-третьих, убедимся, что статьи всегда начинаются с новой страницы:


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


На некоторых сайтах, например портфолио, фоновые изображения и цвет являются важными визуальными компонентами. Если пользователь печатает страницу из браузера на основе WebKit (Google Chrome или Safari), мы можем заставить принтер отобразить цвета так, как мы видим их на экране (то есть заставить браузер распечатать фоновые изображения и цвета на странице). В общем-то, мы сделаем это только для цветных принтеров, которые можем определить с помощью медиа-выражения:



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


Print styles

By Serejka Simanovich

Print styles

  • 689