Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 304151

    累積人氣

  • 128

    今日人氣

    0

    訂閱人氣

列印專用CSS詳解與範例 (CSS for print media)

今天要寫這篇關於CSS for print的主題感觸良多……XD哈怎麼說呢,就是因為前陣子為了搞特規標籤(熱感紙)列印,偏偏熱感紙印表機尺寸與printer設置和一般書面常用A4紙印表機又大不相同,東搞西搞只為了在Screen上看到的畫面與印出來的100%相符。Anyway,經歷不少折騰之後,我想以後對於列印專用的CSS更加熟悉了。與大家分享一些心得,以及列出一些 CSS print boilerplate 讓有需要的人可以方便取用及修改

How it works?

@media print {}

當然首先還是來複習一下這個老早時代就存在的語法 @media,近年來可能因為 RWD 大行其道,所以知道 media query 的人也理所當然知道 @media 的作用了,但其實很早以前,它就已經存在,當時主要是用來區分 screen, print 以及一些目前已經完全看不到的裝置類型,自然也就被 Deprecated 掉了……

How to use it?

再複習一下,要區分不同媒體各自讀取不同的CSS files/code,有兩種方式。其一是在 html document head 中使用 link 的 media 屬性來設置;其二則是直接在 .css codes 裡下 @media mediatype { ... } 在大括弧中撰寫 css code

CSS Syntax

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
@media not|only mediatype and (media feature) {
    CSS-Code;
}    

然而今天主要要介紹的是列印用,就直接用列印用的方式來示範程式碼了。

在同一份CSS檔案中區分 screen 與 print

/* Point */
body {
    padding: 10px;
}
$media print {
    /* css code start from here,
       will only been used when user click the print function on browser */
    body {
        margin: 0;
        padding: 0;
    }
}

以上CSS程式碼代表,正常的 browser 在讀取到此份 css 時,畫面一的 body padding 會是 10px, 但是列表機啟動列印模式時會吃到 padding: 0; 的設定

CSS By page

接著,以下的 css 代碼,針對目前一般常用的列印用紙尺寸,個別定義css尺寸,且用自訂 attr size 來區分不同的紙張,另一個 attr layout 來表示垂直/水平列印。最外層我們用一個 css class .page 來表示所要列印的範圍(單位)。
畢竟在呈現上,printer 的 container 和 screen 最大的差別在於網頁長度可以伸展;而列印出來最多就是一張紙的大小了

HTML

<div class="page" size="A4"></div>
<div class="page" size="A4" layout="portrait"></div>
<div class="page" size="A3"></div>
<div class="page" size="A3" layout="portrait"></div>
<div class="page" size="A5"></div>
<div class="page" size="A5" layout="portrait"></div>

CSS

/* 這些 CSS 是在 screen 上面瀏覽 */
.page {
    background: #FFFFFF;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}
.page:last-child {
    page-break-after: auto;
}

.page[size="A4"] {
    width: 20cm;
    height: 29.7cm;
}

.page[size="A4"][layout="portrait"] {
    width: 29.7cm;
    height: 20cm;
}

.page[size="A3"] {
    width: 29.7cm;
    height: 42cm;
}

.page[size="A3"][layout="portrait"] {
    width: 42cm;
    height: 29.7cm;
}

.page[size="A5"] {
    width: 14.8cm;
    height: 21cm;
}

.page[size="A5"][layout="portrait"] {
    width: 21cm;
    height: 14.8cm;
}
@media print {
    .page {
        margin: 0;
        box-shadow: none;

        /* Point: 強制分頁 */
        page-break-after: always;
    }
}
Live Demo  
相簿設定
標籤設定
相簿狀態