印刷可能なhtmlページ分割。 CSS3を使用して印刷するためのページ分割。最適化されていないページの印刷について

ページブロックは、コンテンツを含むページ領域と、ページ領域を囲むマージン領域で構成されます。 @pageルールは、ドキュメントを印刷するときにいくつかのcssプロパティを変更するために使用されます。要素の余白のみを変更でき、指定した場所にページ分割を設定することもできます。

@page（マージン：2インチ;）

@pageルール内で、margin-top、margin-right、margin-bottom、margin-leftなどの個々のドキュメントの余白を定義できます。

2.ページ分割

page-break-before、page-break-after、およびpage-break-insideプロパティを使用して、ページ分割を制御できます。これらのプロパティは、positionプロパティがrelativeまたはstaticに設定されているブロック要素に適用されます。

ページ分割前
値：
自動
いつも	要素の前に常にページ分割を追加します。
避ける	可能であれば、要素の前のブレークの配置をキャンセルします。
左	次のページが左側のページとしてフォーマットされるように、要素の前に1つまたは2つのページ分割を追加します。要素は、左側のページの上部から印刷されます。背表紙の左側のページ。両面印刷の場合、用紙の裏面に出力されます。
右	要素の前に1つまたは2つのページ分割を追加します。要素は、右の境界線の上部から印刷されます。次のページは正しいページとしてフォーマットされます。
継承

構文：

@media print（h1（page-break-before：always;））

ページ分割後
値：
自動	デフォルトでは、自動ページ分割が設定されています。
いつも	要素の後に常にページ分割を追加します。
避ける	可能であれば、要素の後にブレークを追加することをキャンセルします。
左	次のページが左側のページとしてフォーマットされるように、要素の後に1つまたは2つのページ分割を追加します。要素は、左側のページの上部から印刷されます。背表紙の左側のページ。両面印刷の場合、用紙の裏面に出力されます。
右	次のページが正しいページとしてフォーマットされるように、要素の後に1つまたは2つのページ分割を追加します。要素は、右の境界線の上部から印刷されます。
継承	親要素からこのプロパティを継承します。

構文：

@media print（footer（page-break-after：always;））

page-break-insideプロパティは、ページが要素内で分割できるかどうかをブラウザに通知します。ただし、要素がページよりも長い場合は、中断が避けられません。

大きなHTMLテーブルを印刷するときのページ分割の処理方法（8）

多くの行を含むHTMLテーブルを印刷する必要があるプロジェクトがあります。

私の問題は、テーブルが複数のページにまたがって印刷される方法です。半分がページの端にあり、残りが次のページの上部に印刷されるため、行が半分にカットされて判読できなくなることがあります。

私が考えることができる唯一のもっともらしい解決策は、テーブルの代わりに複雑なDIVを使用し、必要に応じてページ分割を強制することです...しかし、すべての変更を行う前に、私は以前にここで尋ねるかもしれません。

次のCSSプロパティを使用します。

ページ分割後ページ分割前

例えば：

....

ここでの答えはどれもChromeではうまくいきませんでした。 GitHubのAAverinは、このためにいくつかの便利なJavascriptを作成し、それは私のために機能しました：

コードにjsを追加し、splitForPrintクラスをテーブルに追加するだけで、テーブルが複数のページにきちんと分割され、各ページにテーブルヘッダーが追加されます。

注：ページ分割を使用する場合：常にタグに対して、テーブルの最後のビットの後にページ分割が作成され、毎回完全に空白のページが作成されます。これを修正するには、page-break-after：autoに変更します。正しく壊れ、余分な空白ページは作成されません。

....

受け入れられた答えは、すべてのブラウザーで機能するわけではありませんでしたが、cssが実際に機能した後は次のようになります。

Tr（display：table-row-group; page-break-inside：avoid; page-break-after：auto;）

html構造は次のとおりです。

...

私の場合、thead trにはいくつかの追加の問題がありましたが、これにより、テーブルの行を保持するという元の問題が解決されました。

ヘッダーの問題が原因で、最終的に次のようになりました。

#theTable td *（page-break-inside：avoid;）

これはランクの崩壊を止めませんでした。各セルの内容のみ。

私は@vicenteherreraのアプローチに行き着き、いくつかの調整を加えました（おそらくブートストラップ3です）。

基本的; trsまたはtdsはブロックレベルの要素ではないため、これらを壊すことはできません。したがって、それぞれにdivを配置し、ページ分割*ルールをdivに適用します。次に、これらの各divの上部にパディングを追加して、スタイリングのアーティファクトを補正します。

導入されていたジッターの一部を補正するために、微調整とパディングの調整が必要でした（ブートストラップからだと思います）。この質問に対する他の回答から新しい解決策を提示しているかどうかはわかりませんが、誰かを助けるかもしれません。

私は最近、この問題を素晴らしい解決策で解決しました。

PreventBreak（border：2px solid; page-break-inside：avoid;）

Function Print（）（$（ "。TableToPrinttd、.tableToPrint th"）。Each（function（）（$（this）.css（ "width"、$（this）.width（）+ "px"））） ; $（ "。tableToPrinttr"）。wrap（ "

"）; window.print（）;）

チャームのように機能します！

私は多くのソリューションをテストしましたが、どれもうまくいきませんでした。

だから私は少しトリックを試しました、そしてそれはうまくいきます：

スタイルのある足：位置：固定; 下：0px; 位置：固定; 下：0px; 最後のページの下部に収まりますが、フッターが高すぎると、テーブルの内容と重複します。

tfootのみ：display：table-footer-group; 重ならないが、最後のページの下部にはない..。

2つの足を入れましょう：

TFOOT.placer（表示：table-footer-group;高さ：130px;）TFOOT.contenter（表示：table-footer-group;位置：固定;下部：0px;高さ：130px;）ここにあなたの長いテキストまたは高い画像

1つはバック以外のページにスペースを予約し、もう1つは個人のフッターにスペースを予約します。

テスト

見出し
ノート
NS
NS
NS

私たちはすべてに簡単にアクセスできるデジタル時代に生きていますが、紙から長いテキストを読むことを好む人はまだたくさんいます。一部のユーザーがサイトからテキストを印刷して、コンピューターの外部で読むことができるようにする可能性があります。

印刷に適したコンテンツをレンダリングする機能は、長い間存在していました。これは、次のようにスタイルシートの@mediaルールを使用して実行できます。

@media print（ / *スタイルルール* / }

Webページのコンテンツをスタイル設定して印刷可能にするためのプロパティがいくつかあります。1つはページ分割です。

それは何をするためのものか？

Microsoft WordやPagesなどのテキストエディタを使用したことがある場合は、次のページでテキストを折り返すことができるページ分割メニューに精通している必要があります。

このモジュールは同じことを行い、Webページのコンテンツをページごとにラップする方法を制御できます。

ページ分割の使用

例として、印刷するデモページを作成しました。以下に示すように、転送に問題があることがわかりました。

見出しと孤立した行が次のページから始まると、見栄えが良くなります。

これを行うには、page-break-afterプロパティを使用し、常に次の要素を次のページに移動するように設定します。

ページ分割（ページ分割後：常に;）

次に、要素間にクラスを含む新しい要素を作成するか、この方法でクラスを前の要素に割り当てることができます。

とともに 消しゴム 機能として、写真の合成写真を撮り、それをすべてまとめて、余分なものを使わずに背景を取得できます。

一緒に旅行する電話

S翻訳者 あなたの旅行のための素晴らしいツールになるでしょう...

これで、見出しと下部のオリフィスが次のページから始まります。

上下のぶら下がり線

テキストが多い場合、上記の方法は面倒な場合があります。そのため、コンテンツを強制的に次のページに移動するのではなく、上部と下部の孤立の最小しきい値を設定することをお勧めします。

活版印刷の練習では、上下のぶら下がっている線は、別のページの段落の残りの部分から引き裂かれているように見える残りの単語と短い線を指します。

プロパティorphans（下の孤児）と未亡人（上の孤児）を使用して、最小しきい値を設定できます。以下の例では、ページ分割が発生する段落の下部または先頭に少なくとも3行が残るように指定しています。

P（孤児：3;未亡人：3;）

追加のソース

サイトのテキストに印刷可能なページ分割を使用する基本について説明しました。コンテンツが画面と紙の両方で見栄えがするように、サイトが印刷するスタイルについて考えるきっかけになることを願っています。

翻訳-義務

ページ分割

次のセクションでは、CSS2で使用されるページフォーマットモデルについて説明します。 5つの異なるプロパティを使用して、ページを分割できる場所または分割する必要がある場所と、コンテンツを表示し続ける必要があるページ（左または右）をユーザーエージェントに指示します。各ページ分割により、現在のページボックスのコンテンツの表示が中断され、ドキュメントツリーの残りの部分が新しいページボックスに表示されます。

要素の前後で分割：「page-break-before」、「page-break-after」、「page-break-inside」

「ページ分割前」

初期値：自動
継承：いいえ
パーセンテージ割り当て：N / A

「ページ分割後」

値：自動| 常に| 避ける| 左| 右| 遺伝性の
初期値：自動
範囲：構造レベルの要素
継承：いいえ
パーセンテージ割り当て：N / A
デバイス：視覚的なフォーマット、ページ付け

「ページ分割-内部」

値：避ける| 自動| 遺伝性の
初期値：自動
範囲：構造レベルの要素
継承：はい
パーセンテージ割り当て：N / A
デバイス：視覚的なフォーマット、ページ付け

これらのプロパティの値には、次の意味があります：

自動

生成されたブロックの前（後または内部）でページ分割を開始または禁止しません。

いつも

生成されたブロックの前（後）に常にページ分割を開始します。

避ける

生成されたブロックの前（後または内部）のページ分割をキャンセルします。

左

生成されたブロックの前（後）に1つまたは2つのページ分割を開始して、次のページが左側のページとしてフォーマットされるようにします。

右

次のページが正しいページとしてフォーマットされるように、生成されたブロックの前（後）に1つまたは2つのページ分割を開始します。

ページ分割の潜在的な場所は、親要素の「page-break-inside」プロパティ、前の要素の「page-break-after」プロパティ、および「page-break-before」プロパティによって決定されます。後続の要素。これらのプロパティの値が「auto」以外の場合、「always」、「left」、および「right」の値が「avoid」の値よりも優先されます。許容可能なページ分割に関するセクションでは、これらのプロパティを使用してページ分割を開始または禁止するための明確なルールを提供します。

名前付きページの使用：「ページ」

"ページ"

意味：<идентификатор>| 自動
初期値：自動
範囲：構造レベルの要素
継承：はい
パーセンテージ割り当て：N / A
デバイス：視覚的なフォーマット、ページ付け

「page」プロパティを使用して、要素が表示される特定のタイプのページを定義できます。

この例では、すべてのテーブルがページの右側（「回転」と呼ばれます）に配置されます。これは横向きです。

TABLE（ページ：回転;ページ分割前：右）

「page」プロパティの動作は次のとおりです。コンテンツがインラインレベルに属するページブロックの「page」プロパティの値が、前のページブロックの同様のプロパティの値と異なる場合、そのコンテンツもインラインレベルに属し、1つまたは2つのページ分割がそれらの間に挿入され、その後、名前付きページブロックで出力が行われます。強制的なページ分割については、以下のセクションを参照してください。

次の例では、2つのテーブルが横向きのページに表示され（両方が収まる場合は当然同じページに表示されます）、ページタイプ「narrow」はDIV要素に設定されていてもまったく使用されません。

@ページナロー（サイズ：9cm 18cm）
@ページを回転（サイズ：横向き）
DIV（ページ：狭い）
表（ページ：回転）

ドキュメントで使用

...

要素内のページ分割：「孤児」、「未亡人」

「孤児」

意味：<целое>| 遺伝性の
初期値：2
範囲：構造レベルの要素
継承：はい
パーセンテージ割り当て：N / A
デバイス：視覚的なフォーマット、ページ付け

「未亡人」

orphansプロパティは、ページの下部に残しておく必要のある段落行の最小数を決定します。「未亡人」プロパティは、ページの上部に残しておく必要のある段落行の最小数を決定します。これらのプロパティを使用してページ分割を制御する例を以下に示します。

段落の書式設定の詳細については、ラインボックスのセクションを参照してください。

許容できるページ分割

通常のフローでは、ページ分割は次の場所にあります。

ビルディングブロック間の垂直マージン用に予約されたスペース。この時点でページ分割が発生した場合、対応する「margin-top」および「margin-bottom」プロパティの計算値は「0」に設定されます。
構造レベルブロック内のラインブロック間。

考慮されるタイプの不連続性は、次のルールを満たします。

ルールA：ブレーク（1）は、ブレーク時に発生するブロックを生成するすべての要素の「page-break-after」および「page-break-before」プロパティの値の発生が許可されている場合にのみ許可されます。これは、それらの少なくとも1つが「常に」、「左」、または「右」であるか、それらすべてが同時に「自動」である場合に発生します。
ルールB：ただし、これらのプロパティがすべて「auto」に設定され、すべての名前付き要素の最も近い共通の祖先の「page-break-inside」プロパティが「avoid」に設定されている場合、その時点でのページ分割は次のようになります。禁止。
ルールB：ページ分割（2）は、分割と終了ブロックの開始の間の行ボックスの数が「孤立」プロパティ以上であり、分割と終了の間の行ボックスの数がブロックの終わりが「未亡人」プロパティ以上です..。
ルールD：さらに、ページ分割（2）は、「page-break-inside」プロパティが「auto」に設定されている場合にのみ許可されます。

上記のルールで十分なブレークを挿入できない場合、ルールBとDは無視され、コンテンツがページブロックから流出するのを防ぎます。これにより、追加のブレークを作成できます。

この後、十分な数のブレークを達成できない場合、ルールAとBは、追加のブレークポイントを検索するために考慮されません。

絶対位置のブロックでページ分割を行うことはできません。

強制的なページ分割

ブレークポイントで発生するブロックを生成する要素のすべての「page-break-after」および「page-break-before」プロパティの少なくとも1つが「常に」、「左」である場合、ページブレークが発生する必要があります（1） "、または"正しい "。

分割の直前と直後のラインボックスの「ページ」プロパティの値が異なる場合は、ページ分割も発生する必要があります（1）。

「最高の」ページ分割

CSS2は、許可された一連の区切りの中からどのページ区切りを使用するかを指定していません。 CSS2は、ユーザーエージェントがページ分割をどこかに挿入したり、まったく使用しなかったりすることを防ぎません。ただし、CSS2仕様では、ユーザーエージェントが次のヒューリスティックに従うことを強く推奨しています（互いに矛盾する場合があるように見えるまで）。

ページ分割はできるだけめったに行わないでください。
強制的な中断で終了しないすべてのページは、ほぼ同じ高さである必要があります。
境界線のあるブロック内に切れ目があってはなりません。
テーブルの中に休憩があってはなりません。
移動したオブジェクトの内部に隙間があってはなりません。

スタイルシートにプロパティ「orphans：4」と「widows：2」が含まれていて、現在のページの下部に20行（ラインボックス）があるとします。

現在のページの最後の段落に含まれる行が20行以下の場合は、現在のページに残しておく必要があります。
段落に21行または22行が含まれ、段落の2番目の部分が「未亡人」プロパティによって設定された制限に違反してはならない場合、これにより、2番目の部分は2行で構成される必要があります。
段落に23行を超える行が含まれている場合、最初の部分の長さは20行で、2番目の部分には他のすべての行が含まれている必要があります。

ここで、「orphans」プロパティの値が「10」、「widows」プロパティの値が「20」であり、現在のページの下部に8つの行があるとします。

現在のページの最後の段落に含まれる行が8行以下の場合は、現在のページに残しておく必要があります。
段落に9行を超える行が含まれている場合、分割することはできません（これは、「orphans」プロパティによって設定された制限に違反するため）。したがって、ブロックとして次のページに移動する必要があります。

印刷可能なhtmlページ分割。 CSS3を使用して印刷するためのページ分割。 最適化されていないページの印刷について