Print —— 被埋沒的Media Type

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

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

一、原因分析

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

1.打印成本

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

2.提倡無紙化

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

3.特定性較強(qiáng)

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

二、使用場景

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

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

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

三、打印樣式

樣式引入

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

    @media print { … }

彩色打印

    @media print and (color) { … }

2.單獨(dú)引用樣式文件

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

指定多個(gè)媒體類型

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

打印樣式手冊(cè)

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

Widows And Orphans

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

Crop Marks And Page Bleed

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

目前在一些設(shè)計(jì)圖和廣告海報(bào)等的打印中應(yīng)用較多

Box Decoration Break

 box-decoration-break: slice | clone;

左側(cè)為slice屬性，右側(cè)為clone屬性

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

其它優(yōu)化

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

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

需注意的是二維碼的位置不要遮蓋到內(nèi)容

四、打印腳本

1. 1.客戶端腳本方式打印簡單高效，與打印樣式配合成本最低，滿足日?；拘枨?，或者是拼接需要打印的內(nèi)容生成新頁面進(jìn)行打印

    window.print()

2. 2.打印控件專門針對(duì)打印進(jìn)行處理，功能強(qiáng)大，需要安裝相關(guān)插件還有就是商用需付費(fèi)

五、打印實(shí)踐

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

1. 1.查看當(dāng)前網(wǎng)頁的打印效果 Ctrl+P,如下圖
      

2. 2.加入通用樣式，根據(jù)前面提到的內(nèi)容，將頁頭，頁尾，側(cè)邊欄，評(píng)論部分還有一些贊和分享邏輯隱藏掉 display:none !important，只保留文章內(nèi)容部分

3. 3.增加內(nèi)容的顯示寬度，設(shè)置標(biāo)題與內(nèi)容字體排版 width: 100% !important
      

4. 4.加入二維碼提高便捷性，避免遮擋住文章內(nèi)容
      

這樣一個(gè)簡單的流程就完成了打印樣式的優(yōu)化，實(shí)際過程非常簡單。不過具體的細(xì)節(jié)部分還需要根據(jù)實(shí)際需求進(jìn)一步打磨

六、優(yōu)化經(jīng)驗(yàn)

通過實(shí)踐,在改進(jìn)網(wǎng)頁打印體驗(yàn)過程中得出了一些具體的思考

1.紙上是沒有交互的

不同于網(wǎng)頁的點(diǎn)擊操作，紙張上的內(nèi)容只適合單純的瀏覽，所以一些復(fù)雜的邏輯并不適合出現(xiàn)在紙上。 純粹的內(nèi)容在紙上更具意義

2.節(jié)約打印成本

在保證內(nèi)容可良好閱讀的前提下盡可能的節(jié)省墨水，節(jié)約成本

3.打印提示

明確的提示和引導(dǎo)也是改進(jìn)體驗(yàn)的關(guān)鍵，否則提供的良好體驗(yàn)有可能就被埋沒了

七、輔助工具

1. 1.The Print liminator
      
      瀏覽器書簽工具，拖至?xí)灆诤簏c(diǎn)擊，調(diào)用腳本在當(dāng)前頁面顯示工具

• 可輔助移除頁面中的圖片或者不需要打印的元素

• 應(yīng)用基本打印樣式(比較適合英文打印)

2. 2.Print Friendly
      
      輸入網(wǎng)站地址，生成對(duì)應(yīng)優(yōu)化后的打印效果供選擇打印

   Save Money & the Environment

八、結(jié)語

網(wǎng)頁打印優(yōu)化的目的是為了節(jié)省成本并且可以提升基礎(chǔ)體驗(yàn)，希望通過本文可以引起大家的一些關(guān)注,并通過我們的技術(shù)小力量為產(chǎn)品的完美體驗(yàn)慢慢打磨，成為精品。

文中提到的主要是PC上關(guān)于網(wǎng)頁打印的一些內(nèi)容，關(guān)于移動(dòng)設(shè)備的網(wǎng)頁打印因?yàn)閷?shí)際應(yīng)用較少，所以這里并未做介紹，但是并不是就可以直接忽略了，像蘋果推出的AirPrint就是一種具體的應(yīng)用案例，詳見下面的參考鏈接

參考鏈接

1. Printing The Web

2. CSS-Tricks Finally Gets A Print Stylesheet

3. Make an Editable/Printable HTML Invoice

4. Making a ‘Print This Page’ Button

5. 打印樣式CSS的技巧和要點(diǎn)

6. CSS文字大小單位px、em、pt

7. AirPrint