jQuery插件 SlabText的实现原理

这个算法是针对英文文本而言的。

第一步：初始计算

初始计算将需要用到3个常量来约束初始计算的结果。第一个是字体单个字符的平均长宽比。

因为字符的高度容易获取，一行的字数也容易获取，难的是一行中每个字符的宽度。

实现：1、假设某种字体的平均长度比为.44518217（每种字体它的平均字符长度比通常是不一样的）。

实现：2、字符的高度其实就是字体大小，也就是font-size（与line-height无关，line-height指的是行高）。每一行文本肯定是有一个默认字体大小的，而我们将得到的结果，最后这些文本中的字符的字体大小基本是和这个字体大小相近的。

然后，需要确定文本一行的理想长度所需要的字符数。根据treemapping的思想，假设每个字符都有相同高度或宽度。一般来说容器的宽度是已知的或可以被获取的。容器的宽度除以每这个平均宽度就是可以容纳的字符数。

实现：3、假设容器宽800像素，Math.floor(800/ (font-size × 0.44518217))就是每行理想的字符数。

第二步：迭代计算每行应该放的内容

拆分文本为单个单个的单词（保留字意），接下来的算法是使每行的字符数尽可能接近每行的理想字符数。

实现：创建两个容器，一个用来存放文本的下一个单词，另一个用来存放文本的下两个单词。持续往两个容器中添加后续字符，直到满每行的理想字符数要求。如果某个单词放进第二个容器后多了一点，根据多多少的比例来选择是放这一行还是换一行。

第三步：布局

使每行都撑到容器的两端，这需要适当缩放font-size, letter-spacing和word-spacing。

实现：

1.      使每一行的容器为inline-block（可以获取实际的宽度），不缩放font-size，通过父容器宽度与span容器宽度的比来确定font-size应该缩放多少倍(ratio)。

2.      根据1得到的结果，font-size = old-font-size * ratio就是这行新的字体大小。

3.      如果应用新的字体大小后，超出或不够，根据有没有多个单词来确定是通过控制letter-spacing还是word-spacing来控制间距来正好满足。

附录

Treemapping

信息与计算领域中通过嵌套的矩形来表达数据层次以及数据在每个层次中所占的比重的一种方法。