概况
目前epub的阅读器是以分页形式显示正文的,epub本身是个流式文本(reflowable),根据设备宽度和设置的文本大小,文本会自动换行往下自动顺排,所以页码没有什么意义;当然目前epub3也有固定排版的属性了,这个在后面介绍。
一旦文本排满了屏幕,就会换到下一页继续排版。不过,有的情况下可能需要未排满时强制进行分页,或是有的文本块希望尽量保持到一起,不要分页。
强制分页
这个是阅读器都支持的属性,不过在sigil里不能预览效果。代码如下:
<html>
<head>
<style>
.flip {
page-break-before:always;
}
</style>
</head>
<body>
<h1 class="flip">标题1</h1>
<h1 class="flip">标题2</h1>
</body>
</html>
效果是标题2强制换一页显示。对于page-break-before而言,标题1有这个属性不会有任何影响,因为它前面没有元素了。
page-break-before主要有两个值可用:always和auto(还有avoid、left、right等,阅读器不支持),前者强制分页,后者跟没有写这个属性一样,到屏幕底部自动分页。
还有另一个page-break-after属性,区别是这个在元素之后强制分页。一般我们用before用得更多一点。
避免内部分页
这种情况比上面的需求更迫切。如果你使用了字符样式造出了一个漂亮的整体图案,结果却被阅读器一分为二了,如下图:
看起来非常别扭。我们希望阅读器尽量完整显示灰色方框。
代码如下:
<html>
<head>
<style>
.avoidPageBreak {
page-break-inside:avoid;
}
</style>
</head>
<body>
<div class=”avoidPageBreak”>
<h3 class=”exHead”><span style=”color:gray;”>练习</h3>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
</body>
</html>
使用了page-break-inside属性之后,效果如下:
page-break-inside属性如上面一样,也是avoid和auto两个值,后者相当于不使用这个属性。注意,只有div可以使用这个属性。table应使用break-inside属性。p、code等块标签不支持此属性。
还有一种情况,是图片和配套的说明文字,这两个如果被分页切断了,也不方便观看:
语法与上面是一致的,将图片代码和说明文字都放在一个带此属性的div中即可。
不过对于多看而言,多看的交互图代码已经默认有此效果了(昼夜图代码也有此效果),需要说明的是,多看的交互图代码只允许两个p标签(即主标题和副标题,当然你写两个主标题也可以)。
关于固定版式
多看目前不支持epub的固定版式,掌阅有个私有属性不允许调整字号,算是曲线支持固定版式;epub3和kindle目前都已经有了固定版式规范(包括每页内容固定,横屏竖屏固定等情况),epub3的规范目前只有gitden支持。iBooks有自己的私有规范来支持固定版式。iBooks还有很多私有属性,按苹果的尿性,反正别的平台别的阅读器也不支持,所以不展开说了。