web-dev-qa-db-ja.com

CSSページ番号のブラウザサポート

したがって、私はこのオプションを知っています： 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タグ、私はコンテンツを何度も動作させるようになったからです。

cssprintingcross-browsercss-paged-media
38
David Fritsch

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

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のみがこれをサポートしています。

3
John Biddle

このウィキペディアのページによると、ページメディアも実装しようとしていますが、まだマージンボックスのブラウザサポートはないことがわかりました。それがうまくいかないのも不思議ではありません！

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_（Cascading_Style_Sheets）

表の「文法と規則」のマージンボックスのセクションを参照してください。余白ボックスは、ページ番号付けとヘッダーとフッターの実行に必要なものです。これを実装すると、印刷されたメディアをPDFに変換するオーバーヘッドが節約されます。

16
Jimbo

@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>
9
Oliver Kohll

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;
}
2
user6115916