1. はじめに
このセクションは規定的ではありません。
ページメディア（例：紙、フィルム、写真アルバムのページ、印刷出力のシミュレーションとしてコンピュータ画面に表示されるページ）では、 連続メディアとは異なり、 文書の内容は一つまたは複数の独立した表示面に分割されます。 行の途中など不自然な分割を避けるために、レイアウトエンジンはページ分割箇所にかかる内容を調整できなければなりません。 この処理はページネーションと呼ばれます。
CSSでは、ページメディアに加え、リージョン [CSS3-REGIONS] や マルチカラムレイアウト [CSS3COL] のような特定のレイアウト機能も、同様に分割された環境を作り出します。 コンテナをまたいで内容を分割する総称は フラグメンテーション です。 このモジュールでは、内容が フラグメンテーションコンテナ（フラグメンテイナー）である ページやカラムなどをまたいでどのように分割されるか、またその分割を著者が制御する方法について説明します。
1.1. モジュール間の連携
このモジュールは [CSS21] の 13.3節 や [CSS3PAGE] で定義されているページネーション制御を置き換え、拡張します。
1.2. 値について
この仕様は CSSプロパティ定義規則 を [CSS21] から踏襲しています。 この仕様で定義されていない値タイプは CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールがこれらの値タイプの定義を拡張する場合もあります。
各プロパティ定義で記載されている値に加え、 本仕様で定義されるすべてのプロパティは CSS全体のキーワードもプロパティ値として受け入れます。 可読性のため、明示的な記載は省略しています。
2. フラグメンテーションモデルと用語
- フラグメンテーションコンテナ（フラグメンテイナー）
- ページボックス、カラムボックス、リージョンなど、 フラグメント化されたフローの一部（または全体）を含むボックス。 フラグメンテイナーは事前に定義することも、必要に応じて生成することもできます。 ブロック方向で分割可能な内容がフラグメンテイナーをオーバーフローする場合、 自身のフラグメンテーションコンテキストの次のコンテナに分割されます。
- フラグメンテーションコンテキスト
- フラグメンテイナーが順序付けられた並び。 例：マルチカラムコンテナ、 CSSリージョンの連鎖、 ページメディア表示など。 1つのフラグメンテーションコンテキスト内では、すべての フラグメンテイナーで ブロックフロー方向は1種類のみです。 （フラグメンテーションルートの子孫は他のブロックフロー方向を持つ場合もありますが、 フラグメンテーション自体はフラグメンテーションルートに適用されるブロックフロー方向に従って進行します。）
- フラグメント化されたフロー
- フラグメンテーションコンテキストでレイアウトされる内容。 フラグメント化されたフローは、 （匿名の場合もある）ボックスの内容であり、 フラグメンテーションルートと呼ばれます。
- フラグメンテーション方向
- フラグメンテーションコンテキストのブロックフロー方向、 すなわち内容が分割される方向。 （このCSSレベルでは、内容は1次元でのみ分割されます。）
- フラグメンテーション
- 内容フローを、フラグメンテイナーからなる フラグメンテーションコンテキストにまたがって分割する処理。
- ボックスフラグメントまたはフラグメント
- ボックスのうち、ちょうど1つのフラグメンテイナーに属する部分。 連続フロー内のボックスは常に1つのフラグメントのみ持ちます。 フラグメント化されたフロー内のボックスは1つ以上のフラグメントを持ちます。 各フラグメントはボックスのボーダー、パディング、マージンの一部を持ち、 それぞれ独自のパディング領域、ボーダー領域、マージン領域を持ちます。 （フラグメンテーションによる影響を制御する box-decoration-break を参照。）
- 残りのフラグメンテイナー領域
- ブロック軸方向の、 フラグメンテイナー内で指定要素に利用可能なスペース。 すなわち、フラグメンテイナー内の直前の内容の末尾から フラグメンテイナーの端まで。
各フラグメンテーション分割（以下、分割） は、現在のフラグメンテイナーでフラグメント化されたボックスのレイアウトを終了し、 残りの内容を次のフラグメンテイナーにレイアウトします。 必要に応じて、保留された内容のために新しいフラグメンテイナーが生成される場合もあります。
インライン内容を行に分割することもフラグメンテーションの一種であり、 インラインボックスがインラインボックスを ラインボックスをまたいで分割する際にも ボックスフラグメントが生成されます。 ただし、インライン分割については本仕様では扱いません。[CSS21] / [CSS3TEXT] を参照してください。
ボックスは、テキストの双方向並び替え（bidi）によっても複数の フラグメントに分割される場合があります （双方向並び替えアルゴリズムの適用は CSS Writing Modes を参照）。 また、より高レベルな display type のボックス分割（例： block-in-inlineの分割 (CSS2§9.2参照) や column-spanner-in-blockの分割 (CSS Multi-column Layout参照) など。 これらの場合のボックスフラグメントへの分割は レイアウト（内容のサイズ・配置）には依存しません。
2.1. 並列フラグメンテーションフロー
複数のフォーマッティングコンテキストが並列にレイアウトされる場合、 フラグメンテーションは各フォーマッティングコンテキストごとに独立して行われます。 例えば、要素がフロートされている場合、 フロート内で強制分割があってもフロート外の内容には影響しません （ただしフロートの高さが増すことで間接的に影響する可能性はあります）。 UAは任意で（必須ではありません）、 並列非強制分割の配置を調整し、 並べて表示される内容の視覚的バランスを取ることができますが、 強制分割を一致させるために調整してはなりません。
以下は、内容が独立してフラグメンテーションされる並列フローの例です：
- フロート内の内容と、フロート外に回り込む内容
- フロート内の内容と、隣接する別フロートの内容
- テーブル行内の各セルの内容
- グリッド行内の各グリッドアイテムの内容
- フレックスレイアウトの一行内の各フレックスアイテムの内容
- 同じ包含ブロックのフラグメンテーションコンテキスト範囲を覆う絶対配置要素の内容
固定サイズボックスの内容エッジから溢れる内容は、 固定サイズボックスの後の内容とは並列とみなされ、通常のフラグメンテーション規則に従います。 溢れた内容はフラグメンテーションルートボックスのサイズには影響しませんが、 フラグメント化されたフローの長さを増加させ、 必要に応じて追加のフラグメンテイナーに分割または生成されます。
2.2. 入れ子のフラグメンテーションフロー
フラグメンテイナー Fを分割すると、実質的にフラグメンテイナーが2つの フラグメンテイナー（F1とF2）に分割されます。 唯一の違いは、フラグメンテイナー Fの内容に関して、 2つの部分 F1 と F2 の間の分割の種類は Fを分割したフラグメンテーションコンテキストで作られた分割の種類であり、 F自身のフラグメンテーションコンテキストで通常作成される分割の種類ではありません。
3. 分割の制御
以下のセクションでは、フラグメント化されたフローにおける分割の制御方法について説明します。 ボックス間のページ・カラム・リージョン分割のタイミングは、 包含ブロックのbreak-insideプロパティ、 直前要素のbreak-afterプロパティ、 次の要素のbreak-beforeプロパティの影響を受けます。 行ボックス間のページ・カラム・リージョン分割のタイミングは、 包含ブロックのbreak-inside、widows、orphansプロパティの影響を受けます。 フラグメンテーション分割は、これらのプロパティ値に応じて許可・強制・回避されます。 強制分割は、その分割点で作用する分割制限を上書きします。 強制ページ分割の場合、著者は次の内容がどちらのページ（左または右）から再開されるかを指定することもできます。
これらのプロパティがフラグメンテーションにどう影響するかの詳細は、分割のルールのセクションを参照してください。
3.1. ボックス間の分割: break-before および break-after プロパティ
| Name: | break-before, break-after |
|---|---|
| Value: | auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region |
| Initial: | auto |
| Applies to: | ブロックレベルボックス、グリッドアイテム、フレックスアイテム、テーブル行グループ、テーブル行（詳細は本文参照） |
| Inherited: | no |
| Percentages: | n/a |
| Media: | visual |
| Computed value: | 指定キーワード |
| Canonical order: | 文法順 |
| Animation type: | 離散 |
これらのプロパティは、生成されたボックスの前後でのページ・カラム・リージョン分割動作を指定します。 強制分割値 left、 right、 recto、 verso、 page、 column、 region は フロー内で強制分割を作成します。 一方、分割回避値 avoid、 avoid-page、 avoid-column、 avoid-region は 内容をまとめて配置することを示します。
break-before および break-after の値は以下のサブセクションで定義されています。 ユーザーエージェントは、これらのプロパティをフラグメンテーションルートの通常フロー内のボックスに適用しなければなりません。 また、包含ブロックがルートフラグメント要素の通常フローにあるフロートボックスにも適用すべきです。 他のボックスにも適用しても構いません。 絶対配置されたボックスにはこれらのプロパティを適用してはなりません。
一般的な分割値
これらの値は、フローを含むフラグメント化コンテキストの種類に関係なく効果があります。
- auto
- principal boxの前後で分割を強制も禁止もしません。
- avoid
- principal boxの前後で分割を避けます。
ページ分割値
これらの値はページネーションされたコンテキストでのみ効果があります。フローがページネーションされていない場合は効果がありません。
- avoid-page
- principal boxの前後でページ分割を避けます。
- page
- principal boxの前後で必ずページ分割します。
- left
- principal boxの前後で1回または2回ページ分割し、次ページを左ページとしてフォーマットします。
- right
- principal boxの前後で1回または2回ページ分割し、次ページを右ページとしてフォーマットします。
- recto
- principal boxの前後で1回または2回ページ分割し、次ページを見開き内で2番目（ページ進行による）となる左または右ページとしてフォーマットします。
- verso
- principal boxの前後で1回または2回ページ分割し、次ページを見開き内で1番目（ページ進行による）となる左または右ページとしてフォーマットします。
カラム分割値
これらの値はマルチカラムコンテキストでのみ効果があります。フローがマルチカラムコンテキスト内でない場合は効果がありません。
- avoid-column
- principal boxの前後でカラム分割を避けます。
- column
- principal boxの前後で必ずカラム分割します。
リージョン分割値
これらの値はマルチリージョンコンテキストでのみ効果があります。フローが複数リージョンをまたがっていない場合は効果がありません。
- avoid-region
- principal boxの前後でリージョン分割を避けます。
- region
- principal boxの前後で必ずリージョン分割します。
3.1.1. 子→親への分割伝播
分割は兄弟要素間のみ許可され、ボックスとそのコンテナ間では許可されません （分割可能箇所参照）。 親の開始・終了位置に子に適用された分割値は、親へ伝播され、そこで効果を持ちます。
具体的には—
分割の伝播は算出値には影響しません。 レイアウトにおける各要素の算出値の解釈の一部です。
3.2. ボックス内の分割: break-inside プロパティ
| Name: | break-inside |
|---|---|
| Value: | auto | avoid | avoid-page | avoid-column | avoid-region |
| Initial: | auto |
| Applies to: | インラインレベルボックス、内部ルビボックス、テーブルカラムボックス、テーブルカラムグループボックス、絶対配置ボックスを除くすべての要素 |
| Inherited: | no |
| Percentages: | n/a |
| Media: | visual |
| Computed value: | 指定キーワード |
| Canonical order: | 文法順 |
| Animation type: | 離散 |
このプロパティは、要素のprincipal box内でのページ・カラム・リージョン分割動作を指定します。 各値の意味は次の通りです：
- auto
- ボックス内で追加の分割制約を課しません。
- avoid
- ボックス内で分割を避けます。
- avoid-page
- ボックス内でページ分割を避けます。
- avoid-column
- ボックス内でカラム分割を避けます。
- avoid-region
- ボックス内でリージョン分割を避けます。
3.3. 行間の分割: orphans、widows
| Name: | orphans, widows |
|---|---|
| 値: | <integer> |
| 初期値: | 2 |
| 適用対象: | ブロックコンテナで、インラインフォーマッティングコンテキストを確立するもの |
| 継承: | yes |
| パーセンテージ: | n/a |
| メディア: | visual |
| 算出値: | 指定された整数値 |
| 標準順序: | 文法順 |
| アニメーションタイプ: | 算出値型による |
orphans プロパティは、フラグメンテーション分割 前に ブロックコンテナ内に残しておくべき行ボックスの最小数を指定します。 widows プロパティは、分割 後に ブロックコンテナ内に残しておくべき行ボックスの最小数を指定します。 これらを使ったフラグメンテーション分割制御例は下記に示します。
orphans および widows の値には 正の整数のみが許可されます。負の値やゼロは無効であり、宣言は無視されなければなりません。
ブロック内の行数が widows または orphans の値より少ない場合、 すべての行をまとめて保持するというルールになります。
3.4. ページ分割エイリアス: page-break-before、page-break-after、page-break-inside プロパティ
CSS Level 2との互換性のため、 [CSS21]に準拠するUAは page-break-before、page-break-after、page-break-inside プロパティを break-before、break-after、break-inside にエイリアスし、 page-break-* を レガシー略記 として break-* に扱い、以下の値マッピングを適用します：
| 略記（page-break-*）値 | 正式（break-*）値 |
|---|---|
| auto | left | right | avoid | auto | left | right | avoid |
| always | page |
4. 分割のルール
フラグメント化されたフローは フラグメンテイナーの 分割可能箇所で分割される場合があります。強制分割の場合、UAはそのポイントで フローを分割しなければなりません。非強制分割の場合、UAは許可された分割の中から 選択しなければなりません。
進行保証のため、フラグメンテイナーは使用サイズに関係なく 最小ブロックサイズを1pxとみなします。
4.1. 分割可能箇所
フラグメンテーションはブロックフロー次元でボックスを分割します。 ブロック・インラインフローでは、以下の箇所で分割が生じることがあります：
- クラスA
-
以下の型の兄弟ボックス間：
- ブロック並列フラグメンテーション
- 兄弟の包含ブロックのブロックフロー方向がフラグメンテーションコンテキストのそれと並行な場合: in-flow ブロックレベルボックス、 フロートと隣接するin-flowまたはフロートされたボックス、 テーブル行グループボックス、 テーブル行ボックス、 マルチカラムのカラム行ボックス。
- ブロック垂直フラグメンテーション
- 兄弟の包含ブロックのブロックフロー方向がフラグメンテーションコンテキストのそれと垂直な場合: テーブルカラムグループボックス、 テーブルカラムボックス、 マルチカラムのカラムボックス。
- クラスB
- ブロックコンテナボックス内の行ボックス間。
- クラスC
- ブロックコンテナボックスの内容エッジと、その子内容の外側（ブロックレベル子のマージンエッジまたはインラインレベル子の行ボックスエッジ）との間 かつ両者間に（ゼロでない）隙間がある場合。
これらの分割点クラス間に本質的な優先順位はありません。 ただし、個々の分割点は分割制御によって優先・非優先される場合があります。
他のレイアウトモデルが上記クラスに分割点を追加することがあります。 例えば、[CSS-FLEXBOX-1]は フレックスフォーマッティングコンテキスト内の特定の点をクラスAとCに追加します。
一部の内容はフラグメント化できません。例えば多くの種類の置換要素 [CSS21]（画像や動画など）、 スクロール可能な要素、単一行のテキスト内容などです。 これらの内容はモノリシックとみなされます： 分割可能な箇所を含みません。 そのようなボックス内の強制分割は分割できず、 ボックス自身のフラグメンテーションコンテキストで無視されなければなりません。
一般にフラグメント化できない内容に加え、 UAはモノリシックとみなしてもよい要素として、 overflow が auto または scroll に設定されている要素、 overflow: hidden かつ auto でない 論理的高さ（かつ最大論理的高さが指定されていない）要素を含めても構いません。
行ボックスには分割可能箇所がないため、 inline-block や inline-table ボックス （および他のインラインレベルdisplay typeで独立フォーマッティングコンテキストを確立するもの） も モノリシックとみなされる場合があります。 つまり、単一の行ボックスがフラグメンテイナーに自力で収まらないほど大きい場合、 UAがその行ボックスを分割することを選択すれば、そのようなボックスをフラグメント化することも、 モノリシックとして扱うこともできます。
4.2. 分割の種類
CSSでは、フラグメンテイナーの種類に応じて異なる分割タイプが定義されています：
- ページ分割
- ページボックス間の分割。[CSS3PAGE]
- 見開き分割
- 向かい合うページでない2つのページボックス間の分割。 見開き分割は常にページ分割でもある。[CSS3PAGE]
- カラム分割
- カラムボックス間の分割。 カラムボックスが異なるページ上にある場合、その分割は ページ分割でもあります。 同様に、カラムボックスが異なるリージョンにある場合は リージョン分割でもあります。[CSS3COL]
- リージョン分割
- リージョン間の分割。 リージョンボックスが異なるページ上にある場合は ページ分割でもあります。[CSS3-REGIONS]
5番目の分割タイプは 行分割で、 行ボックス間の分割です。 これらは本仕様では扱いません。[CSS21] [CSS3TEXT] を参照してください。
4.3. 強制分割
強制分割は、 スタイルシート著者によって明示的に指定されたものです。 強制分割は クラスA分割点で発生し、 先行兄弟ボックスに指定または伝播された break-afterプロパティ、 後続兄弟ボックスに指定または伝播された break-beforeプロパティの中に 強制分割値が少なくとも1つあれば発生します。 （つまり、強制分割値は その分割点に同時に適用される 分割回避値 を上書きします。）
1つの分割点に複数の強制分割値 が適用される場合、それらは組み合わされ、すべての分割タイプが尊重されます。 left、 right、 recto、 verso が組み合わされた場合、フロー内で最新の要素に指定された値が優先されます。
強制ページ分割は、クラスA分割点において、 このマージンの上側の最後の行ボックスと下側の最初の行ボックスの page 値が異なる場合にも 発生しなければなりません。[CSS3PAGE]参照
強制分割が発生すると、その後の内容は分割の種類に合わせた次のフラグメンテイナーに配置され、 指定された分割タイプがすべて満たされるまで必要なだけフラグメンテーションコンテキストを突破します。 強制分割が一致する種類のフラグメンテーションコンテキスト内にない場合は、効果がありません。
4.4. 非強制分割
分割制御は分割を強制できるだけでなく、分割を回避することもできます。 非強制分割は、 UAが内容のフラグメンテイナー溢れを防ぐために自動的に挿入する分割です。 非強制分割が分割可能箇所で許可されるかどうかは、次のルールにより制御されます：
- ルール1
- フラグメント化されたフローは クラスA分割点で分割できるのは、 その分割点で適用されるすべての break-after および break-before の値が 分割を許可する場合のみであり、いずれかが分割を強制するか、 どれも禁止しない場合 （avoidや avoid-page/avoid-column/avoid-region、分割タイプによる）。
- ルール2
- ただし、すべてがautoであり、 すべての要素の共通祖先が break-inside の値 avoid を持つ場合は ここで分割してはなりません。
- ルール3
- クラスB分割点で分割できるのは、 分割から囲みブロックボックスの開始までの行ボックス数が orphans の値以上、 また分割からボックスの終わりまでの行ボックス数が widows の値以上の場合のみ。
- ルール4
- クラスBまたはクラスC分割点で分割できるのは、 すべての祖先の break-inside プロパティが auto の場合のみ。
上記ルールで十分な分割点が得られず内容がフラグメンテイナーから溢れる場合は、ルール3を除外して分割点を増やします。
それでも十分な分割点が得られない場合は、ルール1、2、4も除外し、さらに分割点を探します。 この場合UAはその地点で有効なavoidを新しい分割点の妥当性評価に利用できますが、 本仕様では正確なアルゴリズムは示しません。
それでも十分な分割点が得られない場合は、複製されたマージン／ボーダー／パディングをブロック末端側で切り詰め、 さらに必要な場合、複製されたマージン／ボーダー／パディングをブロック末端側でも切り詰めます。
最終的に、フラグメンテイナーの上端より下に分割点がない場合で内容が収まりきらない場合は、 UAは内容が失われないようどこでも分割してよいです。 この場合、UAはモノリシック要素の内容も グラフィカルな表現を切り分けることでフラグメント化してよいです。 ただし、UAはページの上端で分割してはならず、各フラグメンテイナーに少なくとも何らかの内容を配置し、 各フラグメンテイナーにゼロでない量の内容が存在するようにして進行が保証されなければなりません。
4.5. 非強制分割の最適化
CSS3では、フラグメント化されたフローは フラグメンテーションコンテキスト内のフラグメンテイナー溢れを避けるために許可された分割点で分割しなければなりませんが、 内容が特定の許可された分割点で分割されるかどうかは定義されていません。 ただし、UAは次の指針に従うことが推奨されています（ただし相反する場合もあります）：
- 分割回数をできるだけ少なくする。
- 強制分割で終わらないフラグメンテイナーは内容が均等に詰まって見えるようにする。
- 置換要素内で分割を避ける。
例えば、スタイルシートに orphans : 4、widows : 2 とあり、 現在のページ下部に20行分のスペースがあり、次のブロックが通常フローで配置されるとします：
- ブロックが20行以下なら現在のページに配置
- 21行または22行の場合、段落の2つ目のフラグメントは widows 制約に違反してはならず、 2つ目のフラグメントは最低2行、1つ目は最低4行含まなければなりません。
- 23行以上の場合、1つ目のフラグメントは20行、2つ目は残りの行。ただし、ブロックのいずれかのフラグメントが現在のページに配置される場合、 そのフラグメントは最低4行、2つ目は最低2行含まなければなりません。
次に、orphans が 10、 widows が 20 で、現在のページ下部に8行分のスペースがある場合：
- ブロックが8行以下なら現在のページに配置
- 9行以上の場合、分割してはならず（orphans 制約に違反する）、次のページにブロックごと移動。
さらにCSSには1つの要件があります： サイズゼロのボックスフラグメントは、 スペースを取らないため、分割点に収まる場合は フラグメンテーション分割の前側に配置しなければなりません。
注: サイズゼロのボックスフラグメントは、 直前の内容がフラグメンテイナーを 溢れる場合、その直後に配置されると次のフラグメンテイナーへ押し出されます。
5. 分割時のボックスモデル
このセクションで使われているサイズ用語は [CSS3-SIZING] で定義されています。
5.1. 可変サイズフラグメンテイナーへの分割
フローが可変サイズのフラグメンテイナーに分割される場合、レイアウトの適応に以下の規則が適用されます：
- レイアウトは各フラグメンテイナーごとに行われ、各フラグメンテイナーは前の分割点から進行を継続しますが、サイズと位置は自身のサイズで再計算され、全体の要素がこのサイズのフラグメンテイナーに分割されたかのように扱われます。進行は使用済み／残りのフラグメンテイナー領域の割合（絶対長さではなく）と、使用済み／残りの内容量で測定されます。 ただし、モノリシック要素のレイアウト時は、UAはフラグメンテイナー間で一貫したインラインサイズと解決されたブロックサイズを維持してもよいです。
- 本来的なサイズは、要素全体を通して計算・維持されます。初期包含ブロックサイズが本来的なサイズの決定に必要な場合は、フラグメンテーションコンテキストを定義する最初のフラグメンテイナーのサイズを仮定します。
-
前のフラグメンテイナーで始まったボックスのフラグメントは、配置規則に加え、フラグメントがフラグメンテイナーの block-start エッジより上に配置されないという追加制約に従う必要があります。
これにより、ボックスの続きのフラグメントがフラグメンテイナーの block-start エッジから離れて配置される場合は、box-decoration-break: clone が指定されていれば、
フラグメント全体がマージン・パディング・ボーダーで囲まれます。
可変サイズフラグメンテイナーに分割される例の図。
フラグメンテーション中も要素の文書順は変化しないため、フラグメントは連続メディアと同様の規則で処理されます。特に、floatの順序は全フラグメントを通じて維持され、CSS 2.1 9.5で定義された規則に従います。
以下はこれらの規則による（参考情報として）影響例です：
- stretch-fit やパーセンテージサイズでレイアウト制約を満たすボックス（テーブルを含む）は、ページをまたいで インラインサイズ が変化する場合があります。
- min-content、 max-content、または絶対長さサイズで制約を満たすボックス（テーブル含む）は、ページをまたいでも インラインサイズを維持します。
- ブロックレベルの続きフラグメントは、例えばブロックフォーマッティングコンテキストを確立し、floatの横に配置され、その両者がより狭いページで横並びにならない場合、ページ上端より下に配置されることがあります。
- あるページでfloatの後ろに隣接していた要素が、次ページでそのfloatの続きより上に配置されることがあります。これは、floatが前ページで横並びできていた他のfloatとともに、次ページでは収まらなくなり下に押し下げられる場合です。
- 右floatの続きが前ページに収まらない場合、左floatがその残りの右floatより前のページに現れることがあります。ただし、さらに右floatが続く場合は、先行する右floatの残りが配置できるまで下へ押し下げられます。
割合ベースでの進行を示す例： 絶対配置された要素が top: calc(150% + 30px) で、height: calc(100% - 10px) の場合を考えます。これがページ高さ400pxの最初のページ、200pxの2ページ目、600pxの3ページ目のページネーションコンテキストに配置された場合、レイアウト進行は次の通りです：
- まずtop位置を最初のページ高さで解決し、630pxとなります。最初のページは高さ400pxしかないので、レイアウトは2ページ目に移り、進行は400/630 = 63.49%、残りは36.51%となります。
- 2ページ目で再度top位置を解決すると今度は330pxとなります。残りの36.51%は120.5pxとなり、要素のtopエッジが2ページ目の120.5px下に配置されます。
- 高さは2ページ目で190pxとなります。ページ残りは79.5pxしかないので、レイアウトは3ページ目に移り、進行は79.5/190 = 41.84%、残りは58.16%。
- 3ページ目では高さ590px。残り58.16%は343.1pxとなり、このページに収まり要素が完了します。
5.2. 分割時のマージン結合
ブロックレベルボックスの前後で非強制分割が発生する場合、分割に隣接するマージンはゼロに切り詰められます。 強制分割が発生する場合は、分割前の隣接マージンは切り詰められますが、分割後のマージンは保持されます。複製されたマージンはブロックレベルボックスで常にゼロに切り詰められます。
注: CSS Fragmentation Level 4では分割時のマージン切り詰め制御が導入されます。
5.3. ボックスの分割
ボックスが分割されると、 内容ボックスは 残りのフラグメンテイナー領域を埋めるまで拡張されます（box-decoration-break: clone によるマージン／ボーダー／パディングも含めて） 内容が次の フラグメンテイナーに再開されるまで。 （内容が次の フラグメンテイナーへ押し出される フラグメンテーション分割は、ボックス内容の ブロックサイズを実質的に増加させます。）
ボックス分割による追加の ブロックサイズ（分割点から フラグメンテイナーの端までの距離）は、ボックスの ブロックサイズの制限値に向けて進行に加算されます。
残りのフラグメンテイナー領域を埋める図。
5.4. 分割された枠線と背景: box-decoration-break プロパティ
| Name: | box-decoration-break |
|---|---|
| 値: | slice | clone |
| 初期値: | slice |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| メディア: | visual |
| 算出値: | 指定キーワード |
| 標準順序: | 文法順 |
| アニメーションタイプ: | 離散 |
分割（ページ／カラム／リージョン／行）でボックスが分割される場合、 box-decoration-break プロパティは、
- ボックスのマージン、ボーダー、パディング、その他装飾が分割されたボックスフラグメントの端に巻き付くかどうか
- background positioning area [CSS3BG]（および mask positioning area [CSS-MASKING-1]、shape reference box [CSS-SHAPES-1] など）がボックスフラグメントごとに導出・複製されるかどうか、および要素の背景がどのように描画されるか
値の意味は以下の通りです：
- clone
-
各ボックスフラグメントは独立してボーダー・パディング・マージンでラップされます。
border-radius、border-image、box-shadow がある場合は、各フラグメントに個別に適用されます。
背景は要素の各フラグメントごとに独立して描画されます。
no-repeatの背景画像は要素の各フラグメントごとに1回描画されます。
注: 複製されたマージンはブロックレベルボックスで切り詰められます。
- slice
-
要素が分割なしで描画された後で分割点でスライスされたかのような効果になります： 分割点にはボーダーやパディングは挿入されません； 分割された端にはbox-shadowは描画されません； 背景、border-radius、border-image は全体のボックス形状に対して、分割されていないかのように適用されます。
box-decoration-break の2つの可能性：左が slice、右が clone の値。
UAは、双方向（bidi）による分割、すなわちbidiリオーダーでインラインが非連続フラグメントに分割される場合や、display-typeによる分割、すなわち高次の display type（ブロックレベルボックスやカラムスパナーなど）が互換性のない祖先（インラインボックスやブロックコンテナ）を分割する場合にも、描画制御のため box-decoration-break を適用すべきです。 それ以外の場合は、分割は slice として扱わなければなりません。 詳細は 双方向並び替えアルゴリズムの適用（CSS Writing Modes）、CSS2§9.2 ブロックレベル要素とブロックボックス、CSS Multi-column Layout §6 カラムのスパン参照。
インライン要素の場合、フラグメントのどちら側が分割端とみなされるかは、親要素のインライン進行方向によって決まります。 例えば、親が direction: rtl のインライン要素が2行にまたがって分割される場合、最初の行のフラグメントの 左端 が分割端となります（特に、要素自身の direction や包含ブロックの direction は使われません）。詳細は [CSS3-WRITING-MODES] を参照してください。
5.4.1. slice 用のボックス結合
box-decoration-break: slice の場合、背景（および border-image）は、 ボックスのすべてのフラグメントを視覚順に再結合した合成ボックスに適用されたかのように描画されます。 この理論的な結合は、要素がレイアウトされた後（ジャスティフィケーション、bidi並び替え、ページ分割等含む）に行われます。 合成ボックスを組み立てるには…
- 行をまたいで分割されたボックスの場合
- まず、同じ行上のフラグメントは視覚順に結合されます。 次に、後続行上のフラグメントは要素の インライン基底方向に従い、要素の主要ベースラインで整列されます。 例えば、包含ブロックが左から右（direction が ltr）の場合、 最初のフラグメントは1行目の最も左側であり、後続行のフラグメントはその右に配置されます。 右から左の場合は、最初のフラグメントは1行目の最も右側で、以降は左に並びます。
- カラムをまたいで分割されたボックスの場合
- フラグメントは、マルチカラムコンテナの ブロックフロー方向で、カラムボックスが貼り合わせられたかのように結合されます。
- ページをまたいで分割されたボックスの場合
- フラグメントは、ルート要素の ブロックフロー方向で、ページ内容領域が貼り合わせられたかのように結合されます。
- リージョンをまたいで分割されたボックスの場合
- フラグメントは、主書記モードの リージョンチェーンにおける ブロックフロー方向で、リージョン内容領域が貼り合わせられたかのように結合されます。
ボックスフラグメントの幅（横結合の場合は高さ）が異なる場合、 各部分は自身の幅（高さ）が要素全体の幅（高さ）であるかのように背景描画を行います。 ただし、画像の使用高さ（幅）がボックスの幅（高さ）から導出される場合は、最も広いフラグメントの幅で計算され、固定サイズとなります。 これにより、右揃え画像は右端に、左揃え画像は左端に、中央揃え画像は中央に維持され、 伸長画像は背景領域全体を意図通りカバーし、フラグメント間の連続性が保たれます。
5.5. 変形・配置・ページネーション
フラグメンテーションはレイアウトに影響し、相対位置 [CSS21]、変形 [CSS3-TRANSFORMS]、他のグラフィカル効果の 前 に発生します。 これらの効果は各フラグメントごとに適用されます。 例えば、分割されたボックスに回転を適用すると、各フラグメントごとに回転原点を計算し、その原点を中心に独立して回転します。 （オーバーフロー専用フラグメントの原点は、内容がゼロマージン・ボーダー・パディングの空ボックスからオーバーフローするものとして決定されます。） ただし、印刷時のデータ損失を減らすため、 ページボックスの分離・転送は 最終段階で行うべきです。 そのため、ページをまたぐ変形フラグメントはページ分割でスライスされて全体が印刷されるべきであり、元のページでクリップされるよりも優先されます。
固定高さのボックスが2.5ページをまたぎ、オーバーフロー内容が合計4ページにまたがる例。 各フラグメントの変形原点はそのボーダーボックスの中心。 ボーダーボックスのないフラグメントはオーバーフローの開始位置にゼロ高さボックスを仮定します。
絶対配置はレイアウトに影響し、フラグメンテーションとも相互作用します。 座標系と包含ブロックに属する絶対配置ボックスは、包含ブロックと同じフラグメンテーションフローでフラグメンテイナーにまたがって分割されます。
UAは、フラグメンテーション分割をまたぎ、block-start エッジ位置がボックス内容の分割位置に依存するボックスの位置を正しく配置する必要はありません。
メモリ制約により文書全体をメモリ上で操作できないUAは、 すでに描画されたページに絶対配置要素がまたがる場合の正確な配置を保証する必要はありません。
変更点
2016年1月14日候補勧告以降の主な変更点は以下の通りです：
-
page-break-* プロパティのエイリアス機構を明確化。
(Issue 866)
page-break-* プロパティを
shorthandsレガシー略記 として break-* プロパティに扱う - 分割伝播が算出値に影響しないこと、 他のレイアウトモード（例：flex/grid）が基本の分割伝播規則を調整すること、 子→親伝播で out-of-flow の子を無視する修正。 (Issue 2614) §3.1.1 子→親分割伝播参照。
-
widows と orphans が直接行ボックスを持たないブロックコンテナには効果がないことを明確化。
(Issue 1823)
適用対象: block containers 新たなインラインフォーマッティングコンテキストを確立するもの
-
クラスC分割点に隣接するマージンも兄弟間（クラスA）同様に切り詰められることを明確化。
(Issue 3073)
非強制分割が発生する場合
betweenブロックレベルボックスのes前後、 分割に隣接するマージンはtruncate to the remaining fragmentainer extent before the break, andゼロに切り詰められるafter the break。 -
UAがアトミックインラインを モノリシックとみなさない場合の意味を明確化。
(Issue 1111)
行ボックスには分割点がないため、inline-block や inline-table ボックス （他のインラインレベル display type で独立フォーマッティングコンテキストを確立するものも含む）は モノリシックとみなされることがある つまり、単一の行ボックスが自力でフラグメンテイナーに収まらないほど大きい場合、UAがその行ボックスを分割することを選択すれば、そのようなボックスをフラグメント化することも、モノリシックとして扱うこともできる 。
-
サイズゼロのフラグメントは前のフラグメンテイナーに残る必要がある要件を追加。
(Issue 1529)
さらにCSSは次の要件を課します： サイズゼロの ボックスフラグメント は、 スペースを取らないため、 フラグメンテーション分割 break に収まる場合は 前側の フラグメンテイナーに配置されなければなりません。
サイズゼロの ボックスフラグメントは、 直前の内容が フラグメンテイナーを溢れる場合、その直後に配置されると次の フラグメンテイナーへ押し出されます。
-
bidi分割や block-in-inline
分割がフラグメントを生成し、その書式制御は box-decoration-break で行うべきことを明確化。
(Issue 1706)
ボックスは、bidi並び替えや display type の高次分割（例：block-in-inlineの分割（CSS2§9.2参照）や column-spanner-in-block 分割（CSS Multi-column Layout参照））によっても 複数の フラグメントに分割される場合があります。 これらの場合の ボックスフラグメントへの分割は レイアウト（内容のサイズ・配置）には依存しません。
UAは
mayshould bidi分割（インラインが非連続フラグメントになる場合）や display-type分割（高次 display type（block-level box や column spanner）が、互換性のない祖先（inline box や block container）を分割する場合）でも、描画制御のため box-decoration-break を適用すべきです。 それ以外の場合は分割を slice として扱う必要があります。 詳細は 双方向並び替えアルゴリズムの適用（CSS Writing Modes）、CSS2§9.2 ブロックレベル要素とブロックボックス、CSS Multi-column Layout §6 カラムのスパン参照。 - 細かい文言修正。
コメント処理状況が公開されています。
2015年1月29日作業草案以降の主な変更点：
- any および always の break-* 値を削除。
- widows と orphans の優先度と break-* 制限の優先度を入れ替え、widows および orphans を低優先とした。
- box-decoration-break: clone でマージンも複製される（ただしブロックレイアウトでは切り詰め）。
- 新しい分割タイプに対応するため、非強制分割規則（クラスA）を修正（元の規則はページ分割のみ扱っていた）。
- 領域が足りなくなった場合、複製されたボックス装飾の省略を許可。
コメント処理状況が公開されています。
謝辞
編集者は本モジュールへの貢献者である Mihai Balan、 Michael Day、 Alex Mogilevsky、 Shinyu Murakami、 Florian Rivoal、 Alan Stearns に感謝します。 また、旧 [CSS3PAGE] 編集者 Jim Bigelow (HP)、 Melinda Grant (HP)、 Håkon Wium Lie (Opera)、 Jacob Refstrup (HP) の本仕様への貢献に特別な謝意を表します。 本仕様は彼らの成果を継承しています。