CSS を使用して Web サイトの印刷出力にページ番号を追加するにはどうすればよいですか?

CSS/HTML を使用したページ番号の印刷

Web サイトを印刷する場合、ページ番号を含むページ ヘッダーとフッターを追加すると、文書の読みやすさが向上します。そして組織。これを実現するために、CSS は印刷出力のカスタマイズを可能にする強力なソリューションを提供します。

ページ ヘッダーとフッターを追加するには、@page ルールと @bottom-right プロパティを使用できます。たとえば、次の CSS 宣言は、印刷される各ページの右下隅にページ番号を追加します。

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

この宣言では、

• counter(page) は現在のページを表します。ページ番号。
• counter(pages) は総ページ数を表します。

を組み合わせることで、これらのカウンターを使用して content プロパティを使用すると、総ページ数から現在のページ番号を動的に表示できます。

ブラウザ サポート

@page ルールでは、ブラウザのサポートが異なります。その特性について。 Chrome や Firefox などのブラウザは、ページ番号として @bottom-right を完全にサポートしています。 Internet Explorer では、この機能を実装するには shim が必要です。特定の情報については、最新のブラウザ サポート ドキュメントを確認することをお勧めします。

詳細情報

詳細情報と例については、次のリソースを参照してください。

• W3C CSS ページ モジュール: http://www.w3.org/TR/css3-page/
• CSS ページ プロパティを使用してページ番号を追加する: http://www.intelligrape.com/blog/2010/08/20/add- page-number-using-page-property-of-css/
• Prince XML のページ番号: http://www.princexml.com/doc/6.0/page-numbers/

以上がCSS を使用して Web サイトの印刷出力にページ番号を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。