怎樣實現完美兩端對齊/齊頭尾功能——hyphenjs

由於以前代碼寫得太亂了。最近在重寫，忘了開分支。有興趣查看以前代碼的朋友能夠重置回c8034eb這個commit以前的代碼看。重寫完成後會重寫一篇文章，抱歉啦。

---

前言

話很少說，先上圖。後者紅框裏是瀏覽器默認的文本排版，右側會有鋸齒（至於難不難看就見仁見智啦哈哈）。前者是使用本身開發的hyphenjs後的文本排版，整齊得像一塊豆腐塊！對於一個處女座來講，簡直舒心了不少。去看看這個神奇的hyphenjs

---

應用場景

不會平白無故的造輪子。在平常工做需求中，設計師丟給你一個PSD，發現裏面的文本是兩端對齊的，而後發現實際開發中，兩端對齊text-align:justify;這種操做根本是不行的，它會拉開單詞空格的距離，十分難看。PSD裏之因此好看，是由於設計師裏進行了字號或者斷行的微調。固然你們都知道，在實際開發中根本行不通的。做爲一個還蠻有追求的前端開發，在社區裏找不到滿意的工具庫後，果斷開始本身動手，創造幸福。

技術分析

簡單來講，開發hyphenjs中（hyphenjs只考慮西文，也就是英文、印尼文等），遇到的三個難點：

1. 斷行的時機，哪一個字符適合斷行？
2. 在每行的末位適不適合加鏈接符-呢？
3. 如何讓其每行長度一致，排版精緻風騷呢？

第一點，原本就是爲了實現兩端對齊，因此，每行的長度要接近文本盒子的寬度才能達到目的。問題來了，盒子的寬度輕輕鬆鬆的能夠獲取：(getComputedStyle(target))['width']，那麼行長度如何控制呢？請看如下代碼：

var span = document.createElement('span'), width = 0;
    span.style.fontSize = 18;
    span.innerText = 'R';
    target.appendChild(span);
    width= (span.getBoundingClientRect())['width'];

經過這個方法的思想，也就獲取了每一個字符的真實寬度，須要注意的幾個方面，fontSize須要從文本盒子獲知，這裏只是假設一個字號而已。同時，span只有插入到文本盒子（或者說DOM樹）中，才能真正生效，去獲取它的全部真實的屬性（同時也會繼承父級的相關樣式，好比font-family等咱們關心的屬性）。
所以，最後咱們能夠獲取文本盒子裏的全部出現過的字符的寬度，把它們的charCode和寬度用hashMap記錄下來，方便複用。

怎樣計算每行的累積寬度呢？請看下面的函數：

// 計算n到m字符間的累計寬度
function getAccWidth(textData, charArray, from, to) {
    return charArray.slice(from, to).reduce(function(acc, cur) {
        if (!cur) return acc + 0;
        return acc + textData[PREFIX + cur.charCodeAt()].width;
    }, 0);
}

上面計算到的hashMap終於派上用場了，逐個訪問文本里的每一個字符的charCode,經過hashMap（也就是函數的形參textData）獲得了該字符的寬度，累積算出從n到m的總寬度，和盒子寬度做爲比較，若盒子寬度介於當前字符與當前的下一個字符各自的累積寬度，即應當爲適合斷行的時機。舉個栗子，好比第一行，那麼from爲0， to假如到第21個字符，誒喲恰好大於盒子寬度咯，那麼20~21就是恰好適合斷行的時機。

那麼第一個問題獲得解決！緊接着來~雖然粗糙的斷行了，怎樣精緻風騷斷行？斷行適不適合加鏈接符？我特地去谷歌搜了幾張英語報紙觀摩了一下，發現幾個特色：

1. 單詞若是被腰斬了，那麼要加！可是最多從第二個字符開始~
2. 特殊字符如\"\':;,.?()[]{}<>~!@#$%^&*-+=/\\|1234567890不須要加，爲蝦米？看着不舒服啊~
3. 逗號句號等標點符號不會呆在每行的開頭。

那麼在斷行的時機里加上以上的判斷，就能夠實現風騷斷行了！

然鵝問題來了，當我風騷地把成品發給公司的前輩看的時候，前輩輕輕的飄來一句，仍是沒有對齊啊···心裏受到了暴擊，的確，由於以前的三個條件致使斷行發生了一些小小的飄移，因此的確也不能無缺對齊了。那麼怎麼解決呢？控制字間距啊！祭出letter-spacing這個神器！（據說報紙排版也是微調字間距實現豆腐塊式的排版的）。
公式也很垂手可得就想出來了：合理字間距 = （盒子寬度 - 行寬度）/ 該行字符數
將字間距應用到每一行的行內樣式便可。Duang！完成啦哈哈哈~~

最後稍微提幾點有趣的地方和注意的地方：

1. 空格的寬度怎麼獲取？直接添加到DOM裏是被忽略的，哭···這個糾結了一段時間，後來發現x x減掉xx就能夠了
2. 屢次對同一個文本應用hyphenjs怎麼辦？這個一開始沒考慮到，後來將文本保存到全局對象中window.hyphen_cached，須要使用的時候隨時提取~
3. hyphenjs目前只應用於純文本~好比說<p>hyphenjs is <strong>absolutely</strong> helpful.</p>裏面的strong標籤就會忽略，由於hyphenjs獲取的是innerText~

這是我第一次寫博客，而後本身也是剛畢業兩個月的小白，寫得很差的地方還請你們多多見諒~固然最重要的是，若是這個hyphenjs對你的工做產生了幫助，還請不吝給個star哦，或者發現了什麼問題，也能夠提個issue哦~

---

有個前輩和我說，「凡事都要遵循樸素的實用主義嘛」，感觸很深，開發出的任何東西基本上都須要實用，這樣才能應用到實際開發中，才能對本身的工做和成長帶來幫助。畫風一轉，嘿嘿嘿···狠狠戳這裏hyphenjs