ARTICLE AD BOX
Why that's not a bug but a feature:
https://www.w3.org/TR/css-page-3/#page-size
If a size property declaration is qualified by a width, height, device-width, device-height, aspect-ratio, device-aspect-ratio or orientation media query (or other conditional on the size of the paper), then the declaration must be ignored. Media queries do not honor size: they assume the paper size that would be chosen if no @page rules were specified.
In short, the very last sentence clearly states:
Media queries do not honor size: they assume the paper size that would be chosen if no @page rules were specified.
So this is not a browser bug — it is actually the specified behavior. Media queries are deliberately designed to ignore @page { size }. They evaluate against the UA's default paper size as if no @page rules existed at all.
Interestingly, the spec itself acknowledges this is unsatisfactory. Right after that rule there's an editorial note saying:
It would be useful if media queries could respond at least to sizes specified on an unqualified @page.
The circularity issue (the @page size depending on the media query, and the media query depending on the @page size) is maybe why they punted and said media queries simply don't see @page size at all.
Anyway even if the case discussed here in this question doesn't hold any ambiguity, yet it's dismissed by the general rule.
How to handle it:
Now to properly answer the question you asked in the title:
How to adjust CSS based on orientation during printing?
With the question stated as that, the way you did it's exactly the right way:
@media print and (orientation: landscape) { /* your style */ }But it will work only as long as the orientation is not coming from the @page size rule since it won't be honored, but it's decided by the user through the print dialog.
It's important to stress that if you have a @page size rule, it will specify a page orientation whether you did it or not, and it will force that one, preventing the user to pick its custom choice. If that value won't match with the UA default value, it won't be honored by the media query preventing the style to be applied. That's true because the rule to evaluate media queries, like if no @page rules existed at all, still stands.
That's why this styling would work instead:
@page { size: a4 portrait; } @media print and (orientation: portrait) { /* your style */ }Because the media query is not honoring the @page size rule but just because it happens to match with the UA default and despite you forced the orientation preventing to user to pick another one, it still matches with the orientation that the media query is going to honor (the UA default and not strictly the @page size).
So how would you achieve your goal to force the paper orientation during printing and yet having that specific style?
Just specify the @page size: landscape rule and strip off the orientation condition from the media query so you won't hit that case where it will fail since it can't honor the @page size and be dimissed:
@page { size: a4 landscape; } @media print { /* your style */ }Don't forget that saying you want landscape orientation will prevent the user to pick the portrait option so it's pointless to support a different style since portrait can't occur anymore.
