現今已經很少人會把網頁內容列印出來，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 有沒有在自己的網站正常運作呢？很簡單，重新整理網頁確認有載入列印用的樣式表後，點選瀏覽器的「預覽列印」即可看到效果。
Ten articles before and after
設定 Facebook「留言同步」功能教學，讓你的網站和粉絲專頁顯示相同留言
F.lux 根據時間自動調整螢幕亮度和色彩，降低藍光對眼睛造成的傷害
Mac 推出夜間模式 Night Shift，根據時區自動調整螢幕亮度
免費索取 Apple Pay 官方貼紙，讓顧客知道你的商店接受 Apple Pay 付款
如何停止讓 Google Chrome 自動重新整理分頁、關閉自動捨棄分頁功能？
Tinycards：Duolingo 學習平台推出網頁版，利用單字卡記憶各種知識
Tinycards 學習平台 Duolingo 推出免費單字卡 App，背單字長知識超好用
啟用 WhatsApp「雙步驟驗證」額外加入數字密碼提升帳號安全性