46

だから私はこのオプションを認識しています: Page numbers with CSS/HTML。

印刷版のページにページ番号を追加するには、これが断然最良の方法のように思えますが、この方法のバリエーションをどこでも動作させることはできません。Chrome、Firefox、および IE9 で Windows 7 マシンを試しました。いくつかのリンクに基づいて、これは Prince XML のようなよりプロプライエタリなソフトウェアでサポートされているようです。これは、印刷版の Web ブラウザーでサポートされていますか?

空のhtmlファイルだけを作成して、頭の中でこれを2つのスタイルタグの間に追加しようとしました:

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

content: "TEXT";また、何かを表示できるかどうかを確認するために使用するだけでも単純化しました。これはどこでもサポートされていますか? 「これ」とは、具体的にはタグ@pageと@bottom-rightタグを意味しています。これは、コンテンツを何度も機能させるためです。

4

5 に答える 5

11

@page は使用していませんが、Firefox 20 で純粋な CSS ページ番号が機能するようになりました。

http://jsfiddle.net/okohll/QnFKZ/

印刷するには、結果フレーム (右下) を右クリックし、

このフレーム -> フレームを印刷...

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>
于 2013-05-20T14:03:46.030 に答える
5

これはもう機能していないようです。短期間しか機能しなかったようで、ブラウザのサポートは削除されました!

https://developer.mozilla.org/en-US/docs/CSS/Countersによると、カウンターは使用する前にリセットする必要があります。

開始番号は何にでも設定できます。デフォルトは 0 です。

例：

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

... 理論的には。実際には、PrinceXML だけがこれをサポートしています。

于 2013-04-06T21:34:22.543 に答える
2

Mozilla 経由 (ドキュメントの印刷)

これにより、各印刷ページにヘッダーとフッターが配置されます。これは Mozilla ではうまく機能しますが、IE と Chrome ではあまりうまくいきません。

<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
  Heading for paged media
</div>
<div id="print-foot">
  Page: 
</div>
</body>
</html>

CSS:

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
    display: none;
}

/* print only */
@media print {

h1 {
   page-break-before: always;
   padding-top: 2em;
}

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
}

#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;

    font-size: 200%;
    text-align: center;
}

#print-foot {
   display: block;
   position: fixed;
   bottom: 0pt;
   right: 0pt;

  font-size: 200%;
}

#print-foot:after {
    content: counter(page);
    counter-increment: page;
}
于 2016-03-25T22:40:00.547 に答える