CSSプロパティ「widows」「orphans」ってなんだ?印刷用プロパティを知ろう

こんにちは、印刷用のCSSプロパティのご紹介です。
「widows」や「orphans」って使ったことありますか?

windowsのタイプミスじゃないですよ。
ウィドーとは直訳すると「未亡人」という意味で、オーファンは直訳すると「孤児」となります。

どんなプロパティ?

  • widows – 前ページから続く段落の終わりとなるページ最上部に残された孤立行を意味します
    • 改ページされる際の次ページの最低行数を指定する
  • orphans – 次ページへと続く段落の始まりとなるページ末尾に残された孤立行を意味します
    • 改ページされる際の前ページの最低行数を指定する

という感じです。

どちらも行数を整数値で指定(デフォルトは2)し、印刷するときの改ページ整理に使います。

印刷だけじゃない、スクリーンでも有効活用

Screen Shot 2014-11-17 at 15.36.23
ニュースサイトのように、列が2列になる文字組をした場合にもこのプロパティで設定可能です。

使用例
  • 上のキャプチャのCSSとは少し異なります
  • Sassで記述しています
$black: #333;
html{
     font-size: 13px;
}
.container{
     width: calc(100% - 200px);
     height: calc(100% - 200px);
     padding: 100px;
     position: relative;
     overflow: hidden;
     div#text-area{
          height: 100%;
          -webkit-column-count: 4;
          -webkit-column-gap: 2rem;
          p{
               line-height: 2rem;
               color: $black;
               orphans:3;
               widows: 3;
          }
     }
}

ちなみにcolumn-countというプロパティで2行にカラム化できます。remという単位はroot+emで、htmlにかかった最上位(root)の大きさを継承する相対単位です。オススメ。

まとめ

なかなかプリント用のCSSまで設定することは少ないかもしれません。
ユーザーの動線として「印刷」という利用ケースがある場合は、この辺りまで配慮されていると素敵です。またご紹介したカラムレイアウトでは有効活用できるので是非お試しください!

参考:
demosthenes.info – CSS last-line: Controlling Widows & Orphans

フォローして続編をチェック

@universionsをフォロー