為什麼列印網頁時頁首與頁尾消失了？ /  Page Margin Setting causes Headers and Footers to Disappear when Printing

4月 07, 2021 Blogger , CSS , Programming/CSS 4 Comments Edit Copy Download

嗨，大家最近在吃什麼呢？這裡是為臺灣祈福的布丁，最近我苦於處理Blog網頁列印版本的各種問題。其中一個令我困擾已久的難題，就是列印版的頁首和頁尾消失了。研究後才發現，這是因為我在CSS語法中設定了頁面邊界「@page {margin: 0.5cm}」，導致Google Chrome瀏覽器在列印版本中隱藏了頁首與頁尾。接下來我們就一起來看看網頁列印版本的頁首和頁尾，以及造成它們消失的CSS設定細節吧。

列印網頁的頁首和頁尾 / Headers and footers when printing

網頁列印版本的頁首和頁尾是什麼呢？這是一種在列印時，瀏覽器自動加入的額外資訊。每個瀏覽器所設計的頁首和頁尾不盡相同。以Google Chrome瀏覽器為例，它所加入的頁首為左上角列印日期、右上角網頁標題，而頁尾則是左下角網址、右下角是頁碼與頁數。

一般情況下，要列印的使用者可以自行決定要不要開啟頁首與頁尾。在Google Chrome瀏覽器89版中，使用者可以從預覽列印的顯示更多設定中找到「選項 [v] 頁首及頁尾」選項。如果此選項不勾選，那頁首與頁尾就不會顯示。

上面兩張列印網頁的結果中，左邊是有頁首與頁尾，右邊則關閉了頁首及頁尾的顯示。這樣子大家應該就能知道頁首跟頁尾在網頁列印版本中扮演的角色了吧。

消失的頁首和頁尾 / Why does headers and footers  disappear?

通常的情況下，頁首與頁尾會隨著使用者的設定而隱藏或出現。但我們來看看下面這張預覽列印的操作畫面，它竟然出現了跟使用者預期不一樣的狀況。

仔細看看，我在選項裡面打勾了「頁首及頁尾」，照理說網頁的頁首跟頁尾應該要出現，但左邊的預覽畫面中卻沒看到頁首與頁尾。這是為什麼呢？

頁面邊界太窄了 / The page margin is too small

(圖片來源：GitHub)

我在網路上找了半天，最後發現真正的問題來自於CSS語法中頁面邊界「@page {margin: 0.5cm }」的設定。根據TWiStErRob的測試，當頁面邊界被設定低於0.8cm時，頁首與頁尾不會顯示；介於0.8cm到0.83cm之間，頁首與頁尾會被裁切，無法完整顯示；只有在0.83cm以上，頁首與頁尾才能完整顯示。

回頭找看看「布丁布丁吃什麼？」的CSS設定，赫然發現我居然也設定了頁面邊界。CSS程式碼如下：

@page {
  margin: 0.5cm;
}

把這段CSS設定註解之後，頁首與頁尾就能正常運作了。

然而在Firefox瀏覽器87版中，頁面邊界的設定並不會影響到頁首與頁尾的出現。我不確定這是不是Google Chrome特有的問題，而它在2013年已經被提交到chromium的bugs中，至今仍未獲得改善。

為什麼會有頁面邊界0.5公分的設定 / Why do we set the page margin to 0.5 cm?

話說這個頁面邊界0.5公分的設定到底是從何而來的呢？很可能是來自於我之前取用的Blogger範本Breeze。關於「布丁布丁吃什麼」範本修改的過程，可以回頭參考「布丁布丁吃什麼？」範本改版記錄一文。

頁面邊界0.5公分的這個設定，似乎是網路上常見的一種做法。How To Set Up A Print Style Sheet一文教導大家如何設定網頁的列印版本CSS語法，裡面建議使用頁面邊界0.5公分的設定，而預覽列印的畫面上也看不到頁首與頁尾。不過該文似乎沒有說明頁面邊界與頁首和頁尾之間的關係。詹姆士的筆記本在@Page使用方式一文中加入了頁面邊界0.5公分的設定，但沒有說明理由。關於 @media print 的二三事..一文中也有用到頁面邊界0.5公分的設定，但似乎也是參考網路上的寫法，同樣沒有說明理由。

到底為什麼會有頁面邊界0.5公分的設定呢？也許是因為很多網頁設計師不喜歡瀏覽器自動添加的頁首與頁尾，所以利用頁面邊界0.5公分的設定強制把頁首與頁尾隱藏起來。然而，到底是要強調美觀的統一，還是要讓使用者有自己的選擇權力，這就是一個值得思考的問題了。

結語 / In closing

這篇文章討論了頁面邊界0.5公分的設定造成列印網頁時無法顯示頁首與頁尾的問題。這到底是一個刻意強制隱藏頁首與頁尾的設定，還是複製別人程式碼的無心錯誤，最後依然不得而知。

瀏覽器自動添增的頁首與頁尾，也許在網頁設計師的眼中缺乏美感。但對於紙本閱讀的使用者來說，頁首與頁尾提供的列印日期、網址能夠讓人瞭解這份資料的來源，而頁碼則是能夠用於確認現在閱讀的進度。在紙本閱讀時，頁首與頁尾提供的資訊具有不可或缺的重要性。

作為一位網頁設計師，我們的共同目標應該是讓各式各樣的使用者用自己習慣的方式接收網頁中的資訊。因此，讓閱讀網頁的使用者自行決定是否顯示頁首與頁尾，也許這也是一種站在使用者角度的設計思維。你覺得呢？

閒聊「布丁布丁吃什麼？」範本修改 / Talk about blog template modification

最後來聊聊最近修改「布丁布丁吃什麼？」範本的事情。

最近需要從Blog列印一些內容的時候，我才發現很久之前設定的列印樣式，在不知不覺的時候已經亂成一團。這個亂成一團的原因，很大部分來自於我之前為了響應式網頁設計(Responsive Web Design, RWD)而調整的版面。列印時的寬度，通常會比用瀏覽器看網頁的寬度還窄。這個結果導致了列印時很容易受到RWD的設定影響。不過實際上列印有列印的考量、RWD有RWD的規劃，兩種設計思維不宜彼此混淆。後來我將RWD在@media的設定上都加上了@media screen，這才讓列印版本跟RWD的設定有所區隔。

總之，如果最近大家打開「布丁布丁吃什麼？」的時候，發現整個網頁都壞掉的話。別驚慌，那只是我在修範本修到一半，或是修到我忘記改回去而已(?)。如果你覺得有什麼問題的話，也可以到留言板跟我反映一下喔。

那麼這次關於列印網頁時頁首與頁尾消失的討論就到這裡了。寫到最後，我有個問題想要問問大家：你都習慣用什麼方式閱讀「布丁布丁吃什麼？」呢？

• A. 手機：隨身攜帶最方便
• B. 平板：在螢幕大小和攜帶性上取得了平衡，看網頁很舒服
  
• C. 桌機或筆電：查網頁是為了完成工作，多工視窗才能滿足我的需求
• D. 印出來的列印紙本：眼睛是靈魂之窗，保護眼睛就等於保護了我的靈魂

歡迎在下面的留言處跟大家分享你的想法。你的意見都是我繼續分享的動力喔！

如果你覺得我這篇實用的話，請幫我在AddThis分享工具按讚，或是將這篇分享到Facebook等社群媒體吧！想在社群媒體追蹤我的話，歡迎到我的Facebook粉絲專頁「布丁布丁吃什麼？」按個讚喔！

不知道這篇文章有沒有讓你吃到些有用的東西呢？我是布丁，期待下次見！