orphansプロパティの説明
CSSのorphansプロパティは、ページや段組みカラムの最下部に表示されるブロックの最小行数を制御します。オルファン（orphan）とは、組版で使われる用語で、段落の最初の行がページの末尾に単独で現れることを意味します。ページに入り切らなかった内容は、次のページに続きます。
ウェブページにおいて、ページや段で区切られた要素は断片化したものとして処理されます。この状態をフラグメントと言います。断片化した要素は、意図しない挙動やレイアウトの崩れを引き起こすため、CSSで事前に制御することが、このプロパティの目的です。
似たような機能にwidowsがあります。こちらは、ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定します。
orphansに指定できる値
<'column-count'>- ページや段の末尾で区切られる段落の断片に表示する最小行数を指定します。使用できる値は正数です。
orphansの使い方とサンプルコード
orphansプロパティの構文は以下の通りです。
/* <integer>値 */
orphans: 1;
orphans: 3;
orphans: 5;
/* グローバル値 */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: unset;
orphansの実例
それでは実際にorphansプロパティの書き方を見ていきましょう。以下の例は、3つの段に分けたカラム要素に長い文章を置いた場合の比較です。区切りの直前に何行まで残すのかを指定しています。
resizeに対応しているブラウザであれば、コンテナの幅を変えられます。極端な寸法まで縮めると、指定された行数を超えることがあります。この制限が万能ではないことを表しています。実際の運用で使用する前に効果範囲を確かめておきましょう。
<section class="samp_box">
<div id="orp_2">
<h2>orphans: 2;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。まみむめもやゆよ。わをん。</p>
</div>
<div id="orp_3">
<h2>orphans: 3;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。まみむめもやゆよ。わをん。</p>
</div>
<div id="orp_4">
<h2>orphans: 4;</h2>
<p>あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。まみむめもやゆよ。わをん。</p>
</div>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
resize: horizontal;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
columns: 3 auto;
column-rule: 1px solid #999;
}
#orp_2 {
orphans: 2;
}
#orp_3 {
orphans: 3;
}
#orp_4 {
orphans: 4;
}