CSS3

プロパティ

break-before、break-after

→●、mdn

ボックス前／後の分断設定。

これらのプロパティは、生成されたボックスの前後における［ページ／column／region］分断のふるまいを指定する：

• 次に挙げる 分断強制値 は、フローにおいて強制分断を作成する：
  always、all、left、right、recto、verso、page、column、region
• 一方、次に挙げる 分断回避値 は、前後の内容が一緒に保たれるべきであることを指示する：
  avoid、avoid-page、avoid-column、avoid-region

break-before／break-after 用の各種 値は、以下の下位節にて定義される。ユーザー エージェントは、これらのプロパティを、断片化根の通常フローの中のボックスに適用するものとする。また、［包含ブロックが断片化された根要素の通常フローの中にあるような、浮動ボックス］にも適用するべきである。ユーザー エージェントは、これらのプロパティを他のボックスにも適用してよいが、絶対的に位置されたボックスには適用しないものとする。

以下における、主要ボックス とは、当の要素が生成するブロックレベルの 主要ボックス を意味する。この節の以下における“前／後”は、個別に break-before／break-after に対応するものとする。

各種 汎用分断値

以下に挙げる値は、［当のフローを包含している断片化文脈］の型に関わらず、効果を及ぼす。

auto

主要ボックスの前／後における分断を、強制も禁止もしない。

avoid

主要ボックスの前／後における分断を、避ける。

always

主要ボックスの前／後における分断を、常に強制する。この型の分断は、それを直に包含している断片化文脈のそれになる。【すなわち、断片化文脈を包含している断片化文脈の分断にはならない。】 例えば、複 column コンテナにおいては column 分断を強制し、ページ化媒体においては 複 column コンテナの内側でないならばページ分断を強制する。

all

主要ボックスの前／後における分断を、常に強制する。この値は、包含している断片化文脈のすべてを通して分断する。例えば、ページ化媒体内の複 column コンテナ内の region 内の複 column コンテナの内側に強制すると同時に、［内縁複 column コンテナ内の column 分断、region 分断、外縁複 column コンテナ内の column 分断、ページ分断］も強制する。

この値は必要なのか明瞭でない。

各種 ページ分断値

以下に挙げる値の効果は、ページ割りされた文脈に限られる ─ 他の文脈下のフローには、効果はない。

avoid-page

主要ボックスの前／後におけるページ分断を、避ける。

page

主要ボックスの前／後におけるページ分断を、常に強制する。

left

主要ボックスの前／後において、1～2 個のページ分断を強制して、次のページが左ページとして整形されるようにする。

right

主要ボックスの前／後において、1～2 個のページ分断を強制して、次のページが右ページとして整形されるようにする。

recto

主要ボックスの前／後において、1～2 個のページ分断を強制して、次のページが［左ページ、右ページ のうち（ページ進行に則って）ページ見開きの後半ページ］として整形されるようにする。

verso

主要ボックスの前／後において、1～2 個のページ分断を強制して、次のページが［左ページ、右ページのうち（ページ進行に則って）ページ見開きの前半ページ］として整形されるようにする。

各種 column 分断値

以下に挙げる値の効果は、複 column 文脈に限られる ─ 他の文脈下のフローには、効果はない。

avoid-column

主要ボックスの前／後における column 分断を、避ける。

<DIV style="column-count:2; width:150px; border:1px solid black">
 開始<P style="border:1px solid black;
 font-size:20px;
 ">aaa</P>終了
</DIV>

<DIV style="column-count:2; width:150px; border:1px solid black">
 開始<P style="border:1px solid red;
 break-before:avoid-column;
 font-size:20px;
 ">aaa</P>終了
</DIV>

¶

column

¶段組にて、主要ボックスの前／後における column 分断を、常に強制する。

<DIV style="border:1px solid black; width:300px;
 column-count:2;
">
 <H2 style="border:1px solid black;
">H2</H2>
 <DIV>aaa bbb ccc dddd</DIV>
 <H2 style="border:1px solid black;
">H2</H2>
 <DIV>aaa bbb ccc dddd</DIV>
</DIV>

指定なしの場合

<DIV style="border:1px solid black; width:300px;
 column-count:2;
">
 <H2 style="border:1px solid red;
 break-before:column;
">H2</H2>
 <DIV>aaa bbb ccc dddd</DIV>
 <H2 style="border:1px solid red;
 break-before:column;
">H2</H2>
 <DIV>aaa bbb ccc dddd</DIV>
</DIV>

各種 region 分断値

以下に挙げる値の効果は、複 region 文脈に限られる ─ 複数 region に渡ってリンクされていないフローには、効果はない。

avoid-region

主要ボックスの前／後における region 分断を、避ける。

region

主要ボックスの前／後における region 分断を、常に強制する。

テスト