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

wangtdgoodluck 發布于2019-08-29 13:15 / 2963人閱讀

摘要：在日常工作需求中，設計師丟給你一個，發現里面的文本是兩端對齊的，然后發現實際開發中，兩端對齊這種操作根本是不行的，它會拉開單詞空格的距離，十分難看。那么怎么解決呢控制字間距啊祭出這個神器聽說報紙排版也是微調字間距實現豆腐塊式的排版的。

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

前言

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

應用場景

不會無緣無故的造輪子。在日常工作需求中，設計師丟給你一個PSD，發現里面的文本是兩端對齊的，然后發現實際開發中，兩端對齊text-align:justify;這種操作根本是不行的，它會拉開單詞空格的距離，十分難看。PSD里之所以好看，是因為設計師里進行了字號或者斷行的微調。當然大家都知道，在實際開發中根本行不通的。作為一個還蠻有追求的前端開發，在社區里找不到滿意的工具庫后，果斷開始自己動手，創造幸福。

技術分析

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

斷行的時機，哪個字符適合斷行？

在每行的末位適不適合加連接符-呢？

如何讓其每行長度一致，排版精致風騷呢？

第一點，本來就是為了實現兩端對齊，所以，每行的長度要接近文本盒子的寬度才能達到目的。問題來了，盒子的寬度輕輕松松的可以獲取：(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就是剛好適合斷行的時機。

那么第一個問題得到解決！緊接著來~雖然粗糙的斷行了，怎樣精致風騷斷行？斷行適不適合加連接符？我特意去谷歌搜了幾張英語報紙觀摩了一下，發現幾個特點：

單詞如果被腰斬了，那么要加！但是最多從第二個字符開始~

特殊字符如"":;,.?()[]{}<>~!@#$%^&*-+=/|1234567890不需要加，為蝦米？看著不舒服啊~

逗號句號等標點符號不會呆在每行的開頭。

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

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

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

空格的寬度怎么獲取？直接添加到DOM里是被忽略的，哭···這個糾結了一段時間，后來發現x x減掉xx就可以了

多次對同一個文本應用hyphenjs怎么辦？這個一開始沒考慮到，后來將文本保存到全局對象中window.hyphen_cached，需要使用的時候隨時提取~

hyphenjs目前只應用于純文本~比如說

hyphenjs is absolutely helpful.

里面的strong標簽就會忽略，因為hyphenjs獲取的是innerText~

這是我第一次寫博客，然后自己也是剛畢業兩個月的小白，寫得不好的地方還請大家多多見諒~當然最重要的是，如果這個hyphenjs對你的工作產生了幫助，還請不吝給個star哦，或者發現了什么問題，也可以提個issue哦~

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

GPU云服務器云服務器文本兩端對齊 html兩端對齊字節對齊算法實現 hyphenjs

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112474.html

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

摘要：在日常工作需求中，設計師丟給你一個，發現里面的文本是兩端對齊的，然后發現實際開發中，兩端對齊這種操作根本是不行的，它會拉開單詞空格的距離，十分難看。那么怎么解決呢控制字間距啊祭出這個神器聽說報紙排版也是微調字間距實現豆腐塊式的排版的。因為之前代碼寫得太亂了。最近在重寫，忘了開分支。有興趣查看之前代碼的朋友可以重置回c8034eb這個commit之前的代碼看。重寫完成后會重寫一篇文章，...

blastz 2019-08-01 17:28 評論0 收藏0
怎樣實現完美兩端對齊/齊頭尾功能——hyphenjs

摘要：在日常工作需求中，設計師丟給你一個，發現里面的文本是兩端對齊的，然后發現實際開發中，兩端對齊這種操作根本是不行的，它會拉開單詞空格的距離，十分難看。那么怎么解決呢控制字間距啊祭出這個神器聽說報紙排版也是微調字間距實現豆腐塊式的排版的。因為之前代碼寫得太亂了。最近在重寫，忘了開分支。有興趣查看之前代碼的朋友可以重置回c8034eb這個commit之前的代碼看。重寫完成后會重寫一篇文章，...

DevYK 2019-08-20 18:57 評論0 收藏0
手機端單行文字兩端對齊：用css偽類實現

摘要：今天在做項目的時候碰到這個問題右側紅線內的小標題單行兩端對齊。兩端對齊的屬性我們知道是，但是這個屬性有它的局限性只能為或多行文字才能實現兩端對齊。也就是說，在現在的情況下，小標題的單行文字僅僅使用是實現不了兩端對齊的。今天在做項目的時候碰到這個問題：右側紅線內的小標題單行兩端對齊。 showImg(https://segmentfault.com/img/bVQv1a?w=319&h...

JasonZhang 2019-08-29 12:53 評論0 收藏0
如何解決text-align: justify;瀏覽器、安卓手機不兼容問題

摘要：下載安裝的瀏覽器等也沒有問題。但是用安卓手機再帶的瀏覽器，問題就出現了。經過查詢找到一個問題。于是給每個文字之間添加了一個空格，成功解決了各瀏覽器不兼容手機端不兼容的問題。今天需要切一個響應式網頁，有一行文字，需要實現兩端對齊。代碼如下： .h_text{ text-align: justify; width: 200px; } 這一行要兩端對齊根據經驗找到t...

Bamboy 2019-08-30 13:54 評論0 收藏0