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來控制間距來正好滿足。