css3 – 如何定义CSS类以横向模式设置打印页面？

我创建了一个CSS样式表,可以使用以下@media规则以横向模式打印 HTML 页面：

@media print{
      @page {size: landscape;}
    }

我不想打印所有加载样式表的HTML页面在横向模式.理想情况下,我想要指定一个会这样做的景观类.

随着HTML的生成,我可以随时创建一个单独的landscape.css文件,并根据需要将其附加到头部,但是我希望有一个比较简单的方法可以使用类.

作为后续行动,我也没有运气尝试以下：

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}

我可能只是在墙上跳动,只能看到在基于Webkit的浏览器中工作的解决方案. @page size：景观设置在Firefox中看起来不起作用(或惊喜,惊喜)ie10.

解决方法

不幸的是,我们目前无法使用页面类型选择器来超出以下提供的媒体查询：left,：right,：first,and：blank pseudo-classes.

https://www.w3.org/TR/css3-page/#page-selector-and-context

然而,W3C考虑为未来级别的CSS [@page：nth(4){…}或@page(.class){…}]添加其他页面伪类.我不知道为什么命名页面无法工作,但截至2016年1月26日,第4级媒体查询(包括@page at-rule)可能包括使用脚本的范围,否定和定制媒体查询.此外,目前仅在Chrome中支持size属性.

https://www.w3.org/TR/mediaqueries-4/

这是最接近的,我只能使用HTML和CSS,它将横向适用于偶数页面.我知道这不是一个确切的解决方案,它只适用于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>

css3 – 如何定义CSS类以横向模式设置打印页面？

解决方法

相关文章