JavaScriptでページ上部に表示すべき要素の最小行数を設定する方法（orphansプロパティ）

JavaScriptのorphansプロパティを使用すると、印刷時などに改ページが発生した際、ページの上部（先頭）に必ず表示しなければならない要素の最小行数を設定できます。段落の途中で改ページされても、次のページに最低限残す行数をコントロールできるため、印刷レイアウトの品質を保ちたい場合に非常に便利です。

orphansプロパティとは

orphansはCSSのプロパティの一つで、ブロックコンテナ内で改ページが起こったときに、新しいページの先頭に少なくとも表示されるべき行数を指定します。指定できる値は以下の通りです。

• number：ページ先頭に表示する最小行数を正の整数で指定します。
• initial：プロパティを初期値に戻します。
• inherit：親要素から値を継承します。

orphansプロパティを取得する方法

対象となる要素に対して、以下のように記述することで現在のorphansの値を参照できます。

document.getElementById("p").style.orphans

また、変数に格納して利用することも可能です。

var res = object.style.orphans;

orphansプロパティを設定する方法

最小表示行数を変更したい場合は、以下の構文で値を代入します。

object.style.orphans = 'number|initial|inherit'

例えば、ページの先頭に最低3行を表示させたい場合は、object.style.orphans = "3"; のように指定します。

widowsプロパティとの組み合わせ

orphansと対になるのがwidowsプロパティです。widowsはページの下部に表示する最小行数を制御します。この2つを組み合わせて設定することで、改ページによる見出しや文章の分断を防ぎ、読みやすく美しい印刷レイアウトを実現できます。