用于打印HTML的不同页面方向 [英] Different page orientation for printing HTML
问题描述
我尝试使以下简单的HTML页面工作：
I try to make the following simple HTML page work:
<html>
<head>
<style type="text/css">
@media print
{
@page port { size: portrait; }
.portrait { page: port; }
@page land { size: landscape; }
.landscape { page: land; }
.break { page-break-before: always; }
}
</style>
</head>
<body>
<div class="landscape">
<p>This is a landscape page.</p>
</div>
<div class="portrait break">
<p>This is a portrait page.</p>
</div>
</body>
</html>
问题：
第一个div的内容放在第一页，横向，第二个放在纵向模式。但是，所有浏览器（Chrome，Opera，Safari，IE10）都会打印两个纵向页面。我错过了什么或没有浏览器支持这种功能吗？在后一种情况下，有没有任何替代方法来实现这个结果？
Question:
I want to print the first div's content onto the first page, with landscape orientation, and the second one with portrait mode. However, all browsers (Chrome, Opera, Safari, IE10) print two portrait pages. Did I miss something or do none of the browsers support this kind of feature yet? In the latter case is there any alternative to achieve that result?
推荐答案
一个快速和脏的黑客将旋转div意味着使用CSS3或过滤器在90度风景中。以下工作方式：
A quick and dirty hack would be to rotate the div that is meant to be in landscape by 90 degrees using CSS3 or filters. The following would work:
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
目前没有任何简单的方法可以以任何其他方式做到这一点，因为 size CSS指令只能由一个浏览器（Opera）实现，但仍然是当前草稿的一部分（是@ page {size：landscape}已过时吗？已弃用， http://www.w3.org/TR/css3-page/#page-size ）。
There is currently no easy way to do this in any other way, as the size CSS directive is only implemented by one browser (Opera), but is nevertheless part of the current drafts ( Is @Page { size:landscape} obsolete? for the deprecation, http://www.w3.org/TR/css3-page/#page-size for the spec).
下一个最便宜的黑客是我上面提到的：把你的HTML出来在肖像...和旋转90度使用CSS3。
The next cheapest hack is what I mentioned above: lay your HTML out on a portrait...and rotate by 90 degrees using CSS3.
这篇关于用于打印HTML的不同页面方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
