ページ番号の印刷に関する多くのWebサイトを読みましたが、それでも印刷しようとするとHTMLページに表示することができませんでした。
したがって、CSSコードは次のとおりです。
@page {
margin: 10%;
@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
私はこのページルールを中に入れようとしました
@media all {
*CSS code*
}
そしてその外で、@media print
に入れようとしましたが、ページにページ番号を表示するのに何も助けませんでした。 FireFoxとChrome(ご存知のWebKitベース)を使用しようとしました。問題は私のhtmlまたはcssコードにあると思います。
この@page
ルールを複数のページを持つ大きなhtmlページに実装する例を誰かに見せてもらえますか? htmlページのコードとcssファイルのコードが必要なだけです。
PS最新バージョンのブラウザをサポートしています。
現在、ページ番号のある@pageはブラウザでは機能しないため、代替手段を探していました。
answer が投稿しましたOliver Kohll。
誰でも簡単に見つけられるように、ここに再投稿します。
この回答については、@ pageを使用しないです。これは純粋なCSSの回答ですが、FireFox 20以降のバージョンで動作します。以下は、例の link です。
CSSは次のとおりです。
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
HTMLコードは次のとおりです。
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
この方法では、パラメーターを#pageFooterに編集して、ページ番号をカスタマイズできます。私の例:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
このトリックは私にとってはうまくいきました。それがあなたを助けることを願っています。
これを試してもらえますか、content: counter(page);
を使用できます
@page {
@bottom-left {
content: counter(page) "/" counter(pages);
}
}
これはあなたが望むものです:
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
**@page {
margin-top:21% !important;
@top-left{
content: element(header);
}
@bottom-left {
content: element(footer
}
div.header {
position: running(header);
}
div.footer {
position: running(footer);
border-bottom: 2px solid black;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
<div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
<span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
</div >**