Print —— 被埋沒的Media Type

2015/11/30 13:23:53來源：騰訊CDC

浪跡互聯(lián)網(wǎng)，是否有過這樣的經(jīng)歷，遇到自己特別需要或者特感興趣的內容時，或收藏網(wǎng)址或存成筆記或將其打印出來？用自己喜歡的方式將內容收藏以便日后查閱。前兩種應該是大家常用的處理方式，而第三者又有多少人實際操作過呢？

當你真的遇到第三者這種情況時，是否發(fā)現(xiàn)調出打印預覽時的效果和自己的預期不太相符? 或者是網(wǎng)頁的原樣但卻包含了很多在紙上不需要的內容。這個時候你會怎么處理呢？放棄打印，低碳環(huán)保?復制內容到word中重新處理，費時費力費紙費電? 實際上這種情況可以很容易的被避免，那就是對網(wǎng)頁應用–打印樣式

一、原因分析

不過你可能會發(fā)現(xiàn)，大部分的網(wǎng)頁都沒有針對打印內容做針對處理，究其原因，大致可總結出幾點

1.打印成本

首先打印機并不像電腦一樣在家庭中普及，其次紙張與墨水都屬于耗材，尤其是墨水的價格直接影響著打印的成本

2.提倡無紙化

在生存環(huán)境日益惡化的今天，低碳環(huán)保是一個需要大家關注的問題，而打印確是費紙費電的一種行為，而且與提倡的無紙化辦公相違背

3.特定性較強

網(wǎng)頁打印并不是用戶的剛性需求，在一些特定的場景網(wǎng)頁打印的機會才會多一些

二、使用場景

在網(wǎng)絡上有哪些地方需要網(wǎng)頁打印呢？可能大家會有一些印象的，比如優(yōu)惠券，報銷單據(jù)，簡歷文章，教程手冊等

不過大家可以自己思考下是否還有哪些場景是需要打印的？

其實根據(jù)不同情況進行分析，需要在紙上瀏覽的內容，在紙上瀏覽可能更方便的內容，而且在紙上閱讀的閱讀體驗及便捷程度可能比在電子設備上好，這些都是網(wǎng)頁打印存在的支撐。如CDC博客文章頁，華爾茲規(guī)范， Prowork排期，百科詞條，TAPD上的一些文檔等等，還有很多需要大家自己去結合自己的業(yè)務需求來確定是否需要改進打印的體驗

三、打印樣式

樣式引入

1.嵌入打印樣式到樣式文件中

    @media print { &hellip; }

彩色打印

    @media print and (color) { &hellip; }

2.單獨引用樣式文件

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

指定多個媒體類型

    <link rel="stylesheet" type="text/css" media="screen, print" href="all.css" />

打印樣式手冊

名稱	描述	詳細介紹
@page	設置頁面容器的版式，方向，邊空等	http://www.w3.org/TR/css3-page/#at-page-rule
page-break-before page-break-after page-break-inside	設置對象前后及對象本身的分頁處理	http://www.w3.org/TR/2011/REC-CSS2-20110607/page.html#page-break-props

還有一些試驗性質的屬性用來提升打印效果，不過目前還只是一些草案，只有部分屬性被瀏覽器支持

Widows And Orphans

傳統(tǒng)排版印刷的細節(jié)處理，避免一些單詞或者行單獨顯示。

Crop Marks And Page Bleed

出血是一個常用的印刷術語，印刷中的出血是指加大產(chǎn)品外尺寸的圖案，在裁切位加一些圖案的延伸，專門給各生產(chǎn)工序在其工藝公差范圍內使用，以避免裁切后的成品露白邊或裁到內容。在制做的時候我們就分為設計尺寸和成品尺寸，設計尺寸總是比成品尺寸大，大出來的邊是要在印刷后裁切掉的，這個要印出來并裁切掉的部分就稱為出血或出血位。

目前在一些設計圖和廣告海報等的打印中應用較多

Box Decoration Break

 box-decoration-break: slice | clone;

左側為slice屬性，右側為clone屬性

關于打印排版的內容還有很多，感興趣的同學還可以去w3c官網(wǎng)上查看下具體的工作草案CSS Paged Media Module Level 3

其它優(yōu)化

二維碼,可以便捷的訪問原網(wǎng)址

print5

.title h3:after{ content: url(‘qrcode.png’); position: absolute; top: 0; right: 0;}

需注意的是二維碼的位置不要遮蓋到內容

四、打印腳本

1.客戶端腳本方式打印簡單高效，與打印樣式配合成本最低，滿足日?；拘枨螅蛘呤瞧唇有枰蛴〉膬热萆尚马撁孢M行打印
```
 window.print()
```
2.打印控件專門針對打印進行處理，功能強大，需要安裝相關插件還有就是商用需付費

五、打印實踐

通過前面的簡單介紹,基本可以了解了網(wǎng)頁打印優(yōu)化需要的知識,下面以CDC博客的文章詳情頁為例,簡單介紹下優(yōu)化過程

1.查看當前網(wǎng)頁的打印效果 Ctrl+P,如下圖
2.加入通用樣式，根據(jù)前面提到的內容，將頁頭，頁尾，側邊欄，評論部分還有一些贊和分享邏輯隱藏掉 display:none !important，只保留文章內容部分
3.增加內容的顯示寬度，設置標題與內容字體排版 width: 100% !important
4.加入二維碼提高便捷性，避免遮擋住文章內容