最近在写一个typora主题以方便我写实验报告。CSS不仅可以用作指定网页样式,还可以用来指定打印时的一些选项,具体就是用 @media print 和 @page 啦,还有一些属性比如page-after-break是只在打印时起作用的。
这样我就可以实现typora里现在还没有的分页功能,官网教程里也是这么说的,插入一句
<div style="page-break-after:always;"></div>
即可。
但是我想让这个“分页符”在编辑模式下可见,于是我写了如下CSS代码:
@media print {
#write .page-break {
display: none;
page-break-after: always;
}
}
然后在要分页的地方插入
<hr class="page-break">
这样在编辑时这个hr是可见的水平线,而打印时则是不显示的。
结果生成的pdf文件里此处并未分页……
我折腾了一番,百思不得其解,于是用typora导出html文件,发现居然自动把
page-break-after: always;
替换成了
break-after: page;
我估计这是pandoc的锅?但是为啥break-after属性不管用呢……
然后我找到了break-after文档
break-afterdeveloper.mozilla.org![f233a9f489376f885d2de29854b77968.png](https://i-blog.csdnimg.cn/blog_migrate/2ac4d62b8f806ce8eb0fd15286b8b696.jpeg)
按它所说break-after是page-break-after的升级版,为什么不管用呢……
里面有关键的一句:
![479a4a6b2370ee794d2832f70716081d.png](https://i-blog.csdnimg.cn/blog_migrate/7cb3ac19eae7a9fa17f0830e2f50cb67.jpeg)
当时我看到这句话还没注意,晚上躺在床上苦思冥想时才忽然明白,是
display: none;
这一句出了问题!没有显示,自然没有产生一个box,就没有分页了……
去掉这一句,换成
visibility: hidden;
这样只是不显示,但是对布局的影响还在,换句话说就是还有一个透明的box。果然,成功产生了分页效果。
这样看来break-after并不能完全兼容page-break-after,是个坑。
另外吐槽一下typora,在里面写html语句,效果并不能实时显示出来,非得导出pdf或html文件才行,因为编辑器在把输入即时转换为html代码时会把class属性抹掉……