CSS による断片化 — CSS Fragmentation Module Level 4

1.1. ~module間の相互作用

この~moduleは、 `CSS2$r `§ 13.3＠~CSS22/page.html#page-breaks$ および `CSS-PAGE-3$r にて定義される~page割り制御を置換し, 拡張する。 ◎ This module replaces and extends the pagination controls defined in [CSS2] section 13.3 and in [CSS-PAGE-3].

1.2. 値~定義

【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

2.1. 並行する断片化~flow

複数の`整形~文脈$が互いに並行して~lay-outされる下では、 断片化は，各~整形~文脈ごとに独立に行われる。 例えば，要素が浮動されている場合、 `浮動体$の内側にある`強制d分断$は，（浮動体の`塊~size$を増大させ得ることを除いて）浮動体の外側の内容の~layoutには，影響しないことになる。 ~UAは、 互いに並行する整形~文脈~内の`非強制d分断$の配置を調整して，横並びになる内容を視覚的に整えてもヨイ — `強制d分断$に対しては、 そのように調整してはならない。 ◎ When multiple formatting contexts are laid out parallel to each other, fragmentation is performed independently in each formatting context. For example, if an element is floated, then a forced break inside the float will not affect the content outside the float (except insofar as it may increase the height of the float). UAs may (but are not required to) adjust the placement of unforced breaks in parallel formatting contexts to visually balance such side-by-side content, but must not do so to match a forced break.

それぞれが独立に内容を断片化するような，並行する~flowの例には、 次が挙げられる： ◎ The following are examples of parallel flows whose contents will fragment independently:

• `浮動体$の内容と, その周囲を取り巻く内容。 ◎ The contents of a float vs. the content wrapping outside the float.
• `浮動体$の内容と, それに隣接な浮動体の内容。 ◎ The contents of a float vs. the contents of an adjacent float.
• 同じ~table~row内の各~table~cellの内容。 ◎ The contents of each table cell in a single table row.
• 同じ格子~row内の各~格子~駒の内容。 ◎ The contents of each grid item in a single grid row.
• ~flex~layoutにおける同じ~row内の各~flex駒の内容。 ◎ The contents of each flex item in a flex layout row.
• 各 絶対的に位置された要素の，内容 — それらの`包含塊$の`断片化~文脈$が同じ範囲を覆うような。 ◎ The contents of absolutely-positioned elements that cover the same range of their containing block’s fragmentation context.

固定d~sizeにされた~boxの内容~辺を~overflowする内容は、 その~boxに後続する内容に並行するものと見なされ，通常の断片化~規則に従う。 ~overflowする内容は，`断片化~根$~boxの~sizeには影響しないが、 `断片~化~flow$の長さを増大させ，溢れるか追加的な`断片容器$を必要yなだけ生成させる。 ◎ Content overflowing the content edge of a fixed-size box is considered parallel to the content after the fixed-size box and follows the normal fragmentation rules. Although overflowing content doesn’t affect the size of the fragmentation root box, it does increase the length of the fragmented flow, spilling into or generating additional fragmentainers as necessary.

2.2. 入子な断片化~flow

`断片容器$ %F の分断法は、 実質的に， %F を 2 つの`断片容器$ %F1, %F2 に分割する。 通常との唯一の相違は、 `断片容器$ %F の内容に関して， %F1, %F2 の合間の`分断の型$が — %F の自前の`断片化~文脈$により作成されるものではなく — %F を分割する`断片化~文脈$により作成される`分断の型$になることである。 ◎ Breaking a fragmentainer F effectively splits the fragmentainer into two fragmentainers (F1 and F2). The only difference is that, with regards to the content of fragmentainer F, the type of break between the two pieces F1 and F2 is the type of break created by the fragmentation context that split F, not the type of break normally created by F’s own fragmentation context.

注記： `複-柱~容器$が何~pageかに分断されるときは、［ `複-柱~容器$の中の`~page分断$は、 常に，`~page分断$かつ`柱~分断$になる ］よう，残りの内容~用の新たな［ 柱たちが成す~row ］が次~page以降に生成される。 ◎ Note that when a multi-column container breaks across pages, it generates a new row of columns on the next page for the rest of its content, so that a page break within a multi-column container is always both a page break and a column break.

3.1. ~box間の分断： `break-before^p, `break-after^p ~prop

これらの~propは、 生成された~boxの前後における［ ~page／柱／領域 ］分断の挙動を指定する： ◎ These properties specify page/column/region break behavior before/after the generated box.＼

• 次に挙げる `分断強制~値@ は、 ~flowにおいて`強制d分断$を作成する ⇒ `always$v, `all$v, `left$v, `right$v, `recto$v, `verso$v, `page$v, `column$v, `region$v ◎ The forced break values always, all, left, right, recto, verso, page, column and region create a forced break in the flow while＼
• 一方，次に挙げる `分断回避~値@ は、 前後の内容が一緒に保たれるベキであることを指示する ⇒ `avoid$v0, `avoid-page$v0, `avoid-column$v0, `avoid-region$v0 ◎ the avoid break values avoid, avoid-page, avoid-column and avoid-region indicate that content should be kept together.

`break-before$p ／ `break-after$p 用の各種 値は、 以下の下位節にて定義される。 ~UAは、 これらの~propを，`断片化~根$の通常~flowの中の~boxに適用するモノトスル。 また、［ `包含塊$が断片化された`根~要素$の通常~flowの中にあるような，浮動d~box ］にも適用するベキである。 ~UAは、 これらの~propを他の~boxにも適用してヨイが，絶対的に位置された~boxには適用しないモノトスル。 ◎ Values for break-before and break-after are defined in the sub-sections below. User agents must apply these properties to boxes in the normal flow of the fragmentation root. User agents should also apply these properties to floated boxes whose containing block is in the normal flow of the root fragmented element. User agents may also apply these properties to other boxes. User agents must not apply these properties to absolutely-positioned boxes.

以下における， `首要~box@0 とは、 当の要素が生成する`塊~level$の`首要~box$を意味する。 この節の以下における “前／後” は、 個別に `break-before$p ／ `break-after$p に対応するものとする。

3.2. ~box内での分断： `break-inside^p ~prop

この~propは、 要素の`首要~box$0における［ ~page／柱／領域 ］分断の挙動を指定する。 各種 値は、 次を意味する： ◎ This property specifies page/column/region break behavior within the element’s principal box. Values have the following meanings:

`auto@v0

`首要~box$0内の分断法に追加的な拘束を課さない。 ◎ Impose no additional breaking constraints within the box.

`avoid@v0

`首要~box$0内での分断を，避ける。 ◎ Avoid breaks within the box.

`avoid-page@v0

`首要~box$0内での`~page分断$を，避ける。 ◎ Avoid a page break within the box.

`avoid-column@v0

`首要~box$0内での`柱~分断$を，避ける。 ◎ Avoid a column break within the box.

`avoid-region@v0

`首要~box$0内での`領域~分断$を，避ける。 ◎ Avoid a region break within the box.

3.3. 行l間の分断： `orphans^p, `widows^p

［ `orphans$p ／ `widows$p ］~propは、 `塊~容器$~内の`分断$において，その［ 前／後 ］に［ `断片$内に残さなければならない最小な行l~box数 ］を指定する。 `後述＠#widows-orphans-example$にて、 これらを利用して`分断$を制御する例を与える。 ◎ The orphans property specifies the minimum number of line boxes in a block container that must be left in a fragment before a fragmentation break. The widows property specifies the minimum number of line boxes of a block container that must be left in a fragment after a break. Examples of how they are used to control fragmentation breaks are given below.

［ `orphans$p ／ `widows$p ］の値には、 正な整数のみ許容される。 負な値や 0 は無効であり、 当の宣言を`無視する$モノトスル。 ◎ Only positive integers are allowed as values of orphans and widows. Negative values and zero are invalid and must cause the declaration to be ignored.

塊が包含する行l数が［ `orphans$p ／ `widows$p ］の値より少ない場合、 単に，［ 塊~内のすべての行lが一緒に保たれなければならない ］とする規則に変わる。 ◎ If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.

3.4. ~page分断~propの別名： `page-break-before^p, `page-break-after^p, `page-break-inside^p

`CSS2$r `§ ~paged媒体＠~CSS22/page.html$ との互換性を得るため、 `CSS2$r に適合する~UAは，［ `page-break-before$p ／ `page-break-after$p ／ `page-break-inside$p ］~propを［ `break-before$p ／ `break-after$p ／ `break-inside$p ］の別名として扱う — すなわち，次の表tに与える値の対応付けの下で、 各種 `page-break-*^p ~propを，対応する `break-*^p ~prop用の`旧来の略式~prop$として扱う— モノトスル： ◎ For compatibility with CSS Level 2, UAs that conform to [CSS2] must alias the page-break-before, page-break-after, and page-break-inside properties to break-before, break-after, and break-inside by treating the page-break-* properties as legacy shorthands for the break-* properties with the following value mappings:

4.1. アリな分断点

断片化は、 塊~flow次元において，~boxを分割する。 ［ 塊／行内 ］~flowにおける分断は、 以下に挙げる所で生じ得る： ◎ Fragmentation splits boxes in the block flow dimension. In block-and-inline flow, breaks may occur at the following places:

`A類~分断点@

以下に挙げる型の，互いに同胞な~boxの合間： ◎ Between sibling boxes of the following types:

塊に平行な断片化： ◎ Block-parallel Fragmentation

すなわち、 同胞~boxたちの`包含塊$の`塊~flow方向$が，`断片化~文脈$のそれに平行である下では：

• `~flow内$にある， 2 つの［ `塊~level$の~box ］の合間
• `浮動体$, それに~~直に隣接な［ ~flow内にある~box／浮動d~box ］の合間
• 2 つの［ ~table~row~group~box ］の合間
• 2 つの［ ~table~row~box ］の合間
• 複-柱における，2 つの［ 柱~row~box ］の合間

◎ When the block flow direction of the siblings' containing block is parallel to that of the fragmentation context: in-flow block-level boxes, a float and an immediately-adjacent in-flow or floated box, table row group boxes, table row boxes, multi-column column row boxes.

塊に垂直な断片化

すなわち、 同胞~boxたちの`包含塊$の`塊~flow方向$が，`断片化~文脈$のそれに垂直である下では：

• 2 つの［ ~table~col~group~box ］の合間
• 2 つの［ ~table~col~box ］の合間
• 複-柱における， 2 つの［ `柱~box$ ］の合間

◎ When the block flow direction of the siblings' containing block is perpendicular to that of the fragmentation context: table column group boxes, table column boxes, multi-column column boxes.

`B類~分断点@

`塊~容器$~boxの内側にある，2 本の［ `行l~box$ ］の合間 ◎ Between line boxes inside a block container box.

`C類~分断点@

`塊~容器$~boxの［ 内容~辺, 子~内容の外縁~辺 ］の合間 — `ただし^em，合間を成す隙間が 0 でない場合に限る。 外縁~辺とは、 子が［ `塊~level$ならば その~margin辺 ／ `行内~level$ならば その行l~box辺 ］を指す。 【！XXX add example】 ◎ Between the content edge of a block container box and the outer edges of its child content (margin edges of block-level children or line box edges for inline-level children) if there is a (non-zero) gap between them.

注記： これら各~類の分断点の間には、 内来的な優先順位は無い。 しかしながら，個々の分断点には、 `分断法の制御$を利用して，優先順位が 付与される／解除される こともある。 ◎ Note: There is no inherent prioritization among these classes of break points. However, individual break points may be prioritized or de-prioritized by using the breaking controls.

注記： 他の~layout~modelは、 上述の各~類の分断点を追加し得る。 例えば、 `CSS-FLEXBOX-1$r は，~flex整形~文脈における ある種の地点を［ `A類~分断点$ ／ `C類~分断点$ ］として追加する。 ◎ Note: Other layout models may add breakpoints to the above classes. For example, [CSS-FLEXBOX-1] adds certain points within a flex formatting context to classes A and C.

断片化-不能な内容もある — 例えば，［ 多くの型の`置換d要素$（画像や動画など）, ~scroll~~可能な要素, ~text内容の単独の行l ］など。 その種の内容は `単体的@ と見なされ、 アリな分断点を包含しない。 したがって、 そのような~boxの中の`強制d分断$は~boxを分割できず、 ~boxの自前の断片化~文脈からは，無視されるモノトスル。 ◎ Some content is not fragmentable, for example many types of replaced elements [CSS2] (such as images or video), scrollable elements, or a single line of text content. Such content is considered monolithic: it contains no possible break points. Any forced breaks within such boxes therefore cannot split the box, and must therefore also be ignored by the box’s own fragmentation context.

一般に断片化-不能な内容に加え、 ~UAは，次に挙げる どの要素も`単体的$と見なしてもヨイ： ◎ In addition to any content which is not generally fragmentable, UAs may consider as monolithic＼

• `overflow$p が［ `auto^v ／ `scroll^v ］にされた要素 ◎ any elements with overflow set to auto or scroll and＼
• `overflow^p が `hidden^v, かつ `論理-縦幅$が `~autoS$v でない（かつ最大`論理-縦幅$が指定されていない）要素 ◎ any elements with overflow: hidden and a non-auto logical height (and no specified maximum logical height).

`行l~box$は，`アリな分断点$を包含しないので、［ `行内~level$の`表示~型$のうち，`独立な整形~文脈$を確立するもの（ `inline-block$v, `inline-table$v など） ］は，`単体的$と見なしてもヨイ： すなわち、 単独の行l~boxが — それ自身が断片容器を成しているとしても — `断片容器$に収まるには大き過ぎで，~UAは行l~boxを分割することを選ぶ事例では、 そのような~boxを断片化しても，単体的として扱ってもヨイ。 ◎ Since line boxes contain no possible break points, inline-block and inline-table boxes (and other inline-level display types that establish an independent formatting context) may also be considered monolithic: that is, in the cases where a single line box is too large to fit within its fragmentainer even by itself and the UA chooses to split the line box, it may fragment such boxes or it may treat them as monolithic.

4.2. 分断の型

~CSSにおいては、 種々の分断~型が，それらが~spanする`断片容器$の型に基づいて定義される： ◎ There are different types of breaks in CSS, defined based on the type of fragmentainers they span:

`~page分断@

2 つの`~page~box$の合間にある分断。 `CSS-PAGE-3$r ◎ A break between two page boxes. [CSS-PAGE-3]

`見開き分断@

`対向~page$にされてない 2 つの~page~boxの合間にある分断。 見開き分断は、 `~page分断$でもある。 `CSS-PAGE-3$r ◎ A break between two page boxes that are not associated with facing pages. A spread break is always also a page break. [CSS-PAGE-3]

`柱~分断@

2 つの`柱~box$の合間にある分断。 これらの~boxが異なる~page上に在る場合、 分断は`~page分断$にもなることに注意。 同様に，~boxが異なる領域に在る場合、 分断は`領域~分断$にもなる。 `CSS-MULTICOL-1$r ◎ A break between two column boxes. Note that if the column boxes are on different pages, then the break is also a page break. Similarly, if the column boxes are in different regions, then the break is also a region break. [CSS-MULTICOL-1]

`領域~分断@

2 つの`領域$の合間にある分断。 これらの~boxが異なる~page上にある場合、 分断は`~page分断$にもなることに注意。 `CSS3-REGIONS$r ◎ A break between two regions. Note that if the region boxes are on different pages, then the break is also a page break. [CSS3-REGIONS]

注記： 分断~型には他にも、 2 本の`行l~box$に分断する`行l分断$もあるが、 この仕様では受持たない。 `CSS2$r, `CSS-TEXT-3$r を見よ。 ◎ Note: A fifth type of break is the line break, which is a break between two line boxes. These are not covered in this specification; see [CSS2] [CSS-TEXT-3].

4.3. 強制d分断

`強制d分断@ は、 ~stylesheet作者により明示的に指示される分断である。 `強制d分断$は、［［ 先行の同胞~boxに［ 指定される／`伝播-$される【！#propagate】 ］ `break-after$p ~prop ］, または［ ~~後続の同胞~boxに［ 指定される／`伝播-$される ］ `break-before$p ~prop ］のうち，少なくとも一方が`分断強制~値$をとる場合に、 `A類~分断点$にて生じる。 （したがって，この`分断強制~値$は、 実質的に，同じ分断点に適用されるどの`分断回避~値$も上書きする。） ◎ A forced break is one explicitly indicated by the style sheet author. A forced break occurs at a class A break point if, among the break-after properties specified on or propagated to the earlier sibling box and the break-before properties specified on or propagated to the later sibling box there is at least one with a forced break value. (Thus a forced break value effectively overrides any avoid break value that also applies at that break point.)

単独の分断点に，複数の`分断強制~値$が適用されるときには、 それらの分断~型すべてが尊守されるように，組合される。 ［ `left$v, `right$v, `recto$v, `verso$v ］が組合されたときは、 ~flowの中で最も末尾側の要素に指定された値が，優先される。 ◎ When multiple forced break values apply to a single break point, they combine such that all types of break are honored. When left, right, recto, and/or verso are combined, the value specified on the latest element in the flow wins.

注記： 強制d`~page分断$は、［ この~margin【どの？】の直前と直後の行l~boxが， 同じ `page$p ~prop値をとらない ］場合には，`A類~分断点$にも生じるモノトスル。 `CSS-PAGE-3$r を見よ。 ◎ Note: A forced page break must also occur at a class A break point if the last line box above this margin and the first one below it do not have the same value for page. See [CSS-PAGE-3].

強制d分断が生じる場合、 内容が［ その分断に結び付けられている型の，次の`断片容器$ ］の中に入る様に強制する — 指定された分断~型がすべて満たされるまで，必要yなだけ`断片化~文脈$の入子階層を遡って。 合致する型の`断片化~文脈$に包含されない強制d分断には、 効果はない。 ◎ When a forced break occurs, it forces ensuing content into the next fragmentainer of the type associated with the break, breaking through as many fragmentation contexts as necessary until the specified break types are all satisfied. If the forced break is not contained within a matching type of fragmentation context, then the forced break has no effect.

4.4. 非強制d分断

`分断法の制御$は、 分断を強制できるのみならず，忌避することもできる。 `非強制d分断@ とは、 内容が`断片容器$を~overflowしないように，~UAにより自動的に挿入される分断である。 `アリな分断点$にて，非強制d分断法が許容されるかどうかは、 次の規則により制御される： ◎ While breaking controls can force breaks, they can also discourage them. An unforced break is one that is inserted automatically by the UA in order to prevent content from overflowing the fragmentainer. The following rules control whether unforced breaking at a possible break point is allowed:

規則 1

`A類~分断点$においては、 この分断点に適用-可能な［［ `break-after$p ／ `break-before$p ］の値 ］すべてが，`断片~化~flow$の分断を許容する — すなわち，次のいずれかの場合に限り，分断が許容される：

• それらの値に一つでも分断を強制するものがある
• それらを禁止するもの（ `分断の型$に依存して，［ `avoid$v, `avoid-page$v, `avoid-column$v, `avoid-region$v ］のうち，いくつか）はない。

◎ A fragmented flow may break at a class A break point only if all the break-after and break-before values applicable to this break point allow it, which is when at least one of them forces a break or when none of them forbid it (avoid or avoid-page/avoid-column/avoid-region, depending on the break type).

規則 2

しかしながら、 ~AND↓ も満たされる場合，そこで分断するのは許容されない：

• それらの値すべてが `auto^v
• ［ すべての要素に共通な ある先祖 ］の `break-inside$p の値は `avoid$v0

◎ However, if all of them are auto and a common ancestor of all the elements has a break-inside value of avoid, then breaking here is not allowed.

規則 3

`B類~分断点$においては、 分断を囲んでいる塊~boxについて ~AND↓ も満たされる場合に限り，分断が許容される：

• 分断と~boxの始端の合間にある行l~box数は `orphans$p の値~以上である
• 分断と~boxの終端の合間にある行l~box数は `widows$p の値~以上である

◎ Breaking at a class B break point is allowed only if the number of line boxes between the break and the start of the enclosing block box is the value of orphans or more, and the number of line boxes between the break and the end of the box is the value of widows or more.

規則 4

加えて，［ `B類~分断点$ ／`C類~分断点$ ］においては、［ どの先祖も，その `break-inside$p の値は `auto$v0 をとる ］場合に限り，分断が許容される。 ◎ Additionally, breaking at class B or class C break points is allowed only if the break-inside property of all ancestors is auto.

上の拘束により，［［ 内容が`断片容器$から~overflowしない ］ように保つに十分な分断点 ］が供されない場合、 更に分断点を供するため，規則 3 が外される ◎ If the above doesn’t provide enough break points to keep content from overflowing the fragmentainer, then rule 3 is dropped to provide more break points.

それでも，分断点が不足なら、 追加的な分断点を見出すために，規則 1, 2, 4 が外される。 この場合、 ~UAは，新たな分断点の適切さを~~評価するために，［ それらの地点に効果を及ぼす `avoid^v ］を利用してもヨイ。 しかしながら、 この仕様は，その精確な~algoについては示唆しない。 ◎ If that still does not lead to sufficient break points, then rules 1, 2 and 4 are dropped in order to find additional breakpoints. In this case the UA may use the avoids that are in effect at those points to weigh the appropriateness of the new breakpoints; however, this specification does not suggest a precise algorithm.

それでもまだ，分断点が不足なら、 `~cloneされ$た［ ~margin／~border／~padding ］の`塊-終端$ 側が切落され、 それでも不足なら，その`塊-始端$ 側も切落される。 ◎ If even that does not lead to sufficient break points, cloned margins/border/padding at on the block-end side are truncated; and if more room is still needed, cloned margins/border/padding are truncated at the block-start side as well.

最終的に、［ `断片容器$の始めから終わりまでアリな分断点が無い, かつ 内容すべてが`断片容器$に収まり切らない ］場合には、 ~UAは，`断片容器$の辺から内容がはみ出ないように，任意の所で分断してもヨイ。 そのような場合、 ~UAは，`単体的$な要素の~graphic表現を断片に切分けて，その内容を断片化してもヨイ。 しかしながら、 ~UAは，~pageの上端の所で分断しないモノトスル — すなわち，内容の進行を保証するため、 どの`断片容器$にも，少なくとも何らかの内容を配置するモノトスル。 ◎ Finally, if there are no possible break points below the top of the fragmentainer, and not all the content fits, the UA may break anywhere in order to avoid losing content off the edge of the fragmentainer. In such cases, the UA may also fragment the contents of monolithic elements by slicing the element’s graphical representation. However, the UA must not break at the top of the page, i.e. it must place at least some content on each fragmentainer, so that each fragmentainer has a non-zero amount of content, in order to guarantee progress through the content.

4.5. 非強制d分断の最適化-法

~CSSは、［ `断片化~文脈$における`断片容器$の~overflowを避けるため、 `断片~化~flow$は，許容される分断点にて分断するモノトスル ］と要求するが，［ 特定0の`許容される分断$にて，内容を分断するかどうか ］は定義しない。 しかしながら、 ~UAには，次の指針を~~順守することが推奨される（それらには、 所々で矛盾もあることを認識した上で）： ◎ While CSS requires that a fragmented flow must break at allowed break points in order to avoid overflowing the fragmentainers in its fragmentation context, it does not define whether content breaks at a particular allowed break. However, it is recommended that user agents observe the following guidelines (while recognizing that they are sometimes contradictory):

• 分断はアリな限り少なくする。 ◎ Break as few times as possible.
• `強制d分断$で終端しないような，すべての`断片容器$は、 等量の内容で埋まるように現れさせる。 ◎ Make all fragmentainers that don’t end with a forced break appear to be equally filled with content.
• `置換d要素$の内側では、 分断するのを避ける。 ◎ Avoid breaking inside a replaced element.

~CSSにおいては、 次の要件も追加的に課される： ~size 0 の`~box断片$は、 空間を占めないので — 【直前の内容が】`断片容器$の中に収まるならば — 当の`断片化~分断$の前~側に現れるモノトスル。 ◎ Additionally, CSS imposes one requirement: a zero-sized box fragment, since it does not take up space, must appear on the earlier side of a fragmentation break if it is able to fit within the fragmentainer.

注記： ~size 0 の`~box断片$は、 断片容器を~overflowする内容の直後に配置された場合には，次の`断片容器$へ追出されることになる。 ◎ Note: A zero-sized box fragment will be pushed to the next fragmentainer if it is placed immediately after content that itself overflows the fragmentainer.