TinyTypesetting for ios是由我编写的一个小型排版引擎,主要目标的实现中文的版式中的定制开发。
一、文本的呈现
在IOS中,如果要实现的一个文本的显示。通常我们会考虑使用UILabel。当然UILabel是做少量文本的显示(在这里,我并不讨论编辑的功能,如果我们要在程序中要对一个文本进行设配的的话,我们会使用SizeToFIt(UILabel未实现)这样的函数,有时候,我们只是想计算一个视图上一些文字视图的排布,为了节省内存,或者是lazy loading的需要,我们实际上并不想真的是去生成一个view。那么实际上在NSString(UIStringDrawing)提供这种计算文字在视图显示区域大小的函数。如:
(CGSize)sizeWithFont:(UIFont *)font forWidth:(CGFloat)width lineBreakMode:(UILineBreakMode)lineBreakMode
它在接受合适的参数之后,能够为我们提供视图占地面积大小。
二、图文的混排
实际上,我们并不是单单只是对文字进行排版,有时候,我们会在文中插入图片,当然这个版式实际上非常难看,但是我还是要演示一下,效果,因为它的确也是排版的一部分:
========================================示例==============================================
这是一个示例文字
这也是一个示例文字
========================================示例==============================================
在一个Flow流中处理的图片,或者是一个链接,或者是一个按钮,总而言之,它就是一个不可切割的一个单元,在排版中我们称为图元的东东,就是排版应该提供的。当然这种比较丑陋的排版,相信设计师都不会采用它,当然不排除有相当牛逼的设计师能够把这样的版面弄得好看(ps:如果你做出来了,请一定要告诉我)。常见的话,其实我们只有下面的这种排布方式。
========================================示例==============================================
这是一个示例文字

这也是一个示例文字
========================================示例==============================================
这个时候我们使用View的选择就少了一些,在不考虑第三方库的情况下,常规的做法的我们会使用UILabel,UIImageView,或者考虑UIWebview这样的重型机械。于是我们就纠结了。在使用UILable,UIImageView 的情况下,我们UI展现会非常固定,我们加多一个标签,咋办?普通青年会告诉PM,我们把代码拿下来重新编译一次上传。二逼青年会告诉PM,我们使用Webview当然没有这种问题。后一种处理方法实际非常内伤。想想在Sina iphone那个timeline吧(当然那个不是用webview实现的),那么实际上我们其实只是需要一个瑞士军刀,结果动用了坦克。
三、混排的出现
实际上我们还有一些奇奇怪怪的需求会不断增加。比如,我们在文字流中加入小链接(可点链接):
========================================示例==============================================
这是一个示例链接文字
这是一个示例链接文字
这是一个示例链接文字
这是一个示例链接文字
========================================示例==============================================
有时候仅仅是一小段的文字。但是在排版就非常头疼了。正常的青年当然在这个时候会选择three20的styledview。二逼青年仍然会说我们用Webview(对他们来说,这是一个神器)。神奇的青年这个时候会说我们考虑不支持3.2,使用CoreText。
四、排版引擎的效果
Webkit在iPhone中的表现相当出色。处理普通的需求绰绰有余
========================================示例==============================================

========================================示例==============================================
Core Text的效果也是相当的不错。
========================================示例==============================================

========================================示例==============================================
TinyTypesetting for ios 现阶段的效果如果下。
========================================示例==============================================

========================================示例==============================================
五、复杂排版的困惑
做复杂一点的图文排版的时候一定对于一个ios开发者来说,其实是挺困扰的问题,特别是中文排版这一块。举一个简单的例子,在中文的印刷制品中,我们会要求右侧对齐,我们讲究对称美,看我上面演示的示例,可以知道,iPhone的Webview在这一块可是不够亲近中文排版,在5.0之后才正式支持这一特性。Core Text表现也非常难良好。现在我们再来谈一下更普遍的需求。PM某天发现原来,在移动设备上,使用Scroller修饰器的让用户焦点无法像PC一样快速确定,毕竟用户处于一个移动的环境中,那么做一个提议吧:我们弄个分页行不(少量文本,7k-1w)。于是ios程序员开始抓破脑袋,最后决定,用UIWebview-UIScrollView的pagingEnable,很快又神奇的发现,这个原来有些文本刚好被切割。于是使用webkit的程序员开始使用不同的解决办法。当然Css3的分栏特性是一个不错的选择,比较大的一个障碍可能是在iPad排版时候的图片的跨栏,但是这一切我们都可以通过js解决。Core Text的当然不在话下。
PM们的要求可不这么简单,他们能够想到的,就是还有,竖着分页,Webview在这一方面马上显得力不从心了(也是可以做的);舍弃卷轴效果,弄个更炫的效果。JS的效率就在这些效果的切换中被秒杀了,部分效果是还是可以做得出来的,但是经常性的多个webview的切换让代码看起来非常hackous。
以上Core Text和我编写的TinyTypesetting皆可以做到。
六、长文本
对付长文本的做法,当然是切割,切割的粒度在正常情况下,我们会使用段落作为粒度。比如一个30w字的文字应该在webview里面怎么展现呢。webview越来越无法满足我们的不断增长的需求(某些情况我们会选择比较不优美的方法)。Core Text的编码复杂,当然作为一个定制的排版框架灵活度还是相当高。Core Text在run时候会告诉一个CTFrameRef。可以让我们知道多少文本在空间内占据大小。
七、TinyTypesetting for ios
TinyTypesetting for ios 完全是一个定制开发排版引擎。
1,对少量文本的排版来说, 它是小型容器,可以快速的对多样式的文本进行显示,多种定制控件的加入,所以控件的回调都可以直接控制。文本区域可知,它可以告诉哪一行,哪一个字在什么位置。
2,内置的justified让中文豆腐块更加清晰。终于可以去掉坑坑洼洼的不平。
3,支持部分html标签