伊书web排版解析

2012-3-3 评论(8) 分类:技术文章 Tags:

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