CSS printed page
Many sites have the ability to display a version of the page for printing, but is it always convenient to use them?
The main problems when printing a document are poor typography, the presence of unnecessary information (for example, interface elements) and incorrect colors. For styling, you can use the @media rule :
')
@media print { } If the user wants to print a page with a design displayed on the screen, he takes a screenshot and prints it. The print version is designed for easy and comfortable reading of text from a sheet of paper. Therefore, first of all, it is necessary to remove all unnecessary from the page: menu, massive header or footer, background images, etc., leaving only the necessary: headlines, content with images, site logo, URL of the page. For example, this code hides the H1 headers, as well as the sidebar, header and basement of the site:
h1, div#header, div#sidebar, div#footer { display: none; } Rules page for printing
1. Modern browsers can delete a background image. However, it is advisable to add background-image: none so that older browsers can also do this.
2. There may be inconsistencies of the printed page with its display on the screen when assigning dimensions in pixels. Therefore, it is worth using inches, centimeters or percentages.
3. Using the following code, you can display the full URL instead of a hyperlink, because you cannot click on a piece of paper:
a:after {content:" <" attr(href) ">"; By slightly modifying the code, you can add a URL mapping only to external links:
a[href^=http]:after {content:" <" attr(href) ">"; 4. For large texts, division into parts will sometimes be appropriate. The following code splits content on each H3 header, typing on a new page:
h3 { page-break-before: always; } And this code will help to print each article from a new page, it can be useful when printing a list of blog entries:
article + article { page-break-before: always; } 5. It is advisable to reassign styles of sites with a dark or bright design in a standard color scheme - black text on a white background. This is convenient both for readability and for saving materials in the user's printer.
Correct display
As mentioned above, modern browsers are able to remove unwanted items when printing, but this is not always required. In Firefox, the user can control the appearance of the result, in Chrome and Safari, you can use the code below to display the original style:
* { -webkit-print-color-adjust: exact; } What it looks like in action:
Print quality
Often the print result is very different from the original on the screen for the worse. One of the common reasons for this is a simple example. There is a light text on a dark background:
With the following CSS:
header { background: #000; color: #fff; padding: 1rem; font-family: Avenir, Arial, sans-serif; } The browser will try to bring the printable version to normal:
If there is an image on the page, for example a logo, then the browser does not adjust it at all, and it turns out terribly:
Everything looks even worse if a vector image with transparency is used as a logo:
You can avoid this horror when using the CSS3 Filter:
@media print { header { background: none; color: #000; } header img { -webkit-filter: invert(100%); filter: invert(100%); } } It turns out:
For Firefox, you can use SVG:
<svg xmlns="http://www.w3.org/2000/svg"> <filter id="negative"> <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /> </filter> </svg> CSS:
@media print { header { background: none; color: #000; } header img { filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); } } For IE9, the solution from Lea Verou :
<!--[if IE 9]> <style> @media print { header:after { content:""; display: block; height: 1px; width: 1px; position: absolute; top: 100px; right: 100px; outline: 100px solid invert; } } </style> <![endif]--> Used materials:
Source: https://habr.com/ru/post/160997/
All Articles