CSSのorphans・widowsプロパティとは？ページ区切り時の行数を制御する方法

組版用語としての「orphans（孤行）」と「widows（寡行）」

組版（タイポグラフィ）の世界では、orphans（孤行）はページ区切りの影響で段落の末尾部分が次のページの下部に取り残された行を指し、widows（寡行）はページ区切りの後に前のページから送られてきて、新しいページの上部にぽつんと残ってしまう行を指します。

印刷物において、ページの最上部や最下部にテキストが1行だけ孤立している状態は、一般的に見た目が美しくありません。そのため、多くの印刷業者は各ページの上下に少なくとも2行以上のテキストを残すように調整します。

orphansプロパティとwidowsプロパティの役割

CSSでは、この問題を制御するために以下の2つのプロパティが用意されています。

• orphans：ページ区切りが発生した際に、段落のうち前のページの下部に残す必要がある最小行数を指定します。
• widows：ページ区切りが発生した際に、段落のうち次のページの上部に送る必要がある最小行数を指定します。

指定例

たとえば、各ページの下部に最低4行、上部に最低2行を残したい場合は、次のように@pageルール内で指定します。

<style>
<!--
    @page {
        orphans: 4;
        widows: 2;
    }
-->
</style>

補足ポイント

これらのプロパティは主に印刷やPDF出力など、コンテンツが複数の「ページ」に分割される場面で効果を発揮します。画面表示では通常ページ区切りが発生しないため、@media printなどの印刷用スタイルと組み合わせて使うのが一般的です。値には正の整数を指定し、既定値はどちらも「2」となっています。