發布日期：2024 年 10 月 30 日
從 Chrome 131 開始，您可以使用 CSS 在列印頁面時，為頁面邊界新增內容。本文會介紹分頁媒體的頁面模型，以及如何使用這項功能來提高網頁的列印輸出。
CSS 包含處理分頁式媒體的規格、CSS 分頁式媒體模組和 CSS 產生的分頁式媒體內容。可定義列印頁面 (包括 PDF) 只能使用的功能。有支援此 CSS 的使用者代理程式，可讓您使用 HTML 和 CSS 產生書籍和其他平面媒體。不過，雖然我們經常需要透過應用程式列印或建立 PDF，但網頁瀏覽器從未提供良好的支援。
Chrome 和 Firefox 支援 @page at-rule。您可以使用這項規則定義要列印的頁面大小，以及內容周圍的邊界大小。從 Chrome 131 開始，您也可以在規則中指定相關邊界，使用生成的內容將內容新增至邊界。
網頁模型
分頁式媒體中使用的頁面模型會定義頁面框格，也就是一張紙張。頁面框內包含頁面邊界、頁面邊框、頁面邊框間距，以及最後顯示內容的頁面區域。當內容要列印時，系統會將內容分割成多個頁面，以便列印。
接著，頁面邊界會分割成 16 個方塊，每個方塊都有對應的規則。
@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 的 Flexbox 版面配置中的方塊相似，因此會延伸至填滿空間，但如果您在其中一個方塊中放入長字串，而其他方塊中沒有任何內容，則含有文字的方塊會延伸，而不會將文字換行。
在邊界方塊中新增內容
如要將內容新增至邊界框，請使用 CSS 產生的內容，就像使用 ::before 和 ::after 疑似元素一樣。在這種情況下，請使用與要指定的方塊相關的 at-rule。下列 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;
}