CSS style designed for control of print design

Most web designers are not familiar with print control, and they tend to be more obsessed with pixels than printers. In the real world, many people rely on Web pages for reference: In this digital age, in a number of special occasions, many people hold the paper in their hands. Web developers can take steps to compensate for the gap between the printer and the LCD screen.

Style for printer instead of screen design

/* Style will be applied only to print */@media print {}

Note * You can also use a separate CSS file, set Link's media= "Print" property to specify that this style is dedicated to printing

<link type= "Text/css" rel= "stylesheet" href= "Css/print.css" media= "print" >

It is not necessary to reshape the entire CSS for your site, as a whole, by printing to inherit the default sample; In order to save toner when printing, most browsers will automatically invert the color. In order to achieve the best results, the color changes should be obvious:

/* in black and white * * @media print {   body {      color: #000;      Background: #fff;   }}

We're not creating the entire page, just to show a well-designed, readable website:

/* Remove background image, save pen black */h1 {   color: #fff;   Background:url (banner.jpg);} @media Print {   h1 {      color: #000;      Background:none;   }   Nav, aside {      display:none;   }}

To make the printer more efficient, you should only show the body content, remove the header and footer navigation bar

@media Print {   h1 {      color: #000;      Background:none;   }   Nav, aside {      display:none;   }   Body, article {      width:100%;      margin:0;      padding:0;   }   @page {      margin:2cm;   }}

Processing of links

Hyperlinks are not visible on the printer and should be extended

/* Add 
The display may be the same


Control Print Setup Options

The @page rule allows you to specify various aspects of the page. For example, you will specify the dimensions of the page. Margins, header footers, and so on are all important. [Many browsers are supported]

@PAGE Regular paper size settings

With this CSS you can set the paper size, 5.5 inches wide and 8.5 inches high.

@page {  size:5.5in 8.5in;}
You can also control the paper size by alias, such as "A4" or "legal."

@page {  size:a4;}
You can also control the direction of printing, Portrait: Portrait print, Landscape: landscape

@page {  size:a4 landscape;}
Page Model the page models

In a paged media format model, documents are transferred to one or more page boxes. The page box is mapped to a rectangular plane. This is roughly similar to the CSS box model.

Note * Fewer browsers supported


@page {width:50em;}
Page Margin Model Page-margin Boxes

Before further discussion, we should understand the box model of the page, because its behavior is somewhat different from how it works on the screen.

The page model defines the page area and then divides the 16-week edge box. You can control the size of the page area and the margin between the edge of the page area and the end of the page itself.


Left and right margins

@page: Left {  margin-left:30cm;} @page: Right {  margin-left:4cm;}
The following CSS will show the title on the bottom left, the page counter in the lower right corner, and a chapter title in the upper right corner.

@page: right{   @bottom-left {    margin:10pt 0 30pt 0;    Border-top:. 25pt solid #666;    Content: "Our Cats";    font-size:9pt;    Color: #333;  }  @bottom-right {     margin:10pt 0 30pt 0;    Border-top:. 25pt solid #666;    Content:counter (page);    font-size:9pt;  }  @top-right {    content:  string (doctitle);    MARGIN:30PT 0 10pt 0;    font-size:9pt;    Color: #333;  }}
The display results are as follows:


Note * This article is organized from: Tips and Tricks for print Style Sheets and designing for print with CSS and CSS3 page specification