問題タブ [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 投票する
1 に答える
553 参照

css - ページ化されたメディア出力の連続するページでテーブルをスタイルする方法は?

次のようなhtmlテーブルがあります。

上記の tbody はすべて同じ構造であることに注意してください。最初の tr.row-to-style 行を他の行とは異なるスタイルにしたいと考えています。各 tbody には tr.row-to-style がありますが、ページの最初の行にのみ影響を与えたいと思います。出力はページ化されたメディア、具体的には xhtml ソース ファイルから PrinceXML で生成された pdf ファイルです。これは、高度な css セレクターを使用できること、クロスブラウザー互換性が不要であること、および JavaScript を使用できないことを意味します。

出力の最初のページでターゲット行のスタイルを設定するのは簡単です。使うことができます:

また、ページに収まる tbody の数がわかっている場合は、次のようなことができます。

しかし、ページに収まる tbody の数がわからない場合、どうすれば最初の tbody をターゲットにできますか?

出力では、実質的に、ページごとに thead セクションと tfoot セクションが繰り返されます。テーブルは、これを利用するために特別にこのように設計されました。tbody の後に改ページを許可します。出力には複数のページが含まれる場合があります。

したがって、出力には、各ページに一種の疑似スレッドと疑似フットがあります。しかし、ページの最初の tbody をマークするためにそのようなものを使用する方法がわかりません。何か案は?ありがとう...

0 投票する
3 に答える
1803 参照

html - (HTML +ページメディア用のCCS3生成コンテンツ)をPDFに?

ページメディア用のCSS3生成コンテンツでスタイル設定されたHTMLドキュメントからPDFをレンダリングする方法はありますか?

そのようなアプリケーションがない場合、そのようなコンバーターを構築するためのベースとして何を使用できますか?

ありがとう

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

html - HTML ページネーションと「ページ化されたメディア」

CSS「ページ化されたメディア」機能を使用して、ページ付けされたコンテンツ (水平/垂直に分割されたページを表示) を作成する方法はありますか?

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

css - ターゲットカウンターのカウンターをセットアップする方法

ページ付きメディアでは、CSS プロパティtarget-countersを使用して複数のカウンターを含めることができます。仕様では、次の例 (簡略化) が示されています。

のようなものが出力されるはずです(see section 1.3.5)

sectionカウンターの設置方法は?

0 投票する
8 に答える
96454 参照

javascript - wkhtmltopdfを使用してヘッダー/フッターHTMLでページ番号を付ける方法は?

私は電子請求システムを開発しています。私たちの機能の1つは、請求書のPDFを生成し、それらを郵送することです。請求書には複数のテンプレートがあり、後で作成する予定なので、HTMLテンプレートを使用して、HTMLドキュメントを生成し、それをPDFに変換することにしました。しかし、wkhtmltopdfで問題に直面しています。私が知る限り(解決策を見つけるために何日もGoogleを使用しています)、単純にHTMLをヘッダー/フッターとして使用し、ページ番号を表示することはできません。

バグレポート(またはそのようなもの)(http://code.google.com/p/wkhtmltopdf/issues/detail?id=140)で私はJavaScriptでこのコンボが達成可能であることを読みました。しかし、それを行う方法に関する他の情報は、このページや他の場所で見つけることができません。

もちろん、JavaScriptを強制的に使用することはそれほど重要ではありません。wkhtmltopdfでCSSの魔法が機能する場合は、他のハックなソリューションと同じように素晴らしいでしょう。

ありがとう!

0 投票する
0 に答える
747 参照

html - 印刷ページの余白がクロムで機能しない、つまり

ヘッダーとフッターを書き込むために、印刷ページに margin-top と bottom を設定したいと考えています。

私はFirefoxでそれをしました。ただし、Chrome と Internet Explorer では機能しません。

コードを使用する@pageと、クロムで動作します。しかし、ヘッダーを上に、フッターを下に書くことはできません。どうすればこの問題を解決できますか?

これが私のコードです

ページネーション.php

ページネーション.css

IE スクリーンショット:

ここに画像の説明を入力

Firefox のスクリーンショット:

ここに画像の説明を入力

Chrome のスクリーンショット:

ここに画像の説明を入力

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

css - Paged Media @page:nth セレクター

http://www.w3.org/TR/css3-page/によると、 @page:first セレクターがあります。しかし、特定のページに異なるフッターやヘッダーを定義したい場合はどうすればよいでしょうか?

0 投票する
3 に答える
90299 参照

pdf - 印刷用の CSS を使用したページ ヘッダーとフッターの作成

Flying Saucer (CSS/HTML を iText に PDF にダンプする) を使用して PDF を作成しており、CSS3 を使用して各ページに画像ヘッダーとフッターを適用しようとしています。

基本的に、この div を各ページの左上に配置したいと思います。

私のCSSは次のようになります。

この div を に入れる方法はありcontentますか?

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

css - 改ページのドキュメント フローを変更してスペースを埋める

印刷するとき (または、一般に、ページ付きメディアにドキュメントを表示するとき)、ドキュメント要素をリフローして、一部の要素 (画像など) が実際のページの使用可能なスペースに収まらないために次のページに移動するようにすることは可能ですか?それに続く要素は、実際のページの残りのスペースに移動されますか?

LaTeX Floatsに似た (または同じ) 効果を達成しようとしていますが、CSS のみを使用しています。

それを説明するために、次のような状況があるとしましょう:

いくつかの基本的な CSS (この質問を参照) を使用すると、これを達成するのに問題はありません。

しかし、私が本当に必要としているのは、次のようなものです。

したがって、基本的には、実際のページに残っているすべての残りのスペースを次の要素で埋めたいだけですimage A(もちろん、それらが収まる場合のみ)。

私はいくつかの CSS3 調査を行っており、Office エディターを CSS スタイリングに完全に置き換えることができるかどうかを確認したいので、ソリューションをまだサポートする必要はありません (つまり、現時点でいくつかのブラウザーに実装されています)。私が知りたいのは、それが CSS モジュールまたはコンストラクトでカバーされているかどうかだけです (たとえそれが作業中のドラフトであっても) ので、ブラウザーは将来的にそれをサポートすると推測できます。

私はすでにこれを検索しました

  • CSS3 ページ付きメディア,
  • CSS3 リージョン
  • ページ付きメディア用の CSS3 生成コンテンツ

仕様と何も見つかりませんでしたが、単に何かを見落とした (またはまったく理解していなかった) 可能性がまだあるので、2 日間のグーグル検索の後、ここで質問する時が来たと思います :-)


編集:もう一度明確にするために:私は今、どのブラウザでもソリューションをサポートする必要はありません 。これを許可する標準または仕様があるかどうかを知る必要があります(そうであれば、その方法)。

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

c# - CSS@Pageを使用した印刷ページのレンダリングサイズ

こんにちは、見てくれてありがとう!

バックグラウンド

HTMLのページをPDFに印刷するRotativaPDFを使用して複数ページのレポートを印刷しています。これを行うには、CSS2.1以降の@page規則に従う必要があります。

私のアプリケーションはC#、MVC3にあります。

問題/質問:

@page宣言で8.5inx11inを指定しても、印刷されたPDF内のページは8.5X11シートの約75%にしか拡大縮小されません。ページ全体をカバーする背景画像があるので、これを知っていますが、PDFに印刷されるのはページ全体の約75%にすぎません。コンテンツも縮小されるため、8.5X11フレーム全体を適切にキャンバス化するのではなく、すべてが比例して正しくなります。

CSSで次のようにレポートの表紙を設定しています。

そしてHTML:

私が間違っているかもしれない何か考えはありますか?前もって感謝します。