現今已經很少人會把網頁內容列印出來，PDF 表格表單大多能在線上處理，再加上家裡可能也不太放印表機，其實超商就能列印影印傳真，實在是沒有必要再添購一台機器放家裡佔空間。但對網頁設計者來說，有時候仍得兼顧到使用者列印內文的需求，但要怎麼樣才能讓列印出來的畫面符合使用者期待呢？至少列印時該出現的部分要出現，不該出現的廣告也盡量避免，顏色什麼的調整一下，其實可以透過 CSS 樣式來最佳化列印效果。
如果你有注意到，很多網站在 CSS 部分會在不同情境套用不同樣式、排版，例如螢幕看到的效果可能跟列印出來的不同，假如你有一個深色背景網站且內容時常會需要被列印出來，你不會希望使用者印出來的內容是一大片黑色，這時候就能寫一個用於列印時呈現的 CSS。
不想浪費太多時間寫自己網站的列印 CSS 樣式，其實網路上也有「典範」讓網頁開發者免費下載、使用，本文介紹的「Gutenberg」就是一款開放原始碼專案，名稱也是大有來頭。古騰堡是第一位發明活字印刷術的歐洲人，最著名的成就「古騰堡聖經」至今仍是美學及排版典範，這個計畫就是以他為名。
Gutenberg 原理很簡單，只要把 CSS 下載、上傳到你的網頁伺服器，加上一段原始碼後就能套用；若你對 CSS 已經很熟悉，還可以直接改寫一下，放入自己的 CSS 樣式表。或者你也能直接取用網站提供的 CDN 路徑，為自己網站、部落格加入一個更易於列印的樣式。
網站名稱：Gutenberg
網站鏈結：https://github.com/BafS/Gutenberg
使用教學
STEP 1
開啟 Gutenberg 網站後，從「How to use」找到使用方法。
簡單來說，只要從 GitHub 專案頁面將 gutenberg.css 檔案下載下來，上傳至網頁伺服器，最後修改一下網頁原始碼將 CSS 語法加入即可使用。此外，在 dist 資料夾內還能找到不同配色的佈景主題。
如果你覺得要自己上傳 CSS 樣式表很麻煩，或者你使用 BSP（部落格服務提供商）無法自己托管檔案，只要使用網站提供的語法（已將樣式表托管於 CDN 服務）一樣能享受 Gutenberg 的美妙。這個方法相對來說就更簡單一些，而且不會對原有的網頁樣式造成任何影響。
STEP 2
專案提供 Gutenberg demo 也就是示範頁面，有兩種樣式：Modern style、Old style，點擊進去後透過瀏覽器的「列印」或「預覽列印」功能就能看到效果。
此外，Gutenberg 也能透過一些簡單的樣式設定來控制列印效果，例如加上 no-print 樣式來隱藏元素、使用 page-break-before 或 page-break-after 來強制斷開頁面等等。
STEP 3
下圖是我從 Gutenberg 示範頁面列印的預覽效果，可以看到和原有的網頁樣式不太一樣，包括在標題、引言、超鏈結及內文部分都有整齊而且更好的列印效果，因為擷圖無法很全貌展現出閱讀和列印的效果對比，有興趣的朋友可以在 Demonstration 測試一下。
下圖則是 Old style（Gutenberg 的另一種樣式），看得出來在字型變化及設計不太一樣，只要挑一個你喜歡的樣式，把 CSS 檔下載後透過 Gutenberg 提供的語法，將列印樣式整合到現有的網站即可。
至於加入後要如何測試 Gutenberg 有沒有在自己的網站正常運作呢？很簡單，重新整理網頁確認有載入列印用的樣式表後，點選瀏覽器的「預覽列印」即可看到效果。
