It would seem that difficult to create a page for printing? We just create the same document with text but without any design and put a link to it from a regular page. But the search engines now have a duplicate content filter and webmasters have to hide pages for printing from indexing. In addition, site visitors are also not very convenient, because you first need to go to a copy of the page they need, in which there are no design elements, and then click on the "Print" button.
Here CSS can come to our rescue, which will not only reduce the amount of work for webmasters and simplify the use of the site for visitors, but also allow avoiding sanctions from search engines for duplicate content.
Page structure
So, let's first use HTML to create the structure of our document. For example, I decided to use a table layout to make it easier to understand:
| Navigation Home page Articles Contacts |
Article titleThis page can be printed. Only the text of the article will be printed. |
Your ad could be here |
As you can see, we have a table with three cells that are arranged horizontally. Everything is like a regular site: navigation on the left, content in the middle, and ad units or news on the right. Each cell has been assigned its own id. For the left side it is leftcolumn, for the right side it is rightcolumn, and for the middle cell with content it is content.
Adding CSS
Now, using CSS, you need to tell the browser what styles it should use to display page elements on the screen and what it should use when printing. Create style.css and write the following there:
@media screen (body (background-color: # 0B73BD; font-family: tahoma; color: #FFFFFF;) table (width: 600px;) #leftcolumn (width: 140px; vertical-align: top; font-size: 15px ;) #rightcolumn (width: 110px; vertical-align: top; font-size: 15px;) #content (background-color: # 32AADB; padding: 5px; font-size: 15px;) a (color: # FFFF00; )) @media print (body (background-color: #FFFFFF; font-family: tahoma; color: # 000000;) #content (background-color: #FFFFFF; padding: 5px; font-size: 15px; color: # 000000; width: 600px;) #leftcolumn (display: none;) #rightcolumn (display: none;))The first block of CSS describes how the page elements should be displayed in the browser. The block was enclosed in additional curly braces before which we added @media screen. This makes the browser understand that these styles need to be applied to display on the screen:
This is how the page looks when viewed in a browser
The second block describes the display of the same page elements as the first, but in this case in the form in which the document will look when printed and indicated by the @media print parameter. Since we want only useful content to be printed, we disable the left (#leftcolumn) and right (#rightcolumn) cells from being displayed by setting them to display: none.
This is what the printed version of the website page looks like.
Separate style files
It is not necessary to combine everything into one style file. Instead, you can use two style files and, when connecting them to site pages, tell the browser which style file to use for printing and which for display. The first one (for displaying) is determined by the media = "screen" parameter, and the second will be used for printing and is determined by the media = "print" parameter:
Styles for printing need to be described after all the others, otherwise Opera will print a block of content along with a colored background that is intended for output to the browser, and not the white color we have chosen for printing.
Also, when printing, we strictly reduce the width of the content block to 600px, because at 100% width the printer "cuts" a small strip of text on the right side of the page. Also pay attention to the fact that when printing from Opera, the margin at the edges of the sheet is slightly less than in Internet Explorer and the lines of text on a sheet of paper are wider.
Now you no longer need to create additional pages for printing. You can inform users about the possibility of printing a page, for example, by using a link with the text "print", when you click on it, a tooltip will be displayed with a message about the ability to directly print the current page without a design.
Copying of the article is prohibited.
- Translation
3. Absolute units
Absolute units are not very suitable for on-screen versions of pages, but for printing they are just what you need. It is completely safe for printing styles, moreover, it is recommended to use absolute units of measurement, like cm, mm, in, pt, or pc.Section (margin-bottom: 2cm;)
4. Properties of pages
You can use the @page rule to control page properties, such as page sizes, orientations, and margins. This turns out to be very useful, say, when it is necessary that all printed pages have the same margins.@media print (@page (margin: 1cm;))
The @page rule is part of the Paged Media Module standard, which offers many great things like choosing the first page to print, setting blank pages, positioning elements at the corners of the page, and. It can even be used to prepare a book for printing.
5. Controlling page breaks
Since printed sheets, unlike web pages, are not endless, the content of web pages sooner or later breaks off on one sheet of paper and continues on the next. There are five properties to control page breaks.▍Page break before element
If you want an element to always be at the beginning of the page, you can put a forced page break in front of it using the page-break-before property.Section (page-break-before: always;)
▍Page break after element
The page-break-after property allows you to set a forced page break after an element. Using this property, you can also deny the break.H2 (page-break-after: always;)
▍Page break inside element
The page-break-inside property comes in handy when you want to avoid splitting an element between two pages.Ul (page-break-inside: avoid;)
▍ Top and Bottom Hanging Rows
Sometimes you don't need to force page breaks, but you want to control the output of paragraphs at page boundaries.For example, if the last line of a paragraph does not fit on the current page, the last two lines of that paragraph will be printed on the next page. This is due to the fact that the property that controls it (widows, that is - "top orphans") is set to 2 by default. This can be changed.
P (widows: 4;)
If a different situation arises and only one line of a paragraph fits on the current page, the entire paragraph will be printed on the next page. The orphans property is also set to 2 by default.
P (orphans: 3;)
The point of the above code is that in order for a paragraph not to wrap in its entirety on the next page, at least three lines must fit on the current page.
For a better understanding of this, take a look at an example prepared with CodePen. And here is a debug version of the same example, it is more convenient to test it.
*, *: before, *: after, *: first-letter, p: first-line, div: first-line, blockquote: first-line, li: first-line (background: transparent! important; color: # 000 ! important; box-shadow: none! important; text-shadow: none! important;)
By the way, CSS styles for printing are one of the few exceptions where the! Important directive is absolutely fine;)
7. Removing unnecessary content
In order not to waste ink, you should remove everything unnecessary from the printed version of the page, such as huge beautiful slides, advertisements, site navigation tools, and so on. This can be done by setting the display property to none on unnecessary elements. It is quite possible that you will find it correct to show only the main content of the page, and hide everything else:Body> *: not (main) (display: none;)
8. Output of URLs of links
Links, as they usually appear on web pages, are completely useless when printed, unless the reader of the paper version of the document knows where they lead.In order to display the addresses of links after their textual representations, it is enough to use the following style:
A: after (content: "(" attr (href) ")";)
Of course, with this approach, a lot of unnecessary things will be "deciphered". For example, relative links, absolute links on the same site as the page being printed, links with anchors, and so on. In order not to clog the printed page, it would be better to use something like this:
A: not (): after (content: "(" attr (href) ")";)
It looks, of course, insane. Therefore, I will explain the meaning of this rule in ordinary language: "Display the value of the href attribute next to every link that has an attribute that starts with http, but does not contain mywebsite.com."
9. Decoding of abbreviations
Abbreviations in the text should be placed in the tag , and their decryption must be included in the title attribute. If you style abbreviations like this, their meanings are very easy to show on a printed page:Abbr: after (content: "(" attr (title) ")";)
10. Forced background printing
Typically, browsers, when rendering a page for printing, do not display the background color and background images, unless they are explicitly told to do so. However, sometimes it is necessary to print all this. This is where the non-standard print-color-adjust property helps us, which allows us to override the default settings for some browsers.Header (-webkit-print-color-adjust: exact; print-color-adjust: exact;)
11. Media queries
If you write media queries similar to the one below, keep in mind that the CSS rules in such queries will not affect the printed version of the page.@media screen and (min-width: 48em) (/ * screen only * /)
Why is this so? This is because CSS rules only apply if the min-width is 48em and if the media-type is screen. If we get rid of the screen keyword in this media query, then it will be limited only by the min-width value.
@media (min-width: 48em) (/ * all media types * /)
12. Printout of maps
Current versions of Firefox and Chrome can print maps, but Safari, for example, cannot. What about printing cards? One of the universal options is to use static maps instead of dynamic ones.Map (width: 400px; height: 300px; background-image: url ("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: exact; print-color-adjust: exact;)
13. QR codes
Printing QR codes containing important links can greatly improve the usability of hardcopy web pages. Here's The Smashing Magazine for helpful advice on the topic. One is to include their addresses in the form of QR codes on printed pages. As a result, the user does not have to type its full address on the keyboard to open the page from which the printout was made in the browser.14.About printing unoptimized pages
While getting into the topic of printing web pages, I discovered a great tool that allows you to conveniently prepare non-optimized pages for printing. Using Add TagsThere are two ways to make a printable page:
1. Specially display a page without a menu and unnecessary design in a separate script.
2. Display the same page that we are viewing when viewing the site, but with different reinforced styles, where unnecessary elements are hidden.
I had a chance to make documents (invoices, invoices, etc.) for printing. So I went according to the first option. But that's just my case. The second option seems to me to be more flexible.
Here is my experience, notes:
1. The main rule - keep it simple and people will be drawn to you (c) xs who. 🙂 In short, do not use a variety of designs. A person just needs to read the printed text, there is nothing to load it with unnecessary design. And to waste paint in the printer.
2. We don’t use background images, they will not be printed anyway. Or they will, but not in all browsers. At least I had some kind of similar rake happened.
3. We try to use a white background, black text. If it is back, a lot of paint will be wasted. I don't think you need to do colored text - many still have a black-and-white printer.
4. If you want the following content to be printed on the next page, insert a div with class pagebreak in front of this text. We describe the class in styles:
Pagebreak (page-break-after: always;)
Pagebreak ( page - break - after: always; |
the text behind this block will be printed on a new page. Works in all modern browsers. Yes, and not the same modern. One IE up to the 7th version inclusive fails. But you have to score on him!
5. And so, print. The user can choose the print himself. You can put on
window.onload = function () (window.print ();)
and the button itself:
< button onclick = "window.print();" >Seal< / button > |
This button will appear when the page is viewed, but will not be printed since we set display: none; in style for media = "print", that is, in styles for the printing device. Pressing the button will display the print window.
For those who want to super-automate the printing process, so that, for example, open the page and the printer immediately starts printing the page - chill your ardor or the one who asks you to do this. I did not find this method. Yes, it is not. Because it makes sense. Imagine, you go to the site, and there, through javascript, printing of one hundred copies of pages is programmed. And the printer goes berserk and starts printing this bunch of pages without your knowledge. Is it illogical? It is illogical!
At one time, a project manager asked me hard to do such a thing. He had to explain all this, give examples, so that he understood that this cannot be done, and it is not necessary.
6. If someone complains that the page address, title and other shit in headers and footers are printed, advise him to set up his browser. This is not configurable from the site side. At least I don't know how. For example, in Firefox this is configured in "Print" - "Page setup" - "Margins and footers"
7. By the way, in pursuit of the previous one. Suppose the user has disabled the output of all headers and footers, including the page address. That is, if the user after a while looks at the printout, he will not be able to understand from which site he printed it. So maybe you should make a small note indicating the resource, page address, logo or something else.
8. Use a large font size (within reason of course). The main thing is that everything is readable when printing.
10. I think you need to use device-independent dimensions - absolute dimensions. For example in, cm, mm, pt, pc.
11. Here is a useful link http://www.webdevout.net/browser-support-css#css2propsprint. Description of styles can be found on the website http://htmlbook.ru
In general, I advise you to go through the entire list of CSS properties, even if you are an experienced developer. I was surprised to find unfamiliar CSS properties and that some CSS properties can already be used fearlessly.
Of course, this is not a complete list of tips. These are just my thoughts.
Many sites have the ability to display a printable version of a page, 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 rule @media:
@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: headers, content with images, site logo, page URL. For example, this code hides the H1 headers, as well as the sidebar, header, and footer of the site:
H1, div # header, div # sidebar, div # footer (display: none;)
Print page rules
1. Modern browsers can remove the background image. However, it is advisable to add background-image: none so that older browsers can do this too.2. There may be inconsistencies between the printed page and its display on the screen when assigning pixel dimensions. Therefore, it is worth using inches, centimeters, or percentages.
3. With the following code, you can display the full URL instead of a hyperlink, because you can't click on a piece of paper:
A: after (content: "<" attr(href) ">";
With a bit of code modification, you can add URL mapping to external links only:
A: after (content: "<" attr(href) ">";
4. For large texts, division into parts is sometimes appropriate. The following code splits the content on each H3 heading by printing 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 posts:
Article + article (page-break-before: always;)
5. It is advisable to reassign the styles of sites with dark or bright designs to the standard color scheme - black text on a white background. This is convenient both for readability and for saving consumables in the user's printer.
Correct display
As mentioned above, modern browsers are able to remove unnecessary elements 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;)
How it looks in action:
Print quality
Often, the print result is very different from the original on the screen for the worse. Let us analyze one of the common reasons for this with a simple example. There is 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 back to normal:
If there is an image on the page, for example a logo, then the browser does not correct it in any way, and it turns out awfully:
It looks even worse if a vector image with transparency is used as a logo:
You can avoid this horror by using CSS3 Filter:
@media print (header (background: none; color: # 000;) header img (-webkit-filter: invert (100%); filter: invert (100%);))
It turns out:
For Firefox, SVG can be used:
@media print (header (background: none; color: # 000;) header img (filter: url (inverse.svg # negative); -webkit-filter: invert (100%); filter: invert (100%);) )
For IE9 solution from
From time to time on the Internet you can find articles so valuable that you want to print them out and read them to the bone. At the same time, not all services provide a version of the article for printing, or our desires to print do not coincide with the capabilities provided (I want to leave the picture or change the type of the main font). How to print a page without unnecessary elements? In this case, a web service will help.
On the main page of PrintWhatYouLike, in the middle of the screen there is a form for entering the address of the page to be printed. We entered the address, the page is loaded, and we see that when any of the interface elements is selected, it is surrounded by a red frame. Another click of the left mouse button and a list of possible operations opens. Interface elements can be deleted one at a time or in a group, expand a separately selected one within the boundaries, or select one block of text, deleting all others. That is, it is possible to remove parts of the page that are not needed for printing one by one or quickly isolate the necessary from the secondary and print.
On the left side of the screen, there is a sidebar with a number of functions for the edited page:
- saving the edited page in PDF, HTML formats;
- changing the size of the text, font type;
- Removing the background or images with one click of the mouse.
For the convenience of the user, PrintWhatYouLike suggests placing a button on the bookmarks bar for editing before printing any page we visit. There is also a PageZipper option. It will be convenient when reading those resources where they like to divide one article into five, ten or more pages. You press “Next page”, again “Next page”, and then you realize that there was nothing to read. PageZipper will lay out the entire article on one page for further editing and printing. If you don't want to install a bookmarklet, then a plug-in for Firefox PageZipper 0.6.1 is available.
For registered users, PrintWhatYouLike offers a control panel that contains information about the number of Printer Friendly buttons installed, sheets of paper saved and printed, money saved, trees not felled and the ill-fated carbon monoxide was not released into the atmosphere.
Bloggers can also benefit. Installing the plug-in will lead to the appearance on each blog page of a convenient button for sending articles for printing, the ability to save pages in PDF format, which will save readers paper and printer ink.
