CSS styles specifically designed to control printing

Most web designers are new to print controls and are often more enamored with pixels than printers. In the real world, many people rely on printing web pages from websites for reference: In this digital age, many people still have paper in their hands on some special occasions. There are a few things web developers can do to bridge the gap between printers and LCD screens.

Styles designed for printers rather than screens

/* 样式将只应用于打印 */
@media print {


}

Note* You can also set the media="print" attribute of the link in a separate CSS file 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; overall, the default style is inherited by print; only qualify for different needs. To save toner when printing, most browsers automatically invert colors. For best results, color changes should be noticeable:

/*白纸黑字*/
@media print {
   body {
      color: #000;
      background: #fff;
   }
}

We are not creating screenshots of the entire web page, just to show a well-designed, readable website:

/*去除背景图片, 节约笔黑 */

h1 {
   color: #fff;
   background: url(banner.jpg);
}


@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }
}

In order to make the printer more efficient, only the main content should be displayed and the header and footer navigation bars should be removed

@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }


   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }


   @page {
      margin: 2cm;
   }
}

Link processing

The link cannot be seen on the printer. The hyperlink should be expanded

/*在超链接后面添加带<http://XXX>的完整地址*/
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }


   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

The display effect may be like this

​Control print setting options

The @page rule allows you to specify various aspects of the page. For example, you will want to specify the dimensions of the page. Page margins, headers and footers are all very important. [Many browsers already support it]

@PAGE rule paper size setting

Through the following 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 through aliases, such as "A4" or "legal."

@page {
  size: A4;
}

You can also control the printing direction, portrait: print vertically, landscape: horizontally

@page {
  size: A4 landscape;
}

PAGE Model The Page Model

In the paginated media format model, the document is moved into one or more page boxes. The page frame is mapped to a rectangular plane. This is roughly similar to the CSS box model.

Note* Few browsers are supported

@page { width: 50em; }

PAGE margin model Page-Margin Boxes

Before going any further, we should understand the box model of pages, as its behavior is somewhat different from how it works on the screen.

The page model defines the page area and then divides it into 16 peripheral edge boxes. You can control the size of the page area and the size of 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 display the title at the bottom left, the page counter at the bottom right, and the chapter title at the top right.

@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 effect is as follows:

Note* This article is compiled from: Tips And Tricks For Print Style Sheets and Designing For Print With CSS and css3 page specification

The above is the detailed content of CSS styles specifically designed to control printing. For more information, please follow other related articles on the PHP Chinese website!