2011年2月28日月曜日

HTMLウェブページ印刷のときの改ページのCSSスタイル

ウェブページ印刷改ページの制御があるなんって知らなかった。。。
今日はたまたま印刷した長い文書がきれいに改ページが付いたので、驚いた。
調べてみたら、下記のスタイルが「犯人」だ。


<div class="pb">
...
</div>

/* 改ページ用ボックス */       
.pb {  
        marign: 0px;   
        padding: 0px;  
        page-break-before: always;     
}      

.page {
        width: 600px;  
        float: left;   
        margin: 5px 0px 5px 0px;       
        padding: 0px;  
        text-align: center;    
}      

.cb {  
        clear: both;   
        margin: 0px;   
        padding: 0px;  
}      

ちなみに、ちゃんと説明するサイトがある。
http://www.tagindex.com/stylesheet/page/page_break.html
(タグインデックスさんへ、ありがとう!よくわかった!)

page-break-before  page-break-after は、印刷時の改ページ部分を制御するプロパティです。

  • page-break-before … 要素の直前の改ページを制御
  • page-break-after … 要素の直後の改ページを制御

  _____  


hr {
page-break-after: always;
}


  _____  

プロパティ名          説明   
page-break-before
(直前)       

auto    制御しない (初期値)  
always  直前で改ページさせる   
avoid   直前の改ページを禁止する       
page-break-after
(直後)       

auto    制御しない (初期値)  
always  直後で改ページさせる   
avoid   直後の改ページを禁止する       

avoid の指定は、Opera以外では対応していないようです。


0 件のコメント:

コメントを投稿