CSS

列印

書到用時方恨少

使用時機

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

  • 將目前看到的網頁列印下來

  • 將主要內容列印下來

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

如何設定列印畫面

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

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

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

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

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

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

列印頁面配置

我們會使用 @page 

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

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

頁與頁之間的斷點設置

  • 元素之前是否要分頁： 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)")"; }

  • 強制開啟背景圖片（因為瀏覽器的列印有時候預設會是關閉的）

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

小結

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

作業

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

參考解答

參考連結

Previous瀏覽器 Hack 技巧Next動畫（未完成）

Last updated