多看阅读/掌阅的CSS兼容性

说明

之前写的对比文章简单的说了一下各电子书软件在排版上的优劣,这里详细的列举一下多看和掌阅在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语法,可以将前端对象贴紧屏幕的边缘。由于所有的电子书排版默认都会在屏幕四边留出空白(按漫画术语俗称出血格),要将对象移到屏幕边缘,就需要在外边距设置负值,但是不同软件和设备的出血格大小是不一样的,这个语法就可以确保在多看中对象都可以自动贴边显示,以增加电子书的沉浸感和设计感。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,303评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,730评论 0 2
  • 在上一篇复盘思考的文章中,我写过一个观点,总体意思是:在现金流游戏中,高收入也伴随着高支出,所以高收入和低收入的结...
    杨小妞的秘密花园阅读 283评论 0 0
  • 最想要的,当然是爱,很多很多的爱。如果没有爱,钱也是好的。——亦舒 这句话是在看电视剧《我的前半生》唐晶说的 字面...
    有实阅读 794评论 0 1