問題タブ [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 に答える
706 参照

css-paged-media - ネストされた生成コン​​テンツを含むヘッダーの実行

ページメディアについての質問です。文字列セットと実行中の要素を混在させたい。PrinceXML では機能しますが、PDFReactor では機能しません。私の質問、これは PDFReactor で可能ですか?

HTML

CSS

これまでのところ、すべてが桃です。しかし、H1 から文字列セットを定義しようとして、これを span.last に書き込もうとすると、これは機能しません。

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

html - 孤立した CSS: 下部ページのヘッダー (h1、h2...) を回避するにはどうすればよいですか?

ヘッダー (h1、h2、h3...) と段落を含む大きな HTML ドキュメントがあります。ドキュメントを印刷するときに、ドキュメントの下部にあるヘッダーが自動的に次のページに移動するようにします。

ここに画像の説明を入力

どのようにできるのか?段落で「orphans: 3」CSS を使用し、「p」タグで動作しますが、h1 または h2 では動作しません。

アクションの完全な例:

  • 1-2 ページ: 孤立した段落は正常に動作します。
  • 2-3 ページ: ヘッダーが機能しません。

要件:

  • HTML にはメインの div コンテナが 1 つあります。
  • HTML を変更しないでください
  • ブラウザーのサポートは重要ではありません (私の特定の仕事では)。
  • CSS のトリックが必要です (できれば JS や Jquery は必要ありません)。
  • page-break-before:always は使用できません。ヘッダーがページの下部に表示されたときにのみ次のページに移動するようにするためです。
0 投票する
1 に答える
38 参照

css - 元の文字列セットのフォーマットを失うことなく文字列を再利用する

string-set を使用してチャプター タイトルの文字列を設定しています。

h1コンテンツを追加してドキュメントでその文字列を再利用するとき、 ( )の元の書式を維持したいと考えていfont-weight:boldます。

どうやってやるの?コンテンツの残りの部分 (「マイ ドキュメント タイトル」) を太字にしてはならないため、コンテンツのスタイルを設定することはできません。

現在、ヘッダーの一部として文字列を使用しています。

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

css-paged-media - PDFreactorでドキュメントセクションのnth()ページを選択するには?

HTMLとCSSからPDFを生成するPDFreactorを評価しています。

しかし、問題が発生しました。ドキュメント セクションの 1 ページ目と 2 ページ目と 3 ページ目でページの背景画像を別々に設定する必要があります。可能と思われる唯一の方法 ( PDFreactor マニュアルを参照) は、ドキュメント セクションに関連する番号ではなく、固定のドキュメント ページ番号を明示的に指定することです。

Paged Media Module の CSS 生成コンテンツ は、この表記法を使用することを提案しています。

CSS:

HTML:

しかし、まったく機能しません。解析エラーがスローされます。

ところで、-ro-nth はエラーをスローしませんが、それでも機能しません。

このコードは、セクションのすべての左側のページにそれを配置します (したがって、名前付きページセレクターが基本レベルで機能することを証明します) が、私が望むものではありません。

これは機能しますが、ページ番号をハードコーディングする必要があることを意味します。やりたいことじゃない…

これにより、セクションの 1 ページではなく、ドキュメントの 1 ページに配置されます。

これは、Prince XML で私が望むことを行います。

誰にも役立つ提案はありますか?ありがとう。

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

html - 次の行にオーバーフローする CSS 3 列レイアウト

次の行にオーバーフローする固定高さの 3 列のレイアウト (column-count: 3; を使用) を持つことは何とか可能ですか? 基本的に HTML のページ メディア。

1 つの行から 3 つの固定高さの列の次の行へのテキストのオーバーフロー

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

html - A4ページにhtmlを印刷、メディアが機能しない

HTMLページをA4サイズで印刷する必要があり、さらにコンテンツ本文をcss、htmlとともに印刷し、メニューリスト、ヘッダー、フッター、およびページ右側のメニューリストを無視したい.

これを開始するには、単純な div とクラス noprint を導入し、これを @media print に追加しましたが、機能していないようです。noprint クラスは @media プリントの外で動作するので、正しいことがわかります。

また、私の要件は、標準の Ctrl+P キーボード オプションを使用してブラウザから直接印刷することです。

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

css - CSS ページ メディア、次のページへの div 改ページ

あなたの助けが必要です、

Internet Explorer 11 で印刷プレビューを実行すると、div (下の境界線) が次のページに分割される理由がわかりません。

いずれにせよ、適切に、または別の方法で行うことができれば、理想的には、ページの周りに 1 ピクセルの境界線 (レターサイズ、8.5 インチ x 11.0 インチ) をいくつかの余白を付けて配置したいと考えています。

ここに画像の説明を入力 ここに画像の説明を入力

問題の HTML および CSS マークアップは次のとおりです。

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

css - cups xhtmltopdf フィルタは印刷メディア css のどの部分を尊重しますか?

印刷ドキュメントに html を使用しようとしています。すべての印刷ページに表示したいヘッダーがあり、次のコードを使用しています。

これを Chrome の印刷ダイアログでプレビューすると、ほぼ意図したとおりに表示されます。Chrome の印刷ダイアログから印刷した場合も正しく表示されます (少なくとも私の眼球では、プレビューと同じです)。

これを CUPS の xhtmltopdf フィルター (印刷をシミュ​​レートするため) で実行すると、いくつかの欠陥が表示されます。

ヘッダーは最初のページでは正しく見えますが、Chrome の印刷ダイアログのように後続のページには表示されません。これは、メディア プリント セレクターからいくつかのものをスタイリングしていることを証明しています。そうでなければ、単純な入力が表示されます。これはメディア プリント セレクタに問題があるのでしょうか、それとも位置固定と関係がありますか?

2 番目の問題は、他の要素 (クラス "問題") が、Chrome の印刷ダイアログよりも xhtmltopdf からはるかに大きくレンダリングされることです。

Chrome から から xhtmltopdf

これも css の問題ですか、それとも CUPS 特有のものですか? 私はこれについてはちょっと無知ですが、何年も前から、一部のブラウザーには、少なくとも互換モードのときに、要素のデフォルトのスタイルがあったことを覚えているようです。xhtmltopdf が見落としている Chrome がこれに適用するスタイルはありますか? 何か他のことが起こっていますか?

これが役立つかどうかはわかりませんが、カップフィルターからの出力を含めています: