天天看點

css @page規則控制列印設定選項

關于css控制列印更多内容可以參閱css控制列印内容的樣式一章節。

使用@page規則可以對列印進行更多的設定,比如指定頁面的尺寸。頁邊 距,頁眉頁腳等,以求達到更好的效果。

下面做一下簡單介紹。

一.紙張大小設定:

@page {

size: 5.5in 8.5in;

}      

設定紙張大小,5.5英寸寬,8.5英寸高。

<pre style="overflow-wrap: break-word; margin: 0px; padding: 0px;">

@page {

size: A4;

}      

通過别名控制紙張大小,如"A4"或“legal.”

@page {

size: A4 landscape;

}      

可以控制列印方向,portrait: 縱向列印地, landscape: 橫向。

二.page模型:

在分頁媒體格式模型中,文檔被轉移到一個或多個頁面框。

該頁框是映射到一個矩形平面。

這大緻類似于css盒子模型:

css @page規則控制列印設定選項

特别說明:目前浏覽器支援度還不夠。

@page { width: 50em; }      

三.page邊距模型:

在進一步讨論之前,我們應該了解的頁面的盒子模型,因為它的行為跟如何在螢幕上的工作有些不同。頁面模型定義了頁面區域,然後劃分了16個周邊緣盒。可以控制頁區域的大小和頁區域的邊緣和頁面本身的端部之間的餘量的尺寸。

css @page規則控制列印設定選項

左右頁邊距:

@page :left {

margin-left: 30cm;

}

@page :right {

margin-left: 4cm;

}      

下面的css将在底部左邊顯示标題,在右下角的網頁計數器,并在右上角顯示一章的标題。

@page:right{ 

@bottom-left {

margin: 10pt 0 30pt 0;

border-top: .25pt solid #666;

content: "Our Cats";

font-size: 9pt;

color: #333;

}

@bottom-right { 

margin: 10pt 0 30pt 0;

border-top: .25pt solid #666;

content: counter(page);

font-size: 9pt;

}

@top-right {

content: string(doctitle);

margin: 30pt 0 10pt 0;

font-size: 9pt;

color: #333;

}

}