8

印刷モードでは、そのようなリンクをレンダリングしたいと思います:

<a href="#targetPage">link</a>

このような：

<a href="#targetPage">link (page 11)</a>

(対象ページが印刷プレビューの 11. ページにあるとします)。

プレーン CSS を使用してページ フッターにカウンターを使用してページ番号を追加することは可能ですが、これをもっと「自分のやりたい方法」で使用できますか?

ソリューションはクロスブラウザーである必要はありません (FF/Chrome で十分です)。任意の CSS/Javascript トリックが許可されます。

4

2 に答える 2

4

ブログ記事「Web ページの印刷」に書いたように、Web ページの印刷は残念な状態です。

画像や表を含まない (1 列の) テキストのみを印刷しない限り、画面の内容に少なくともある程度似た印刷物を取得することはすでに十分に困難です (ええ、ここでは誇張していますが、それほど多くはありません)。

現在、印刷に最適なブラウザは、約 10 年前から変わらず Opera です。他のすべてのブラウザは多かれ少なかれ最悪です。

CSS は大いに役立ちますが、必要な部分を実装するブラウザーはありません。Generated Content for Paged Media モジュールの Target カウンターを参照してください。これはまさに必要なことを行います。

さて、暴言を片付けた後、解決する必要があるいくつかの障害を次に示します。

既存のリンクにテストを追加し始めるとすぐに、ページ番号が変わり始めます。したがって、「blabla (page #12)」と書くと、そこに到達するとおそらく 13 ページになります。

どのページに何が入っているかを知るには、Web ページを自分でページに分割する必要があります。テキストがほとんどの場合、これはそれほど難しいことではありません: ページごとに 1 つ作成しdiv、ブラウザーが改ページを超えて印刷しないようにします (それで幸運を祈ります :-( ) 。divそれらはページに収まります...ページサイズが何であるかがわかれば。

移動の問題を回避するには、すべてのリンクに " (page #0000)" を追加して、十分なスペースを確保してください。後で短いテキストに置き換えられるため、リンクが多いページでは下部に空白が生じる場合がありますが、代替案よりはましです。

わずか6か月ほどで、そのようなものを作成（およびデバッグ）できるはずです...

これが、誰もがサーバー上で HTML や PDF 出力を生成できるレンダリング エンジンを使用する理由です。PDF では、ページ レイアウトを正確に制御できます。テキスト参照をサポートするレンダリング エンジンを見つける必要があるだけです。LaTeXをお勧めします。少し扱いに​​くいですが、仕事は完了します。

于 2012-08-28T15:36:51.393 に答える
2

これは機能しますか？

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

( CSS/HTML のページ番号から)

于 2012-08-28T15:22:57.613 に答える