@page { size: A4 landscape }で印刷時の向きを指定したいのですが、横と縦使い分けるときはどうすれば良いですか？

Question

ページによってwindow.print()が実行された際の向きを変えるようにしたいです。

しかし別の場所でportraitで　指定していると縦になってしまったりするのでどうすればページによってportraitかlandscapeを使い分けることができるでしょうか？

@page { size: A4 landscape }

基本的なことかもしれませんがご教示いただけると幸いです。

Answer 1

@page 名前とpage: 名前を組み合わせることで可能なようです。

ちょうどW3Cのドラフトにあった例がぴったりなので引用します。

@page narrow { size: 9cm 18cm }
@page rotated { size: landscape }
div { page: narrow }
table { page: rotated }

<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>

Comments

[Hayato1201]

ご回答ありがとうございます！！
やりたいこととして、同じページに印刷ボタンが二つあって、片方を押した時は同じページのある部分を、もう片方を押した時は同じページの別部分をそれぞれ縦と横で印刷するようにしたいです。（片方を印刷する際にはDOMから対象以外を消すようにする）
こちらの方法で名前を指定したのですが、同じページ上だとやはり片方が優先されてしまいます。
!importantなどで対応できるかと思いましたがこちらはうまくいきませんでした。

何か良い方法はないでしょうか・・・・

[maisumakun]

印刷ボタンを押したときに適用するCSSを切り替える、ような手段は取れませんか？

[Hayato1201]

ありがとうございます、どうにか切り替えることでできました！