【JavaScript】ページ分割時に要素の下部へ残す最小行数を設定する方法

JavaScriptでページ分割時の最小行数を設定するには？

要素内で改ページ（ページ分割）が発生した際に、ページの下部に最低限残しておくべき行数を指定するには、JavaScriptのorphansプロパティを使用します。このプロパティはCSSのorphansプロパティに対応しており、特に印刷時のレイアウト崩れを防ぎたい場合に役立ちます。

orphansプロパティの値を取得する

現在設定されているorphansプロパティの値は、以下のようにして取得できます。

var res = object.style.orphans

orphansプロパティの値を設定する

orphansプロパティに値を設定するには、次のように記述します。

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

プロパティ値の一覧

上記で設定できるプロパティ値は以下のとおりです。

• number − ページ下部に表示させる必要のある最小行数を指定します。
• initial − プロパティをデフォルト値に戻します。
• inherit − 親要素からプロパティの値を継承します。

使用例

たとえば、特定の要素に対して最小2行をページ下部に残したい場合は、次のように記述します。

document.getElementById("myParagraph").style.orphans = "2";

このように設定することで、要素内で改ページが発生しても、少なくとも指定した行数が前のページの下部に残るため、読みやすいレイアウトを維持できます。なお、類似のプロパティとして、ページ上部に残す最小行数を制御するwidowsプロパティも併せて活用すると、よりきめ細かい印刷レイアウトの調整が可能です。