伊书web排版解析

伊书是针对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事件显示内容就行了。需要判断这个注释的位置，以决定注释内容的显示位置。