伊书web排版解析

2012-3-3

伊书是针对iOS的电子书WebApp,在web上排版不像原生APP有底层排版函数支持,限制很大,勉强实现了一些特性,在此分享。

内容左右对齐

给内容的DOM加上这个CSS属性即可:text-align:justify;
现代桌面浏览器几乎都支持,没详测。iOS5.0以上才开始支持这个属性,似乎若没有这个属性,左右对齐无解。

分页

web无法做到一页页定量渲染文字,分页需要一点hack才能做到。
我的做法是,一章的内容放在一个dom里,复制出一个一样的dom,限制显示一页范围的内容,根据页码调整显示位置。
一图声千言:

坏处是这样的形式要精确算准行高,就算字体大小不一样也要是跟正文一样的行高或是它倍数,一个算不准就会出现只显示半截文字的情况。也因为这样字体大小调整比较麻烦。

标点外挂

标点外挂是指一行中若第一个字符是标点符号,就把它移到上一行的末尾。具体实现方法是:

  1. 给所有标点加标签,就是字符串替换,把。?等替换成<b>。</b> <b>?</b>
  2. 遍历内容里的所有b标签,判断它们的位置是否在当前行的起始位置,若是则把它移到上一行末尾,具体代码:
$(".page_content b").each(function(i, b){
    if (b.offsetLeft == 0) {
        $(b).css({
            "position" : "absolute",
            "left": "256px",
            "top": b.offsetTop - lineHeight + "px"
        })
    }
});

内容缩进、信件落款左右对齐特殊处理

内容数据我是手工格式化后存到json里的,在这些特殊的地方加了标签,在显示时替换成dom按这些不同的类型给内容以不同的缩进/对齐。

注释

同上,在需要注释的地方用自定义的标签把内容包在标签里,在显示内容时把这个标签替换成dom,用js控制这个dom的touch事件显示内容就行了。需要判断这个注释的位置,以决定注释内容的显示位置。

分类:技术文章 Tags:
评论

2012年3月4日 2:12

对于分页有一些疑问。
是不是每一个分页都是一个全文的一部分?
在进入一章的时候开始建这章全部分页的dom么,还是翻页的时候建造目标页的dom?
分页为什么不用分栏实现?http://jsbin.com/ewozip/edit#html,live

2012年3月4日 2:32

我从文章来理解的。

每个分页都是全章的一部分。一次加载一个章节的文字。

应当不需要建立全部的。只需要两个一样的dom就行了呀。翻页时只需要移动两个dom的位置就行了。

2012年3月4日 2:44

另外,@Feather给的实现中,另上text-align:justify;效果也挺好的。

我在safari 5.1 上来看效果,text-align:justify;是可以规避标点在行首问题,难道ios中的不可以?

2012年3月4日 9:58

测过iOS不可以。看来新浏览器把所有排版问题都解决了

2012年3月4日 9:58

创建dom @longwosion 的回答是对的
不用分栏因为不知道有这个属性,汗

2012年4月12日 17:19

可惜伊书里面只有一本,制作书籍并且还要编排格式。
于是我就自己实现了一个 WebApp 的阅读器,借用了伊书的图片,希望你不要介意。
亮点是可以用 txt 转换到 json,写了一个 manager.py 的管理工具。
开源在 http://shiu.log4d.com

2012年4月12日 17:25

赞~不过我现在觉得电子书还是用回epub格式靠谱

2012年4月13日 0:23

我初衷是体验一下 HTML5,顺便学 js
现在写着写着发现,依靠 github 可以蛮好的维护一个图书库(盗版……),可以让其他人 pull request 图书过来。
不得不说, txt 的格式的确单薄,放放网络小说倒还靠谱。