如何定义CSS类以横向模式设置打印页面？ [英] How can I define a CSS class to set the printed page in landscape mode?
问题描述
我创建了一个CSS样式表，可以使用以下@media规则以横向模式打印HTML页面：
I have created a CSS style sheet which can print an HTML page in landscape mode using the following @media rule:
@media print{
@page {size: landscape;}
}
我不想打印以横向模式加载此样式表的所有 HTML网页。理想情况下，我希望能够指定一个可以执行此操作的横向类。
I do not want to print all HTML pages which load this style sheet in landscape mode. Ideally, I'd like to be able to specify a landscape class which would do this.
生成HTML时，我总是可以创建一个独立的landscape.css文件并根据需要将它附加到标题，但我希望可能有一个更干净的方法来做这个类。
As the HTML is generated, I could always create a separate landscape.css file and append it to the header as needed, but I was hoping that there might be a cleaner way to do this with classes.
作为一个后续，我也试过以下没有运气：
As a follow-up, I also tried the following with no luck:
@page rotated {
size: landscape;
}
@media print{
.rotate {
page: rotated;
}
}
我可能只是把我的头撞在墙上一个只在基于webkit的浏览器中工作的解决方案。
I am probably just beating my head against a wall for a solution that only appears to work in webkit based browsers. The @page size: landscape setting does not appear to work in Firefox or (surprise, surprise) ie10.
推荐答案
不幸的是，我们目前无法利用页面类型选择器进行超出提供的：left ，：right ，：first 和：blank 伪类。
Unfortunately, we are currently unable to utilize page type selectors for media queries beyond the supplied :left, :right, :first, and :blank pseudo-classes.
https://www.w3.org/TR/css3-page/#页面选择器和上下文
然而，W3C考虑为未来级别的CSS添加其他页面伪类[ @page：nth（4）{...} 或 @page（.class）{...} ]。我不知道为什么名称网页无法工作，但截至2016年1月26日，第4级媒体查询（包括 @page 规则）可能包括范围，否定和自定义使用脚本的媒体查询。此外，目前只有Chrome支持size属性。
The W3C is however considering the addition of other page pseudo-classes for future levels of CSS [@page :nth(4) { ... } or @page (.class) { ... }]. I'm not sure why named pages were not able to work, but as of Jan 26, 2016, level 4 media queries (including the @page at-rule) may include ranges, negation, and custom media queries using scripting. Further, the size property is currently only supported in Chrome.
https://www.w3.org/TR/mediaqueries-4/
这是我能够使用的最近的只是HTML和CSS，它将横向定向应用于偶数页面。我知道这不是一个确切的解决方案，它只适用于Chrome。
This is the closest I was able to get using just HTML and CSS, which applies landscape orientation to even-numbered pages. I know this isn't an exact solution, and it only works in Chrome.
<html>
<head>
<style>
.landscape {
page-break-before: always;
}
@page :left {
size: landscape;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="landscape">This is in landscape form, following a page break.</p>
</body>
</html>
这篇关于如何定义CSS类以横向模式设置打印页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
