How to print the page version

Although we have already entered the e age, paper reading is still a habit of many people. For example, if I find a good blog post, I often print it out and put it on the case side for later reading and reading. As we all know, the layout of many website pages is not suitable for printing. For example, there are many advertisements inserted on the pages. Therefore, it is necessary to provide a page for printing. Fortunately, CSS has provided excellent printing support, so that we can easily implement a print-friendly page. This blog post will introduce this topic.

Add print Link

The current browsers have the print function, which is usually placed under the "file" menu. However, this is often inconvenient to use. Many pages add printed links to the pages. For example, Sina news pages usually have printed links at the end of the text. To implement a print link, you only need to add a common HTML link and define the following onclick event:

<A onclick = "window. Print ();"> Print </a>

Add Print Style

For exampleArticleCSS 2.x provides support for print styles. As follows:

<StyleMeta = "print"Type = "text/CSS"> .... </Style>

Define a set of print-specific styles for the page by defining the "meta" attribute of the style object as "print. Similarly, you can define a page style for traditional screen display:

<StyleMeta = "screen"Type = "text/CSS"> .... </Style>

When defining a CSS Print Style, some special CSS attributes for printing are used, as shown below:

Property	Description	CSS
orphans	Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element	2
Page-break-after	Sets the page-breaking behavior after an element	2
Page-break-before	Sets the page-breaking behavior before an element	2
Page-break-inside	Sets the page-breaking behavior inside an element	2
Widows	Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element	2

When setting the format of the printed page, we 'd better follow the following principles:

• Convert the page color into black and white colors: the current page colors are rich. However, if the customer's printer only supports both black and white, it is very inconvenient to print a page with rich colors.
• Underline all links: on the screen, we can use the mouse shape or font color to differentiate links from common text. But none of these are printed out of the paper. Therefore, adding underscores can help you know the links in the printed text.
• Note the text font and font size: Generally, the font library on the printer is different from the font library on our computer. In addition, the font size should be appropriately increased to facilitate reading the printed content.

Select print content

After adding a print link and setting the print content, let's discuss how to select the content on the page to build the print page. Currently, the web page is rich in content, including navigation, images, advertisements, and so on. However, we cannot add all the content to the print page. For example, the user certainly does not want to print out a lot of advertisement content on the page, which affects reading in the future and wastes paper and ink (now we can all talk about environmental protection --). In general, the following principles can be observed when printing content:

• Delete all irrelevant images: In general, only images related to the text and such as Website Logo images are retained.
• Delete all or most ads: it is always uncomfortable for customers to see ads on printed paper. Of course, you need to discuss with the marketing department whether to retain ads or what advertisements.
• Delete navigation content: most of the time the printed navigation is useless, it only takes up too much space to print.
• Remove all JSCode, Flash, or animation: on the printed paper, any animation is meaningless. In addition, printing pages usually contain static content, so we do not need to include JS Code. To dynamically generate content, such as querying a database. We can generate all the content that needs to be dynamically generated on the build print page and put it directly into the print page.
• Contains the user's line of signature and the source of the article: by printing the version, the user can know where to print the article and who to write it.
• Contains the original URL of the article: You can find this article on the Internet through this URL.
• Include copyright information: this ensures that your copyright information is always included in the printed version.

Selecting printed content involves a lot of work and requires coordination between design, market, and other aspects. In short, when you choose to print the content, you must always consider whether your printed content is print-friendly. It is helpful for users to print the content later.

Conclusion

Implementing print pages is a problem that is often encountered when building a professional website. It is different from the page we usually build in a browser, such as different style setting methods, different content selection criteria. Finally, here is a W3C standard link to the CSS print page. If you want to learn more about the CSS Print Style, visit this webpage: Http://www.w3.org/TR/css-print/

Del. icio. us: Print page, print friendly