说明
之前写的对比文章简单的说了一下各电子书软件在排版上的优劣,这里详细的列举一下多看和掌阅在CSS上的兼容性,所列的CSS语法均在[W3School]上列举,鉴于CSS语法众多,不能一一列举,主要选择在epub排版上能起到作用的语法。
由于iBooks是直接使用Webkit作为排版引擎,所以完整支持所有的CSS语法,缺点就是载入书籍的速度会稍慢。但是多看和掌阅为了读取速度(也可能是技术上达不到),排版引擎不是那么完善,有的CSS语法的实现也是非常奇怪的。
可能有人认为CSS语法表现不了的设计大不了使用图片来代替。诚然,用图片代替可以方便很多排版设计,也不会造成不同屏幕尺寸的错位,但是使用图片的缺点也是很明显的:
- 文件体积过大
- 日夜模式转换时图片辨识度差
- 高分辨率屏幕下图片体积要求过大
所以我认为版面设计应该尽量使用CSS语法来实现——当然,鉴于软件的引擎速度有限,不能无限制的使用语法,适当使用就好。
CSS2语法支持情况
根据W3School的分类,CSS2泛指CSS从出现到CSS3之前的基础语法。
CSS样式
- CSS背景:多看和掌阅都支持背景,不过细节方面有一定差异。两者都不支持多图背景,多看不支持行内背景;
- CSS文本:多看旧版(2.x)不支持字符间距和行高,新版支持行高。不支持hyphens连字符设置。多看不支持
<u>
这种下划线标签,但支持text-decoration的下划线设置; - CSS字体:多看支持epub内嵌字体和app自带外部字体,也可以通过设置来全局设置字体。掌阅不支持内嵌字体,只支持后两种。ibooks旧版(ios6.x之前的版本)不支持内嵌字体和多字体显示,新版本增加了一定的支持;
- CSS链接:均支持;
- CSS列表:均支持,不过细节上有差别(例如多看不支持cjk表意列表);
- CSS表格:均支持,但多看的单元格默认是根据屏幕扩展的(sigil中,如果单元格只有一个字符,那单元格自动收缩到一个字符多一点的宽度,不会扩展。而多看相反)。另外如果表格某个单元格与当前页面单元格加起来的高度超过了设备的屏幕高度,则该单元格及其以下的所有单元格都不会显示出来(图片也是同理,如果原始高度超过了设备高度,就不会显示该图),另外多看不支持表格的一些全局设置属性,如全局边框、内外边框重合和背景色交替等,但是可以设置单元格属性来达到同样的效果;另外,多看不支持在单元格内的div背景嵌套等属性。
-
CSS轮廓:均支持,但不支持轮廓样式,所有的轮廓样式都会被处理为直线;
CSS盒模型
- CSS内外边距:均支持,但掌阅不支持框模型尺寸,下面的示例图可以看到区别;
- CSS边框:多看只支持dotted、dashed、solid、double边框样式,其它仿3d样式设置了多看会处理为没有边框(应该是个bug),掌阅则全部支持;
CSS定位
-
多看2及之前版本不支持元素的定位,多看3增加了部分支持(但底部定位不是从设备底部开始算的,而是从下一段顶部开始算),掌阅全部支持。不过个人认为定位在epub这种流式排版中作用不大,在不同屏幕尺寸的设备上容易造成错位,能不用尽量不用。
CSS选择器
- 均支持子元素和后代,但都不支持伪元素。不过也无伤大雅。
CSS3语法支持对比
CSS3边框
-
多看支持圆角边框,但只能实现正圆角,不能实现椭圆角(以百分比作为单位,当圆角达到边长的50%时无法形成完整的半圆)。掌阅不支持圆角边框。iBooks全部支持;
多看仅支持有边框属性时显示边框阴影,但载入页面速度极慢(估计是个bug,目前最新版多看已修复此bug),如果没有边框属性则按没有阴影处理,载入速度正常。掌阅不支持边框阴影。iBooks全部支持;
多看支持边框图片,但必须设定边框属性大小及颜色透明,四角和边之间会有非常轻微的接缝。掌阅和iBooks全部支持;
CSS3背景
- 多看和掌阅均支持背景尺寸定义,但不支持多个背景图片,不支持行内背景(即span属性下背景无法显示,div或p属性的才能显示)。iBooks因为固定了正文区域的关系,body style不支持显示全尺寸的背景,仅根据前端元素的周围显示少量背景,但正文内的元素用padding方式显示背景还是可以的;
CSS3文字效果
- 多看和掌阅均支持文字阴影,但不支持多重阴影。iBooks全部支持;
CSS3几何转换
-
多看和掌阅均支持2d转换,不支持3d转换。iBooks全部支持。不过个人认为这个语法很少用到,除非是设计诗那种书;
CSS3过渡和动画
- 多看和掌阅均不支持过渡和动画。iBooks的移动设备版本因为没有鼠标,过渡不能实现,但动画正常,Mac版的iBooks则完全支持。
CSS3多列排版
- 多看和掌阅均不支持多列排版。iBooks完全支持。
特殊语法
- 重点符:多看支持text-emphasis属性(目前主流浏览器都不支持),可以完美呈现出重点符效果(参见这里),但是不支持中文和转义符(重点符是多字符的话只显示首个字符),也不支持sesame形状(就是pc键盘数字1左边那个键,波浪号下方)。掌阅不支持此属性。iBooks默认会将重点符显示到文字的顶上去(如果未定义重点符位置的话),但形状全部支持;
- 波浪线:多看支持波浪线效果,不过是多看的私有语法,应该是在做s.的时候出现的语法,一般使用不多。iBooks支持通用的语法;
- 对象贴边:这是多看私有的一个CSS语法,可以将前端对象贴紧屏幕的边缘。由于所有的电子书排版默认都会在屏幕四边留出空白(按漫画术语俗称出血格),要将对象移到屏幕边缘,就需要在外边距设置负值,但是不同软件和设备的出血格大小是不一样的,这个语法就可以确保在多看中对象都可以自动贴边显示,以增加电子书的沉浸感和设计感。