page-orientation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

page-orientationCSS の記述子で、 @page アットルールで使用され、出力されるページの回転を制御します。ページの向きが変更された場合に、ページ間のコンテンツのフローを処理します。この動作は、ページを回転させる方向をユーザーが定義できる点で、 size 記述子とは異なります。

この記述子は、特に文書が両面印刷される場合、印刷される文書のレイアウトや方向を決定するのに役立ちます。ユーザーは、印刷時にページがどのように回転されるかを指定することができます。これは、他のコンテンツよりも幅の広い表などのコンテンツを、異なる方向でレイアウトする場合に特に便利です。

メモ: マージンボックスと他の位置指定要素は、この記述子とは特別な操作を行いません。マージンは、回転されていないページで通常どおりレイアウトされ、他の要素とともに回転されます。

構文

css
/* 印刷コンテンツを正立して表示します。 */
@page {
  page-orientation: upright;
}

/* 印刷コンテンツを反時計回りに回転させて表示します。 */
@page {
  page-orientation: rotate-left;
}

/* 印刷コンテンツを時計回りに回転させて表示します。 */
@page {
  page-orientation: rotate-right;
}

upright

方向は適用されず、ページは通常どおりレイアウトおよび書式化されます。

rotate-left

ページがレイアウトされた後、そのページは左に(反時計回りに) 4 分の 1 回転して表示する必要があります。

rotate-right

ページがレイアウトされた後、そのページは右に(時計回りに) 4 分の 1 回転して表示する必要があります。

公式定義

関連するアット規則@page
初期値upright
計算値指定通り

形式文法

page-orientation = 
upright |
rotate-left |
rotate-right

印刷ページを回転

この例では、印刷文書のコンテンツを、ページコンテンツおよびページ位置に合わせて回転させる方法を示します。 CSS コードの最初の部分では、コンテンツを回転させる方向を定義するために、名前付きページが設定されています。

css
@page upright {
  size: portrait;
  page-orientation: upright;
}

@page left {
  size: landscape;
  page-orientation: rotate-left;
}

@page right {
  size: landscape;
  page-orientation: rotate-right;
}

CSS コードの 2 つ目の部分は、 <section class="left">…</section> など、セレクター用に上記で定義した名前付きページルールを宣言します。

css
@media print {
  .upright {
    page: upright;
  }
  .left {
    page: left;
  }
  .right {
    page: right;
  }
}

印刷ボタンをクリックすると、印刷時のページの方向を確認できます。

仕様書

Specification
CSS Paged Media Module Level 3
# page-orientation-prop

ブラウザーの互換性