發布日期：2024 年 10 月 30 日
從 Chrome 131 開始，您可以使用 CSS 在列印網頁時，將內容新增至頁面邊界。這篇文章說明分頁媒體的頁面模型，以及如何使用這項功能改善網頁的列印輸出內容。
CSS 包含處理分頁媒體的規格，即 CSS 分頁媒體模組和 CSS 分頁媒體產生的內容。這些規則會定義僅在列印網頁 (包括列印為 PDF) 時使用的功能。有些使用者代理程式支援這項 CSS，可讓您從 HTML 和 CSS 產生書籍和其他印刷品。不過，儘管我們經常需要從應用程式列印或建立 PDF，網頁瀏覽器卻從未妥善支援這項功能。
Chrome 和 Firefox 支援 @page at 規則。這項規則可讓您定義要列印的頁面大小，以及內容周圍的邊界大小。從 Chrome 131 開始，您也可以使用產生的內容，指定相關的邊界 at 規則，將內容新增至邊界。
頁面模型
分頁媒體中使用的頁面模型會定義「頁面方塊」，也就是紙張。頁面方塊內有頁面邊界、頁面框線、頁面邊框間距，以及最後的頁面區域，也就是顯示內容的位置。列印內容時，系統會視需要將內容分成多個頁面。
頁面邊界隨後會分割成 16 個方塊，每個方塊都有對應的 at 規則。
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
邊界方塊大小
頂端和底部方塊的高度，以及左側和右側方塊的寬度，是由使用 @page 設定的邊界大小定義。因此，角落方塊的大小是由這些邊界交集所建立的固定大小。不過，每個角落之間的三個方塊可彈性調整。這些項目與使用 flex: auto 的彈性版面配置中的方塊行為類似，因此會延展以填滿空間，但如果您在其中一個項目中放入長字串，其他項目則沒有任何內容，則含有文字的項目會擴大，而不是換行。
在邊界方塊中新增內容
如要將內容新增至邊界方塊，請使用 CSS 產生的內容，就像使用 ::before 和 ::after 虛擬元素一樣。在這種情況下，請使用與要指定方塊相關的 at 規則。下列 CSS 會在左下邊界方塊或右側頁面中新增「My book」文字。並設定文字樣式。
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
除了文字字串，您也可以在邊界加入頁碼計數器。預先定義的 page 計數器包含目前頁面。下列 CSS 會將其新增至右側頁面的右下角，以及左側頁面的左下角。
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
此外，還有一個 pages 計數器，一律會顯示總頁數。
使用頁面邊界時的注意事項
如果是從瀏覽器列印，瀏覽器會自動新增一些頁面邊界內容 (如有空間可顯示)。即使您已新增內容，系統也會這麼做。您可以在列印對話方塊中關閉自動產生的頁首和頁尾。
如果將頁面邊界設為 0，或設為太小的值，導致瀏覽器標題和頁尾沒有空間，系統就不會顯示這些元素。
由於 Chromium 的預設頁面版面配置概念，如果列印文件第一頁沒有空間容納自動內容，瀏覽器內容就不會顯示在後續頁面上，即使後續頁面有空間也一樣。
分頁媒體的未來可能性
分頁媒體規格包含其他幾項功能，詳情請參閱「使用 CSS 設計列印格式」一文。如果您有下列任一功能的使用案例，請將其新增至連結的錯誤。
設定字串
書籍通常會在頁邊印出當前章節的標題。這個標題無法硬式編碼至 CSS，因為標題會隨著你在書中移動而變更。string-set 屬性可讓您從 HTML 設定值，然後在產生的內容中使用。下列 CSS 假設章節標題標記為 <h1>。這項功能會擷取每個 <h1> 的內容，並用於右側頁面的右上邊界。當系統到達下一個 <h1> 時，系統會更新該點之後的邊界值。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set 和 string() 的 Chromium 錯誤。
交叉參照資料
文件列印後，通常會使用參考資料所在的頁碼，標示其他頁面的參考資料。這些交互參照可使用 target-counter 建立。套用至連結後，連結會跳至網頁上的參照，列印時則會顯示頁碼。
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
註腳
註腳也是分頁媒體規格的一項功能。在 HTML 中，使用類別識別應為註腳的文字，例如：
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
然後使用 float 的 footnote 值，將這段文字轉換為註腳。文件列印時，系統會將其從段落中移除，並顯示為註腳。
.fn {
float: footnote;
}