page-orientation
page-orientation は CSS の記述子で、@page アットルールで使用され、出力されるページの回転を制御します。ページの向きが変更された場合に、ページ間のコンテンツのフローを処理します。この動作は、ページを回転させる方向をユーザーが定義できる点で、size 記述子とは異なります。
この記述子は、特に文書が両面印刷される場合、印刷される文書のレイアウトや方向を決定するのに役立ちます。ユーザーは、印刷時にページがどのように回転されるかを指定することができます。これは、他のコンテンツよりも幅の広い表などのコンテンツを、異なる方向でレイアウトする場合に特に便利です。
メモ: マージンボックスと他の位置指定要素は、この記述子とは特別な操作を行いません。マージンは、回転されていないページで通常どおりレイアウトされ、他の要素とともに回転されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 85 | 85 | 122 | | 85 | | |
基本構文
CSS
@page landscape-page {
size: A4;
page-orientation: rotate-right;
}
.wide-table {
page: landscape-page;
}ライブデモ
実務での使いどころ
-
特定ページの横向き表示
幅広の表やグラフを含むページだけを横向きに回転させ、印刷レイアウトを最適化します。
注意点
- 現時点ではブラウザサポートが限定的なため、重要な印刷レイアウトではフォールバックを検討してください。
アクセシビリティ
- ページの向きが変わることで読み順序が混乱しないよう、コンテンツの論理的な流れを維持してください。