关于电子书中换页的技巧

概况

目前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还有很多私有属性,按苹果的尿性,反正别的平台别的阅读器也不支持,所以不展开说了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一次听说这个软件,来自一位朋友。第一次写东西。有个可以记录自己东西的地方,还不错。 能写出东西来的前提是可以让自...
    星星23阅读 154评论 0 0
  • 1.懂你✅句子复述要分解记录关键字 2.读书2页✅输出❌ 3.早起.✅早睡✅23:00 因为赶火车和在静这~ 又是...
    米_小米阅读 302评论 0 0
  • 携程笔试总体不是很难,和其他不同的事更加偏业务方向,因此暴露出的问题又很多。首先我投的是机票产品岗,但是对机票很多...
    Sanity娜娜阅读 546评论 0 2