[譯] 你需要知道的 CSS 中所有 hyphenation 的使用

掘金翻譯計劃發表於2019-04-14
CSS

在古騰堡聖經的一些內容中，許多句子都使用了連字元。

月初我應邀在維也納的奧地利印刷學會（tga）做了一場晚間講座。我很榮幸能夠做這樣一個演講，因為這意味著我將追隨馬修·卡特（Matthew Carter）、維姆·克魯維爾（Wim Crouwel）、瑪格麗特·卡爾弗特（Margaret Calvert）、埃裡克·斯皮克曼（Erik Spiekermann）和已故的弗雷達·薩克（Freda Sack）等名人的腳步。

我展示了一些 Web 排版的黃金準則，在之後的問答環節中，我被問到關於 Web 自動斷字的現狀。這是一個恰當的問題，因為德語以長單詞而聞名 —— 尤其在名詞複合詞中很常見（例如 Verbesserungsvorschlag 意為改進建議）—— 所以使用連字元斷字在大多數書面媒體中被廣泛使用。

自 2011 年以來，Web 上的自動斷字已經成為可能，現在得到了廣泛的支援。Safari、Firefox 和 Internet Explorer 9 以上版本支援自動斷字，Android 和 MacOS 上的 Chrome 也支援自動斷字（但 Windows 或 Linux 上還沒有）。

如何開啟自動斷字

開啟自動斷字需要兩個步驟。首先設定文字語言。這將告訴瀏覽器使用哪個斷字字典 —— 正確的自動斷字需要一個適合文字語言的斷字字典。CSS 指南說，如果瀏覽器不知道文字的語言，即使在樣式表中開啟連字元，也不會自動斷字。

斷字是一門複雜的學科。斷字點主要以詞源和音系相結合的音節為基礎，但特定機構也有不同的斷字規則。

1. 設定語言

網頁語言應該使用 HTML 的 lang 屬性設定。

<html lang="en">
複製程式碼

設定文字語言有益於自動翻譯工具、螢幕閱讀器和其他輔助軟體，無論是否使用斷字，這種方式都是所有 Web 頁面的最佳實踐。

lang="en" 屬性通過使用一個 ISO 語言標籤 告訴瀏覽器文字使用的是英語。這個案例中，瀏覽器將會選擇它預設的英語斷字字典，這意味著使用美式英語的斷字。雖然美式英語和其他國家在拼寫和發音（因此斷字）上有很大差異，但在葡萄牙語等語言上的差異可能更大。解決方案是在語言中新增一個「區域」，以便瀏覽器知道哪個是最合適的斷字字典。例如，要指定巴西葡萄牙語或英式英語：

<html lang="pt-BR">
<html lang="en-GB">
複製程式碼

2.啟用斷字

到目前為止，已經設定好了語言，可以在 CSS 中開啟自動斷字。這再簡單不過了：

hyphens: auto;
複製程式碼

目前 Safari 和 IE/Edge 都需要字首，所以需要在屬性前面加對應的字首：

-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
複製程式碼

斷字控制

設定斷字不僅僅是開啟斷字。CSS Text Module Level 4 引入了佈局軟體（例如 InDesign）和一些文書處理器（包括 Word）。這些控制提供了不同的方法來定義文字中出現了多少斷字。

限制斷字前後的單詞的長度和字元數

如果你用連字元連線短單詞，它們會更難讀。同樣，您也不希望在連字元之前的行上留下太少的字元，或者在連字元之後被移到下一行。一個常見的經驗法則是，只允許至少有 6 個字母長的單詞用連字元連線，在單詞斷開之前至少留下 3 個字元，並在下一行至少保留 2 個字元。

《牛津風格手冊》（Oxford Style Manual）建議，換行符中連字元後的最小字母數是 3，不過也可以在很短的時間內出現例外。

您可以使用斷字 hyphenate-limit-chars 屬性設定這些限制。它使用三個空格分隔值。第一個是連字元的最小字元限制；二是連字元前的最小字元數；最後是連字元後的最小字元。要設定前面提到的規則，限制 6 個字元的字數，在斷字元前加 3 個字元，在斷字元後加 2 個字元，請使用：

hyphenate-limit-chars: 6 3 2;
複製程式碼

[譯] 你需要知道的 CSS 中所有 hyphenation 的使用

hyphenate-limit-chars 實現效果。

對於所有這三個設定，hyphenate-limit-chars 的預設值都是 auto。這意味著瀏覽器應該根據當前的語言和佈局選擇最佳設定。CSS Text Module Level 4 建議瀏覽器使用 5 2 2 作為起始點（我認為這會導致有太多的連字元），但是瀏覽器可以根據自己的需要隨意更改。

目前，只有 IE/Edge 支援這個屬性（帶有字首），但是 Safari 確實支援使用 CSS3 Text Module 早期草稿中指定的一些遺留屬性限制連字元。這意味著你可以在 Edge 和 Safari 中獲得相同的控制（對 Firefox 進行一些提前規劃），如下所示：

/* 遺留屬性 */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;

/* 建議使用 */
-moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2;
hyphenate-limit-chars: 6 3 2;
複製程式碼

限制連續連字元行數

出於美學的原因，可以限制行中連字元的行數。連續連字元的線，特別是三條或三條以上的線，這被輕蔑地稱為梯子。英語的一般經驗法則是，連續兩行是理想的最大值（相比之下，德語讀者可能要面對許多梯子）。預設情況下，CSS 不限制連續連字元的數量，但是可以使用 hyphenate-limit-lines 屬性指定最大值。目前，這隻被 IE/Edge 和 Safari （帶有字首）支援。

-ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
複製程式碼

[譯] 你需要知道的 CSS 中所有 hyphenation 的使用

hyphenate-limit-lines 用來防止梯子。

你可以使用 no-limit 刪除限制。

避免在段落的最後一行使用連字元

除非你告訴它，否則瀏覽器會很樂意用連字元連線一段的最後一個單詞，這樣斷字的某位會單獨出現在最後一行，就像孤兒一樣孤獨。通常，在倒數第二行末尾有一個大的空格比在最後一行有半個字要好。你可以通過啟用值為 always 的 hyphenate-limit-last 屬性來實現這一點。

hyphenate-limit-last: always;
複製程式碼

目前只支援 IE/Edge（帶字首）。

通過設定連字元區來減少連字元

預設情況下，只要瀏覽器可以在任意設定的 hyphenate-limit-chars 和 hyphenate-limit-lines 值內將一個單詞分隔成兩行，就會經常出現連字元。即使應用這些屬性來控制什麼時候發生斷字，仍然可能出現大量的連字元段落。即使應用這些屬性來控制什麼時候發生斷字，仍然可能出現大量的連字元段落。

考慮一個左對齊的段落。右邊參差不齊，連字元可以減少。預設情況下，所有允許斷字的單詞都將被連字元連線。這將給你最大的斷字量，從而最大限度地減少碎屑。如果你準備容忍段落邊緣的不均勻，你可以減少連字元的數量。

可以通過指定行最後一個單詞和文字框邊緣之間允許的最大空白量來實現這一點。如果一個新單詞在這個空格中開始，它沒有連字元。這個空格稱為連字元區。連字區越大，破碎處越多，斷字越少。通過調整連字元區，你可以平衡更好的間距和更少的連字元之間的比例。

[譯] 你需要知道的 CSS 中所有 hyphenation 的使用

左：箭頭表示允許連字元的線。 右：連字元與連字元區設定。

為此，你可以使用 hyphenation-limit-zone 屬性，它接受一個長度或百分比值（根據文字框的寬度）。在響應式設計的上下文中，將連字元區設定為百分比是有意義的。這樣做意味著在更小的螢幕會有更小的連字元區，從而導致更多的連字元和更少的碎屑。相反，在更寬的螢幕上，你會得到更寬的連字元區，因此更少的連字元和更多的碎屑，這是一個更寬的措施能更好的適應。基於頁面佈局軟體的典型預設值，8% 是一個不錯的開始：

hyphenate-limit-zone: 8%
複製程式碼

目前只支援 IE/Edge（帶字首）。

把它們放在一起

使用 CSS Text Module Level 4 屬性對段落應用與傳統佈局軟體相同的連字元控制（至少逐行使用）：

p {
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}
複製程式碼

以及適當的瀏覽器字首和回退：

p {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}
複製程式碼

連字元是漸進式增強的一個完美例子，因此，如果你正在製作一個有長單詞語言內容的網站，那麼現在就可以開始應用上面的方法 —— 瀏覽器之間的支援只會增加。如果你在為一個用長單詞寫的網站設計，比如德語，你的讀者一定會感謝你的。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章