問題タブ [css-paged-media]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
553 参照

html - 印刷されるページごとに最後の要素のスタイルを変える

要素のリストがあります(任意の長さ)。ただし、ユーザーが印刷するときに、すべてのページの最後の要素のスタイルを変更したいと考えています。

これまでのところ、使用してみ@page {.el:last-child...}ましたが、何もしません。を使用するとel:last-child、最後のページの最後の子にのみスタイリングが適用されます。

どんな助けでも大歓迎です。

私は次のHTMLを持っています:

0 投票する
1 に答える
45 参照

css - ページ メディア要素のスタイルを設定する方法

Googleも@Pageのドキュメントこのリンクも、これに関する情報はありません。

html から生成した pdf のページの右側にあるフッターにページ番号を表示する次のコードがあります。

これはうまく印刷されPage A of Xます。A と X のスタイルを設定するにはどうすればよいですか?

0 投票する
1 に答える
838 参照

css - 数ページ後に CSS 実行要素カウンター スタイルを変更する

FlyingSaucer を使用して、実行中のヘッダーにページ番号を持つ PDF ドキュメントを生成しています。私が達成しようとしているのは、ヘッダーに使用される実行中の要素に適用されるカウンターのスタイルを変更できるようにすることです。

FlyingSaucer で CSS を適用しているため、javascript を使用できません。

html の例:

CSS:

この css は、ドキュメント全体にヘッダーを正しく適用します。

配置されます。

上記のページ スタイル ( lower-roman ) を使用してドキュメントを開始しようとしています。ドキュメント内の特定の場所の後で、right-header のコンテンツを変更するか、残りの @page コンテンツを別の実行要素に置き換えたいとします。スタイリングが 10 進数に設定されたドキュメント。

FlyingSaucer が CSS3 のサポートを制限していることは知っていますが、そのような問題の解決策 (FlyingSaucer だけに限らない) を見つけることができません。

FlyingSaucer では css ルールを使用してドキュメントの任意の時点でカウンターをリセットできるため、実行中のヘッダーの内容は以前のヘッダーに影響を与えずに変更できます。

そして変化はその時点以降にのみ目に見えます。

したがって、私の現在のステータスは、小文字のi-iv(タイトルページ、目次など)で番号が付けられたページがあり、その後iにリセットしてドキュメントの最後までインクリメントすることです。私がする必要があるのは、変更することだけです

または、表示されている実行中の要素を新しいものに切り替えます。

この問題を解決する別の可能性を追加する、私が試した別の解決策:

 

このコードでは、解決策は #forcontent を有効にし、#content の先頭で #before を無効にすることだと思います。~ セレクターを使用してみましたが、前の要素を変更することはできません。

これをどのように達成できるか、または私が試すことができるさまざまなソリューションを教えてくれる人はいますか?

0 投票する
1 に答える
54 参照

css-paged-media - 負のインデントが機能しませんか?

CSS Paged Media を使用して PDF を作成しています。ほとんどのコンテンツは通常どおりに配置されていますが、負のインデントを付けたい段落がいくつかあります。これらの段落は、他のすべてのものの左 2.5 mm から開始する必要があります。

これはこれまでの私のCSSです:

これは意図した効果です:

ここに画像の説明を入力

アンテナハウス(6.5)で上記を試してみると、赤い背景のブロックの左端が「このサービスマニュアル...」というテキストの左端と並んだままです。

そのtext-indent: -2.5mm;ため、期待どおりに機能していないようです。望む効果を得るにはどうすればよいですか?