There are two ways to make a printable page:
1. Specially use a separate script to display a page without menus and unnecessary design.
2. Display the same page that we view when viewing the site, but with different supported styles, where unnecessary elements are hidden.
I had the opportunity to create documents (invoices, invoices, etc.) for printing. So I went with the first option. But this is simple in my case. The second option seems to me to be more flexible.
Here is my experience, notes:
1. The main rule is to be simpler and people will be drawn to you (s)here. 🙂 In short, don’t use a variety of designs. A person just needs to read the printed text, there is no need to burden it with unnecessary design. Yes, and waste ink in the printer.
2. We don’t use background images; they won’t be there when printing anyway. Or they will, but not in all browsers. At least some similar rake happened to me.
3. We try to use a white background and black text. If it's the other way around, you'll waste a lot of paint. I don’t think there’s any need to do color text—many people have a black-and-white printer anyway.
4. If you need the following content to be printed on the next page, insert a div block with the pagebreak class before 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. And not modern ones either. One IE up to version 7 inclusive fails. But you have to score on him!
5. And so, print. The user can choose the print himself. You can bet on
window.onload = function () ( window.print(); )
and the button itself:
Seal
< button onclick = "window.print();" >Seal< / button > |
This button will appear when viewing the page, but will not be printed, since we set display: none; in style for media="print", that is, in styles for the printing device. When you click the button, a print window will appear.
For those who want to super automate the printing process, so that, for example, we open a page and the printer immediately starts printing the page - cool down your ardor or the one who asks you to do this. I haven't found this method. Yes, he doesn’t exist. Because it's logical. Imagine, you go to a website, and it’s programmed through javascript to print a hundred copies of pages. And the printer goes berserk and starts printing this bunch of pages without your knowledge. Illogical? Illogical!
At one time, a project manager earnestly asked me to do such a thing. I had to explain all this to him, give examples so that he would understand that this cannot be done and is not necessary.
6. If someone complains that the page address, title and other crap in the 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 Settings” - “Margins and Footers”
7. By the way, following up on the previous one. Let's say the user has disabled the display of all headers and footers, including the page address. That is, if the user looks at the printout after some time, he will not be able to understand from which site he printed it. So maybe it’s worth making a small note indicating the resource, page address, logo or something else.
8. Use large font size (within reason, of course). The main thing is that everything is readable when printed.
10. I think we need to use dimensions that are independent of the device - absolute dimensions. For example in,cm,mm,pt,pc.
11. Here is a useful link http://www.webdevout.net/browser-support-css#css2propsprint. Descriptions 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 discover unfamiliar CSS properties and that some CSS properties can already be used without fear.
Of course, this is not a complete list of tips. These are just my thoughts.
Many users of the global Internet do not even suspect that the Web is a multifunctional environment that provides various ways providing information. In this case, we do not mean multimedia - audio and video data, which are widespread today, but real sources through which people obtain information from the Web. The lion's share of Internet users uses a screen for these purposes, which can be either a separate device (PC monitor) or an integral part of a mobile device with network access. Given the successful development computer technology and the availability of both desktop and laptop computers and all kinds of electronic gadgets, it is safe to say that today the monitor is the most popular means of viewing web pages.
Be that as it may, in some cases we simply cannot do without printing out the pages we are interested in. That is why, on many websites, for each document available to the user, there is a version of it that is used when printing on a printer. But due to the fact that the development of Web technologies is aimed primarily at the visual presentation of information on monitor screens in a browser, many web pages are printed in a form that is not entirely convenient for reading. Navigation bars, banners for various purposes and other similar elements of a web page clutter its visual presentation in printed form. In addition, most of these elements are designed to interact with the user through the browser and therefore, when transferred to paper, they are of no use at all. Therefore, more and more often on the web pages you visit you can find links like “Print version of the page”, allowing you to see the document on the screen in the form in which it will be printed on the printer.
CSS specification tools allow web developers to easily create various options presentation of pages depending on the method of their display (monitor, printer, and more). This article discusses ways to implement this approach using CSS.
Making connections.There are several ways to import the content of external CSS style sheets into an HTML document and define the necessary rules directly in the page's source code file.
Meta tag.The most common and familiar option is to use a meta tag, which contains the media attribute, which allows you to determine the device for which the document is formatted using the specified CSS file. Here's an example:
The above example includes the CSS file print_stylesheet.css, intended for formatting the document when outputting to a printer (media="print" ). That is, for all other cases of presenting a web page (other than the printed version), the CSS rules defined in the print_stylesheet.css file are not taken into account. The CSS specification defines ten valid values for the media attribute, provided for various devices and ways of presenting Web information: all, aural, braille, embossed, handheld, print, projection, screen, tty and tv. In this article we will not consider all the values, but only those that define the printing device. But you should also pay attention to the value all , which is set by default for the media attribute unless otherwise explicitly specified. In addition, if a specific CSS file is intended to format a page when outputting to several types of devices simultaneously, then the corresponding keywords can be specified in one line, separated by a comma:
CSS import command.You can also use the @media keyword to include an external CSS file. The rule defined in this case can specify several types of media for which formatting is intended. In this case, the syntax allows two options for writing the command:
@import url("styles/stylesheet.css") print, projection;
or
@import "styles/stylesheet.css" print, projection;
As can be seen from the example, there are no special differences between the acceptable options. In one case, the url directive is used, and the second involves writing the path to the required CSS file without it. The example rule involves using the stylesheet.css file located in the styles folder, which is intended to format the document for devices with paged information output (print - printers, projection - slide projectors and similar devices).
Directly in the html document of the web page.To do this, use the @media CSS rule, within which the document formatting properties and the required values for them are specified. Immediately following the @media keyword, one or more media types (separated by commas) are specified for which formatting is performed:
@media print, projection (
body (font-size: 12pt; line-height: 110%; background: white;)
}
@media screen (
body (font-size: medium; line-height: 2em; background: silver;)
}
As you can guess, in the example, within the framework of the first @media rule, CSS properties for the document workspace ( ) are described, intended for its display on devices with paged information output (print, projection ). And the last rule determines appearance page displayed on the screen (screen ).
Recommendations for formatting the print version of the document.As mentioned above, the web page must be formatted appropriately before printing. That is, the required CSS file must be connected to the document using one of the methods discussed in the previous paragraph. A convenient way to create such a file is briefly described in this post. We just have to look at a few important guidelines that need to be followed when editing a CSS file intended for a printed page.
- Change the color scheme used to display the page on screen.
If, when displaying a document on the screen, any background image or just a background fill is used, and also if you use a color font other than the standard version (black), then when creating a CSS file for printing, you need to cancel this formatting. The printed page should look as simple as possible - white background and black font. Many users use black and white printing mode to print web documents. In addition, printing a page with a rich color scheme significantly increases ink or toner consumption.
- Change the font type you use.
In the text design of most web pages intended for online reading, serif fonts are used - sans serif (sans serif), as they are considered more convenient when reading from a monitor screen. But when you transfer the page to paper, the situation changes and serif fonts, which are characterized by small decorative elements(serifs) at the ends of each letter. It is believed that it is serifs that help direct the user’s gaze in the right direction – along the text. Therefore, large amounts of text should be formatted in a serif font (Times New Roman, Georgia, Palatino and others).
- Pay attention to the font size.
If it is acceptable to use a relatively small font size (11 pixels, and sometimes less) to display text on the screen, then for the printed version of the page it is necessary to increase it to at least 12 pixels, but no less - it all depends on the audience for which the content is intended. document information.
- Highlight the links used on the page.
In order for the information placed on the page to be expressed in the most complete way, when transferring it to paper, it is necessary to visually highlight all the hyperlinks present in it, since in this case they are no longer clickable and must have a special form of display. For this purpose, they often use underlining links and changing the font color of their anchor text to blue.
- Remove unnecessary images.
The importance of the images used in a web document is determined by several factors, depending both on its developer and on the marketing department of the company that owns the site. Ideally, it is recommended to leave only those images that carry semantic information, being illustrations of the presented text, as well as the site logo, usually located in the upper left corner of the page.
- Remove navigation elements.
Among the many components that are useless in a printed version of a web page are the navigation menu and other elements that are somehow related to site navigation. Therefore, leaving them on the page when printing, you are simply wasting ink. Moreover, by removing them, you will free up additional useful space for the text, and thereby present it in a more readable form.
- Remove unnecessary advertisements.
Ideally, for users who print out a Web page to read the information it contains, advertisements in the form of banners and other forms of graphical and textual information provide no value. And it would be necessary to completely get rid of it in our case, but reality dictates its conditions. Most sites on the Internet exist thanks to advertising, and therefore its removal can lead to negative consequences. Therefore, promotional products presented on the site often remain when the pages are printed, but if you can reduce their number to a minimum or simplify the way they are presented, then this will be ideal. Try to find a middle ground if possible.
- Remove all animated images.
Interactive graphic elements controlled using scripts, as well as animated Flash images, as a rule, are printed incorrectly, and in some cases, defects in their printing (“creeping”) can affect the quality of text display, which is completely unacceptable.
- Author's information.
Even if on your website, when publishing articles, information about their author is not indicated (and this is recommended), this data should be included in the pages for printing. This will allow users who print the source material and work with it in a more convenient form and/or location to be able to find out information about the author without having to revisit your site.
- Use the full URL of your site.
Including the full URL of the printable page at the bottom of the page is very helpful. important point. This will allow users to quickly return to it and use any link leading to another page containing expanded information on the issue in question or for another purpose. In any case, this encourages the user to visit your resource again. In addition, with further reproduction of the printed page (using photocopies, for example), more people will learn about your site.
- Include copyright information.
All information that is on your web resource is protected by copyright and belongs only to you. Even if a user, guided solely by consumer intentions, prints a page, this does not mean that the information contained on it can now be used for commercial purposes. Therefore, copyright information must be transferred to the printed copy of the document. This, of course, will not prevent theft, but at least it will remind the attacker that you own the copyright to this information.
By following all of the above recommendations for formatting web pages intended for printing, you will be able to satisfy the requirements of most users who, for various reasons, are forced to work with documents printed on a printer. And this, as a result, will help you form a group of users who make up the target audience of your site.
Post Views: 330
Today you will find a post from a series of design tips. And not graphic design, but interface design. I think many of you have at least once printed a website page directly from your browser. The sequence is usually like this: press Ctrl+P, wait a minute, then figure out how to insert the paper into the printer, press Ctrl+P again, wonder why so many banners, counters and the main menu were printed. All I needed was a map and contacts.
Some designers solve this issue this way: a separate printable version is created for each page. Most often, this is a document into which banners, menus and other page elements that are unnecessary for printing are not inserted.
Why make a separate version?If the page is large, then it is possible that it does not fit on A4 and only half will be printed, and the rest will be on the second sheet. By removing unnecessary blocks before printing, we will save space on paper, ink in the printer and nerve cells.
In addition, different resolutions of user screens will not allow us to know exactly how this or that element will be printed. Therefore, I would advise you to remove everything unnecessary and be sure that all printouts will be the same.
How do I specify what to print?Usually, thanks to classes and object identifiers, we can hide almost any element on the page. In order not to hide unnecessary things, I would recommend hiding the navigation header, site logo, sidebar (if there is one) and footer (bottom of the page).
Thus, what is in the content area will be printed. Assign your own class to all elements that you want to hide when printing, for example “no-print”.
We can also specify that images located in the folder with banners should not be sent for printing. This is done using a mask. To do this you need to specify in CSS:
img (display: none !important; )
With this code we will hide all banners that appear anywhere on the page. In the same way, you need to make the remaining elements invisible.
No-print ( display: none !important; )
Application in practiceIn order for the print.css file to be processed only during printing, you need to specify it in this way:
Print this page
Several years ago I was pleasantly surprised to learn about the existence of such a function. It is convenient and quite simple, so I recommend you to use it.
From time to time you can come across articles on the Internet that are so valuable that you want to print them out and read them to the core. At the same time, not all services provide a printable version of the article, or our desires to print do not coincide with the possibilities provided (we want to leave a picture or change the main font type). 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. The address is entered, the page is loaded and we see that when you select any of the interface elements, 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 by one or in a group, expanded separately within the borders, or selected one block of text, deleting all others. That is, it is possible to individually remove parts of the page that are unnecessary for printing or quickly isolate what is needed from the unimportant and print.
On the left side of the screen there is a sidebar with a number of functions for the page being edited:
- saving the edited page in PDF, HTML formats;
- changing text size, font type;
- Remove background or images with one click.
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 click “Next Page”, “Next Page” again, 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 plugin 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 cut down and carbon monoxide not emitted into the atmosphere.
Bloggers may also benefit. Installing the plugin will result in 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.
In which he indicated that their order detail pages were unusable in printed form.
I was stunned when I saw this tweet - I realized it had been a long time since I optimized styles for print and I hadn't even thought about checking them.
This may be because I spend a lot of time resizing my browser window to ensure my sites work perfectly in all sizes and shapes, or maybe because I rarely print pages for myself. Regardless of the reasons, I completely forgot about print styles and that's bad.
Optimizing web pages for printing is important because by printing pages we make the site as accessible as possible, regardless of the environment. We should not make assumptions about our users and their behavior. People keep typing web pages. Think articles, blog posts, recipes, contact information, map or real estate sites. Someone is bound to try to print one of your pages at some point.
I gave up on home printers a long time ago because they always seemed to break after 10 minutes of use. But not everyone is like me. - Haydon Pickering (Inclusive Design Patterns)
If you find yourself in a similar position, this post will help you with a quick refresher. If you haven't optimized your pages for print, the following tips will help you get started.
1. Connecting styles for printingThe best way Connecting styles for printing is by declaring the @media directive in your CSS.
Body ( font-size: 18px; ) @media print ( /* print styles go here */ body ( font-size: 28px; ) )
Alternatively, you can include styles in HTML, but this will require an additional HTTP request.
2. Testing
You don't have to print a page every time you make a small change to the styles. Depending on your browser, you can export the page to PDF, use print preview, or debug directly in the browser.
To debug print styles in Firefox, open the development panel (Shift + F2 or Tools > Web Developer > Developer Toolbar), type media emulate print in the input field and press enter. The active tab will behave as if the media type was print until reloaded.
Emulating print styles in Firefox
In Chrome, open the developer tools (CMD + Opt + I (macOS) or Ctrl + Shift + I (Windows) or View > Developer > Developer Tools) and bring up the console, open the render panel and select Print from the Emulate CSS Media menu.
Emulating print styles in Chrome
3. Absolute units of measurementAbsolute units are bad on screen, but great for printing. In print styles, their use is completely safe and it is even recommended to use units such as cm, mm, in, pt or pc.
Section ( margin-bottom: 2cm; )
4. Specific rules for pagesYou can set properties specific to the printed page, such as its dimensions, orientation, and padding, using the @page directive. This is very convenient if you want all pages to have certain indents.
@media print ( @page ( margin: 1cm; ) )
The @page directive is part of the Paged Media Module specification, which has great things like the ability to select the first page to print or blank pages, position elements in the corner of the page, and much more. This can even be used to print books.
5. Managing Page BreaksBecause printed pages, unlike web pages, are not endless, content will be split between pages. We have 5 properties to control how this happens.
Page break before element.If we want the element to always be at the beginning of the page, we can force a page break using the page-break-before rule.
Section ( page-break-before: always; )
Page break after element.The page-break-after rule allows us to force or disable page breaks after an element.
H2 ( page-break-after: always; )
Page break inside an elementThis property is useful if you need to avoid page breaks within an element.
Ul ( page-break-inside: avoid; )
Widows and Orphans (Hanging Lines)Sometimes you don't need control over page breaks, but you do need control over how many lines appear on the current page and how many on the next page. For example, if the last line of a paragraph does not fit on the current page, it will be moved to the next page along with the penultimate one. This is because the corresponding widows property defaults to 2. We can change it.
P ( widows: 4; )
If we encounter the other side of this problem and only the first line of a paragraph fits on the current page, then the entire paragraph will start on the next page. The orphans property and its default value of 2 are responsible for this.
P(orphans: 3;)
This code means that at least 3 lines must fit on the current page so that the paragraph does not carry over to the next one.
Not all of these properties and values work in every browser; you should test print styles in different browsers.
6. Reset stylesIt makes sense to reset some styles like background-color , box-shadow and color for printing.
*, *: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)
Print styles are one of the few exceptions where using the!important keyword is fine.
7. Removing unnecessary contentTo avoid wasting ink, you should remove unnecessary items - design elements, advertising, navigation, etc. using the display: none property.
You can basically show only the main content and hide everything else:
Body > *:not(main) ( display: none; )
8. Print link addressesA:after ( content: " (" attr(href) ")"; )
Of course, everything will be shown this way: relative links, absolute links, anchors, etc. The following option will work better:
A:not():after ( content: " (" attr(href) ")"; )
Looks crazy, I know. The way these lines work is to display the value of the href attribute next to any link that has one, if it starts with http but does not point to our mywebsite.com.
9. Printing abbreviationsAbbreviations must be wrapped with an element indicating the definition in the title attribute. It makes sense to print this.
Abbr:after ( content: " (" attr(title) ")"; )
10. Print backgroundBrowsers generally don't print the background color and background images unless you explicitly tell them to. There is a non-standardized print-color-adjust property that allows you to override the default settings in some browsers.
Header ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )
11. Media queriesIf you write media queries like the following example, keep in mind that the styles in this media query will not be applied when printing.
@media screen and (min-width: 48em) ( /* screen only */ )
Why, you ask? Because CSS rules are only applied when both conditions are met: min-width is 48em , media-type is screen . If we get rid of the screen keyword, the media query will only take into account the min-width value.
@media (min-width: 48em) ( /* all media types */ )
12. Printing cardsCurrent versions of Firefox and Chrome can print maps, but Safari cannot. Some services provide static maps that can be printed instead of the original.
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 Add-on 2: GutenbergIf you're looking for a framework, you might like Gutenberg, which makes optimizing your pages a little easier.
Addendum 3: HartiaThis is another framework for creating print styles from