Gutenberg 開放原始碼網頁列印樣式下載,讓輸出網頁更正確美觀

Gutenberg 開放原始碼網頁列印樣式下載,讓輸出網頁更正確美觀

現今已經很少人會把網頁內容列印出來,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 資料夾內還能找到不同配色的佈景主題。

Gutenberg

如果你覺得要自己上傳 CSS 樣式表很麻煩,或者你使用 BSP(部落格服務提供商)無法自己托管檔案,只要使用網站提供的語法(已將樣式表托管於 CDN 服務)一樣能享受 Gutenberg 的美妙。這個方法相對來說就更簡單一些,而且不會對原有的網頁樣式造成任何影響。

Gutenberg

STEP 2

專案提供 Gutenberg demo 也就是示範頁面,有兩種樣式:Modern style、Old style,點擊進去後透過瀏覽器的「列印」或「預覽列印」功能就能看到效果。

此外,Gutenberg 也能透過一些簡單的樣式設定來控制列印效果,例如加上 no-print 樣式來隱藏元素、使用 page-break-before 或 page-break-after 來強制斷開頁面等等。

Gutenberg

STEP 3

下圖是我從 Gutenberg 示範頁面列印的預覽效果,可以看到和原有的網頁樣式不太一樣,包括在標題、引言、超鏈結及內文部分都有整齊而且更好的列印效果,因為擷圖無法很全貌展現出閱讀和列印的效果對比,有興趣的朋友可以在 Demonstration 測試一下。

Gutenberg

下圖則是 Old style(Gutenberg 的另一種樣式),看得出來在字型變化及設計不太一樣,只要挑一個你喜歡的樣式,把 CSS 檔下載後透過 Gutenberg 提供的語法,將列印樣式整合到現有的網站即可。

Gutenberg

至於加入後要如何測試 Gutenberg 有沒有在自己的網站正常運作呢?很簡單,重新整理網頁確認有載入列印用的樣式表後,點選瀏覽器的「預覽列印」即可看到效果。

分享本文