分页： 1 / 1
请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-24 12:37
由 alober
如题。假设现在有一页 index.html 需要打印，分两页，第一页要求是横向，第二页要求是纵向。
代码： 全选
@page {
size: A4 landscape;
}
两页间已经使用 page-break-before: always; 输出了换页符。
像上面这样加到 style 中，只能全局设置。请教这个能做到部分设置吗？
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-24 19:57
由 astolia
可以用伪类来限制作用范围
https://developer.mozilla.org/zh-CN/doc ... A%E4%BE%8B
第一页横，后面的页纵
代码： 全选
@page :first {
size: A4 landscape;
}
@page {
size: A4 portrait;
}
奇数页横，偶数页纵
代码： 全选
@page :right {
size: A4 landscape;
}
@page :left {
size: A4 portrait;
}
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-25 10:05
由 alober
谢谢。加入这个 css 后，以 opera 56.0.3051.52 为例，按 Ctrl+P 组合健，打印时有个“布局”的选项，虽然在这里选择了第一页为横向，但在 opera 里还是可以调成纵向。
现在假设不作任何调整，当打印完第一页（默认保持横向）时，对第二页，如果不采取手动调整 opera 的布局为纵向，它仍然不能识别出纵向，而是保持了第一页的横向。
如果手动调整了第二页为纵向，它还会记忆这个调整，下次刷新时，再按 Ctrl+P，第一页也不会变为 css 中设置的横向，而是记忆了上次选择的纵向。
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-26 9:51
由 astolia
你这个是opera的问题。chromium 70上不需要你手动设置什么
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-26 12:12
由 alober
astolia 写了： ↑2018-10-26 9:51
你这个是opera的问题。chromium 70上不需要你手动设置什么
谢谢，我在客户机的 windows 7-64bit 上安装了以下浏览器来测试：
Chrome 70.0.3538.77
Opera 56.0.3051.52
Firefox 63.0 (64 位)
结果都是需要手工调整。
以下是我做测试的 html，每次按下 Ctrl+P，都是第一页和第二页方向相同。请问我是在哪里做错了呢？
代码： 全选
<!DOCTYPE html>
<html>
<head>
<style>
@page:first {
A4 landscape;
margin: 1cm 0;
}
@page {
A4 portrait;
margin: 1cm 0;
}
.page_1 {
width: 282mm;
height: 200mm;
border: 1px solid black;
}
.page_2 {
width: 200mm;
height: 282mm;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="page_1">
第一页
</div>
<div class="page-landscape" style="page-break-before: always;">
<div class="page_2">
第二页
</div>
</body>
</html>
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-26 17:14
由 astolia
你css写错了啊
@page :first {
size: A4 landscape;
}
@page {
size: A4 portrait;
}
另外firefox不支持size属性，所以这个在firefox上没用
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-26 20:04
由 alober
astolia 写了： ↑2018-10-26 17:14
你css写错了啊
@page :first {
size: A4 landscape;
}
@page {
size: A4 portrait;
}
另外firefox不支持size属性，所以这个在firefox上没用
谢谢。唉，错在这个问题上。
再问一下，如果有多页，能不规则地指定方向吗？比如 1，2，3 页，想指定 1，2 页横向，3页纵向。又或者 1，2，3，4，5 页，想指定 3 页横向，其它页纵向。这个在伪类里能做到吗？应该是用nth-child这个吧，一会试试看。
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-26 23:43
由 astolia
我在二楼专门把文档链接都给你了，看起来你也没去看一眼。文档上写清楚了，@page能用的伪类就只有6个，其中2个还是实验性的不推荐用
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-27 7:58
由 alober
astolia 写了： ↑2018-10-26 23:43
我在二楼专门把文档链接都给你了，看起来你也没去看一眼。文档上写清楚了，@page能用的伪类就只有6个，其中2个还是实验性的不推荐用
谢谢。其实去看了那个文档，只是看的时候说是示例，以为只是举了其中几个例子，没有举全。后来尝试了其它伪类，确实是用不了。
之后在网上还找到一个方案，是用的
代码： 全选
@page section {
size: A4 landscape;
}
@page table {
size: A4 portrait;
}
然后在正文中用 section 和 table 分别决定纵横。但也没起作用。
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-27 10:40
由 astolia
文档中的中文翻译有点问题。上面的正式语法中就只列了4种正式伪类
这种写法显然是错的。本来该是@page的size属性，你这样写就成了section/table的size属性
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-27 12:53
由 alober
astolia 写了： ↑2018-10-27 10:40
文档中的中文翻译有点问题。上面的正式语法中就只列了4种正式伪类
这种写法显然是错的。本来该是@page的size属性，你这样写就成了section/table的size属性
哦，我记错了，应该是下面这个 css
代码： 全选
@page landscape {
size: A4 landscape;
}
@page portrait {
size: A4 portrait;
}
section {
/**/
page: landscape;
}
table {
/**/
page: portrait;
}
然后在正文中用 section 和 table。不过这个没起作用。
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-27 18:57
由 astolia
这种命名页的用法只存在于w3c标准草案里，没有哪家浏览器是支持了的
Re: 请教在 一页html中，能不能用 css 控制两种打印方向？
发表于 ： 2018-10-27 22:01
由 alober
astolia 写了： ↑2018-10-27 18:57
这种命名页的用法只存在于w3c标准草案里，没有哪家浏览器是支持了的
谢谢。看来目前是不能实现不规则的页面布局了，好在目前只有两页要打印，之前的方案已经完全够用了。