# 列印

### 使用時機

網頁除了提供螢幕使用外，通常還會應用在一些情境下：

* 將目前看到的網頁列印下來
* 將主要內容列印下來

這兩者的不同在於需不需要印出除了主要內容外的資訊。

### 如何設定列印畫面

概念有點像是我們在上一個章節學的 CSS hack，只是這次的 hack 是要給列印出來的樣式使用。

首先，如果我們沒有做任何設定，列印就會依照我們當前看到的頁面列印，但是通常伴隨而來的問題是版面很容易就跑版。

要解決這個問題，我們先設定只有列印時才要套用的樣式，使用方式如下：

```
第一種方式：在 HTML 引入 CSS 時，設置 media 為 print
<link rel="stylesheet" media="print" href="css/print.css">

第二種方式：使用 CSS 媒體查詢
@media print {
    selector {}
}
```

這兩種方式都是列印時才會套用裡面的樣式，接著我們來看看可以設定些什麼。

### 列印頁面配置

我們會使用 `@page`&#x20;

```css
@page {
  size: A4 portrait; /* 可直接指定寬高、設定單位或常用尺寸，以及方向 */
  margin: 0.5cm; /* 也就是 word 檔裡稱的編距 */
  orphans: 4; /* 頁面最後一個段落的行數，預設值為 2 */
  widows: 2; /* 頁面第一個段落的行數，預設值為 2 */
}
```

關於寬高的地方，可以使用這個網站換算單位：<https://pixelcalculator.com/en>\
根據 DPI 的不同，螢幕單位 與 實際長度單位 的換算也不同。&#x20;

頁與頁之間的斷點設置

* 元素之前是否要分頁： page-break-before
* 元素之後是否要分頁： page-break-after
* 元素是否要分頁： page-break-inside

其他注意事項：

* 字級單位使用 pt（但不確定會不會被無障礙機器 freego 掃出來，待驗證。）
* 非必要內容使用 `display: none` 隱藏
* \<img> 寬度設為 max-width: 100%
* 容器：寬度改為 100%、取消浮動、margin: 0
* 連結網址直接列印出來，例如：\
  a::after { content: "("attr(href)")"; }
* 強制開啟背景圖片（因為瀏覽器的列印有時候預設會是關閉的）

```css
-webkit-print-color-adjust: exact;
background-image: url('...') !important; /* 如果背景圖沒顯示請加必殺技 !important */
```

### 小結

其實列印的需求在實務上很常見，因為跟書面業務性質有關，只要是需要交紙本報告就有可能會用到，所以建議這個技巧還是可以好好學習。

### 作業

如果你現在正在自製一個 UI 框架，請幫這個 UI 框架設定一個初始列印的 print.css

[參考解答](https://github.com/ya-sai/paprika/blob/main/assets/scss/layout/_print.scss)

### 參考連結

* [Printing The Web](https://drublic.de/blog/printing-the-web)
* [關於 @media print 的二三事..](https://kakadodo.github.io/2018/03/13/css-media-print-setting/)
