如何构建打印样式

以前根本不知道打印居然需要专门的去写CSS,当然这也是因为本人对于CSS中media query的理解太过于肤浅。不过做软件就是这样,得活到老学到老,而且新的东西总在飞速的发展,稍有不留神就会被时代的马车所遗忘。任何事情在当你不懂的时候总感觉好难,为了不至于在过了N年之后自己被自己所嘲笑,所以我在这里记录下CSS print的一篇译文。

在开始本文之前,首先得对CSS media query 有一定的了解,其中有一个media type为print的时候,所有的样式都是针对于打印时用的。

一般来说网站都会有一个类似于print.css的文件用于管理打印方面的样式,当然这个文件里的样式并不会影响正常页面的显示。 那么如何构建一套打印的样式呢? 首先创建空的css文件,命名为print.css.然后拷贝以下代码到文件中。


    /**
    * Print stylesheet for yourwebsite.com
    * @version         1.0
    * @lastmodified    16.06.2016
    */

    @media print {
     Your notes
    }
所有的css代码都必须位于print后的大括号内。

1. 定义边框和字体的大小。


    /* Setting content width, unsetting floats and margins */
    /* Attention: the classes and IDs vary from theme to theme. Thus, set own classes here */
    #content,#page {
    width: 100%; 
    margin: 0; 
    float: none;
    }
     
    /** Setting margins */       
    @page { margin: 2cm }
     
    /* Or: */
    @page :left {
    margin: 1cm;
    }
     
    @page :right {
    margin: 1cm;
    }
     
    /* The first page of a print can be manipulated as well */
    @page :first {
      margin: 1cm 2cm;
    }
建议采用以上的设置,定义外边距为2cm.然后设置字体大小。由于打印机和显示器使用的单位是不同的,所以最好要转换一下单位,从pixel(像素),em,rem到points(点). 实践证明12pt是可以达到比较好的打印效果。这时你可以去设置打印的具体字体名称。在纸张中,衬线字体(例如:Georgia)会比较舒服。

    /* Set font to 16px/13pt, set background to white and font to black.*/
    /* This saves ink */
    body {
    font: 13pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
    background: #fff !important;
    color: #000;
    }
     
    h1 {
    font-size: 24pt;
    }
     
    h2, h3, h4 {
    font-size: 14pt;
    margin-top: 25px;
    }

2. 使用pagebreaks属性来控制打印时是否重新起一页。

总共有三个CSS属性可以控制在哪里开始重新分一页。( page-break-before, page-break-after, 和page-break-inside )

    /* The following settings are possible: */
    page-break-after  : auto | always | avoid | left | right
    page-break-before : auto | always | avoid | left | right
    page-break-inside : auto | avoid
Auto是打印元素的默认值,always表示总会开始新的一页,avoid阻止重新分页,leftright值强制生成盒之前(之后)有一个或者两个分页符,以便下一页被格式化为一个左面或者右面的页面。理想的分页设置应该类似于以下代码:

    /* Defining all page breaks */
    a {
        page-break-inside:avoid
    }
    blockquote {
        page-break-inside: avoid;
    }
    h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
         page-break-inside:avoid }
    img { page-break-inside:avoid; 
         page-break-after:avoid; }
    table, pre { page-break-inside:avoid }
    ul, ol, dl  { page-break-before:avoid }

3. 处理超链接

链接应该被高亮显示以便可以被注意到。由于在打印的纸张是链接是不用被点击的,所有有必要显示出超链接的具体地址。以下的代码可以完成此要求:

    /* Displaying link color and link behaviour */
    a:link, a:visited, a {
    background: transparent;
    color: #520;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
    }

    a {
        page-break-inside:avoid
    }

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

    $a:after > img {
       content: "";
    }

    article a[href^="#"]:after {
       content: "";
    }

    a:not(:local-link):after {
    content:" < " attr(href) "> ";

4. 隐藏视频和iframe

在纸张中展示出视频其实是不合理的。同时在将iframe设置为display:none的时候也会导致页面比较丑陋。以下的代码可以很好的隐藏iframe和video元素:

    /**
     * Making intergated videos disappear, and removing the iframes' whitespace to zero. 
     */
    .entry iframe, ins {
        display: none;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        line-height: 0pt !important;
        white-space: nowrap;
    }
    .embed-youtube, .embed-responsive {
      position: absolute;
      height: 0;
      overflow: hidden;
    }

5.隐藏不必要的元素

许多网站的文本域是不同被打印的。一方面是这些文本域并不能提交有用的信息,另一方面这无疑是在浪费墨水。因此,我们会隐藏掉所有的不相关的文本域。 同时,header, navigation, sidebar, tags, categories, comments, share buttons 和一些元素也是没有必要打印的,也应该隐藏掉。例如:

    /* Hiding unnecessary elements for the print */
     
    #header-widgets, nav, aside.mashsb-container, 
    .sidebar, .mashshare-top, .mashshare-bottom, 
    .content-ads, .make-comment, .author-bio, 
    .heading, .related-posts, #decomments-form-add-comment, 
    #breadcrumbs, #footer, .post-byline, .meta-single, 
    .site-title img, .post-tags, .readability 
    {
    display: none;
    }

6. 添加额外的信息在打印前或者打印后

有的时候,在打印前或者打印后添加相应的信息是非常有用的。你可以在这里感谢 读者能够打印你的文章,或者展示相应的版本信息。再次提醒,找对你内容区域的CSS类名称是非常重要的。

    /* Adding custom messages before and after the content */
    .entry:after {
    content: "\ All Rights Reserved. (c) 2014 - 2016 TechBrain - techbrain.de";
    color: #999 !important;
    font-size: 1em;
    padding-top: 30px;
    }
    #header:before {
    content: "\ Thank you for printing our article. We hope that some of our other articles can catch your eye as well.";
    color: #777 !important;
    font-size: 1em;
    padding-top: 30px;
    text-align: center !important;    
    }

原文地址: https://www.noupe.com/design/css-perfect-print-stylesheet-98272.html
  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen