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来控制间距来正好满足。

补充：web前端 , JavaScript ,