CSS 打印

原文連接：https://lon.im/post/css-print...

簡介

本文主要講解如何使用 CSS 控制打印樣式。

基本概念

使用 CSS 能夠控制文檔如何正確的顯示在不一樣的媒介 (Media) 上。其中分頁媒介 (Paged Media) ，不一樣於連續媒介 (Continuous Media)，它能夠控制文檔內容，將其分隔至一個或多個不相關聯的頁面 (如：書、幻燈片)。

頁面 (Page Sheet) 是物理介質 (如：紙張) 的表面，它包含可打印區域 (Printable Areas) 和不可打印區域 (Non-printable Areas)。用戶代理能夠調整文檔內容的格式，使其顯示在可打印區域。

頁面盒子 (Page Box) 是一個由長邊 (Long Edge) 和短邊 (Short Edge) 組成的矩形。長邊的方向決定了頁面朝向 (Page Orientation)，長邊是垂直方向，則頁面朝向爲縱向 (Portrait Orientation)，反之爲橫向 (Landscape Orientation)。

CSS 打印沒法指定文檔是否爲雙面打印 (Duplex Printing)，是否雙面打印應該經過用戶代理指定。不論是否雙面打印，CSS 打印老是包含左頁和右頁 (分別經過 :left, :right 指定) 。（或者說 CSS 打印假定全部文檔是雙面打印）

頁面模型 (Page Model)

和 CSS 盒子模型同樣，頁面盒子模型由外邊距 (margin)、邊框 (border)、內邊距 (padding) 和 內容區域 (content area) 構成。

其中內容區域和外邊距有着特殊的功能：

• 內容區域也叫頁面區域 (Page Area)，第一頁的頁面區域邊界構成了文檔的初始的包含塊 (Containing Block)
• 頁面外邊距區域是透明的，環繞在頁面區域周圍。在 CSS3 中，能夠用於建立頁眉和頁腳，詳見下文 頁面外邊距盒子

頁面進度 (Page Progression)方向 是文檔被分隔後的頁面的排列方向。好比：現代中文頁面進度可能是從左至右；而古代中文的頁面進度則相反。能夠經過設置根元素 (root element) 的 direction 和 writing-mode 屬性來改變頁面進度。

頁面的「第一頁」是左頁仍是右頁，能夠由頁面進度的方向決定，當頁面進度方向爲從左至右時，第一頁是右頁；反之爲左頁。（事實上也能夠經過設置根元素的 break-before 屬性來強制改變第一頁是左頁仍是右頁）

引入打印樣式的三種方式

在 CSS 中使用 @media print

@media print {
    body {
        background-color: white;
    }
    img {
        visibility: hidden;
    }
    a::after {
        content: "(" attr(href) ")"; /* 全部連接後顯示連接地址 */
    }
}

在 CSS 中使用 @import

@import url("my-print-style.css") print;

在 HTML 中使用 <link> 標籤

<link rel="stylesheet" media="print" href="my-print-style.css">

在 @media print 或 my-print-style.css 中，能夠自由的修改大部分樣式。

使用 @page

使用打印媒介查詢能夠自定義不少樣式，當但願改變頁面大小、邊距等，就須要用到 @page 了。頁面上下文 (Page Context) 中僅支持部分 CSS 屬性，支持的屬性有：margin、size、marks、bleed 以及頁面外邊距盒子等，不支持的屬性將會被忽略。

頁面外邊距盒子 (CSS3)

頁面的外邊距被分紅了 16 個頁面外邊距盒子。每一個外邊距盒子都有本身的外邊距、邊框、內邊距和內容區域。頁面外邊距盒子用於建立頁眉和頁腳，頁眉和頁腳是頁面的一部分，用於補充信息，如頁碼或標題。

頁面外邊距盒子須要在 @page 下使用，使用起來和僞類相似，也包含 content 屬性。

@page {
    /* 頁面內容區域底部添加一條 1px 的灰線 */
    @bottom-left, @bottom-center, @bottom-right {
        border-top: 1px solid gray;
    }

    /* 頁腳中間顯示格式如 "第 3 頁" 的頁碼 */
    @bottom-center {
        content: "第" counter(page) "頁";
    }
}

注：常見瀏覽器都不支持該屬性，推薦使用 Prince

屬性

margin (CSS2.1)

margin 系列屬性（margin-top、margin-right、margin-bottom、margin-left 和 margin）用於指定頁面外邊距大小。

在 CSS2.1 中，頁面上下文中只支持 margin 系列屬性。並且由於 CSS2.1 的頁面上下文中沒有字體的概念，margin 系列屬性的值的單位不支持 em 和 ex。

@page {
    size: A4 portrait;
    margin: 3.7cm 2.6cm 3.5cm; /* 國家標準公文頁邊距 GB/T 9704-2012 */
}

size (CSS3)

size 屬性支持 auto、landscape、portrait、<length>{1,2} 和 <page-size>。

• 默認值爲 auto，表示頁面大小和方向由用戶代理決定
• landscape 指定頁面爲橫向，若是 <page-size> 沒有指定，大小則由用戶代理決定
• portrait 指定頁面爲縱向，若是 <page-size> 沒有指定，大小則由用戶代理決定
• <length>{1,2} 表示指定頁面大小，填寫兩個值則分別指定頁面盒子的寬度和高度，填寫一個值則同時指定寬度和高度。在 CSS3 中，值的單位支持 em 和 ex，大小相對於頁面上下文中字體的大小
• <page-size> 也用於指定頁面大小，等價於使用 <length>{1,2}。經常使用的值有：A3、A4、A5、B4 和 B5 等，詳細尺寸請參考 [ISO 216]。<page-size> 能夠與 landscape 或 portrait 組合同時指定頁面方向。

僞類

頁面上下文也支持使用僞類，其中支持的僞類有：:left、:right、:first 和 :blank。

僞類 :left 和 :right

須要雙面打印時，一般須要將左頁和右頁設置不一樣的樣式（如頁邊距、頁碼位置）。這時左頁和右頁能夠分別用 :left 和 :right 表示。再次強調，經過 :left 和 :right 設置左右頁面不一樣樣式，並不表明用戶代理會將頁面雙面打印

/* 經過分別設置左頁和右頁不一樣的左右頁面距，爲裝訂邊留出更多的空間 */

@page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
}

@page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
}

僞類 :first

僞類 :first 用於匹配到文檔的第一頁。

@page :first {
    margin-top: 10cm; /* 首頁上頁邊距設置爲 10cm */
}

僞類 :blank

僞類 :blank 用於匹配文檔的空白頁。

h1 {
    page-break-before: left; /* 一級標題強制分配到右頁 */
}

@page :blank {
    @top-center {
        content: "這是空白頁";
    }
}

注意，空白頁既多是左頁，又多是右頁，設置左頁或右頁的樣式也會顯示在空白頁上，若是不但願顯示在空白頁上，能夠清除這些樣式。

h1 {
    break-before: left;
}

@page :left {
    @left-center {
        content: "這是左頁";
    }
}

@page :right {
    @right-center {
        content: "這是右頁";
    }
}

@page :blank {
    @left-center, @right-center {
        content: none; /* 若是是空白頁則不顯示 */
    }
}

分頁

page-break-before，page-break-after，page-break-inside (CSS 2.1)

用於控制元素以前、以後或之中是否分頁，沒有生成盒子的塊元素不會生效。

page-break-before、page-break-after 屬性支持 auto、always、avoid、left、right、recto 和 verso。

h2 {
    page-break-before: always;
}

• auto 默認值，表示既不強制分頁也不由止分頁
• always、avoid 表示在該元素以前（或以後）強制或禁止分頁
• left、right 表示在該元素以前（或以後）強制分頁，使得下一頁出如今左頁或右頁
• recto、verso 頁面進度從左至右時，分別與 right 和 left 一致；反之與 left 和 right 一致

page-break-inside 屬性僅支持 auto 和 avoid，表示在元素內容許或禁止分頁。

thead, tfoot {
    display: table-row-group;
}
thead, tfoot, tr, th, td {
    page-break-inside: avoid;
}

orphans，windows (CSS 2.1)

orphans 和 windows 用於指定在頁面的底部或頂部，元素中容許剩餘的最少行數，默認爲 2 行。

最佳實踐

• 「白紙黑字」--避免沒必要要的背景顏色、加深文字顏色等
• 避免打印次要的內容，好比導航欄、側邊欄等
• 連接後顯示連接地址
• 作好分頁，避免標題、表格單元格等換行

示例：

@media print {
    @page {
        size: A4 portrait;
        margin: 3.7cm 2.6cm 3.5cm;
    }

    h1 {
        page-break-before: always;
    }

    h1, h2, h3, h4, h5, h6,
    thead, tfoot, tr, th, td,
    li {
        page-break-inside: avoid;
    }

    body {
        background-color: white;
        color: black;
    }

    nav, aside {
        display: none;
    }

    a::after {
        content: "(" attr(href) ")";
    }

    thead, tfoot {
        display: table-row-group;
    }
}

---

參考連接：

• Paged media (CSS 2.1) W3C
• CSS Paged Media Module Level 3 (W3C Working Draft 14 March 2013) W3C
• CSS Paged Media Module Level 3 (Editor’s Draft, 22 June 2017) W3C
• CSS Pages MDN
• CSS Multi-column Layout Module Level 1 (Editor’s Draft, 22 June 2017) W3C