break-before
CSS の break-before
プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。
/* 一般の区切り値 */
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;
/* 改ページ値 */
break-before: avoid-page;
break-before: page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;
/* 段区切り値 */
break-before: avoid-column;
break-before: column;
/* 領域区切り値 */
break-before: avoid-region;
break-before: region;
/* グローバル値 */
break-before: inherit;
break-before: initial;
break-before: unset;
区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の break-after
の値、次の要素の break-before
の値、包含要素の break-inside
の値です。
区切られるかどうかを判断するために、以下の規則が適用されます。
- 考慮される三つの値の中の何れかに区切りを強制する値 (
always
,left
,right
,page
,column
,region
の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、break-before
の値はbreak-after
の値より優先し、それは更にbreak-inside
よりも優先します)。 - 考慮される三つの値の中に区切りを防止する値 (
avoid
,avoid-page
,avoid-region
,avoid-column
の何れか) が含まれていた場合は、その場所で区切りは適用されません。
強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 avoid
に関する値に解決される要素の境界には追加されません。
初期値 | auto |
---|---|
適用対象 | ブロックレベル要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
構文
break-before
プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
値
一般の区切り値
auto
- 該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
avoid
- 該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
always
- 該当するボックスの直前で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。
all
- 該当するボックスの直前で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。
改ページ値
avoid-page
- 該当するボックスの直前の改ページを禁止します。
page
- 該当するボックスの直前で改ページを行います。
left
- 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページになるようにします。
right
- 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページになるようにします。
recto
- 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
verso
- 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)
段区切り値
avoid-column
- 該当するボックスの直前の段区切りを禁止します。
column
- 該当するボックスの直前で段区切りを行います。
領域区切り値
avoid-region
- 該当するボックスの直前の領域区切りを禁止します。
region
- 該当するボックスの直前で領域区切りを行います。
形式文法
auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
改ページの別名
互換性のため、古い page-break-before
はブラウザーから break-before
の別名として扱われます。これにより、 page-break-before
を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
page-break-before | break-before |
---|---|
auto |
auto |
left |
left |
right |
right |
avoid |
avoid |
always |
page |
ブラウザーにおいては always
の値は page-break-*
において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では always
の値ではなく page
の別名となっています。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Fragmentation Module Level 3 break-before の定義 |
勧告候補 | recto および verso キーワードを追加。このプロパティのメディア種別を paged から visual に変更。異なる種類の区切りを持つ区切りアルゴリズムを定義した。 |
CSS Regions Module Level 1 break-before の定義 |
草案 | 領域区切りを扱うようにプロパティを拡張した。 avoid-region および region キーワードを追加した。 |
CSS Multi-column Layout Module break-before の定義 |
草案 | 初回定義。 CSS 2.1 の page-break-before プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。 |
ブラウザーの対応
段組みレイアウトでの対応
BCD tables only load in the browser
ページ化メディアでの対応
BCD tables only load in the browser