再次整理排版時碰到的引號與幽靈空隙（ghost space）的問題與解法。
之前剛開始學習使用 Quarto 時，寫了一篇筆記：〈Quarto 筆記 (4) - 單引號怎麼變醜了？〉，整理自己碰到的狀況和調查結果。經過一段時間，諮詢了 AI，也看了一些相關文章，覺得這次理解得更完整了，疑問也都釐清了，故再寫一次同樣的題目。
這是個普遍存在於中英文混合排版的問題：引號在排版結果中出現幽靈空隙（ghost space）。
幽靈空隙 (ghost space)
在瀏覽網頁或閱讀電子書、技術文件時，有時會發現中英文同時出現的句子裡，英文縮寫（例如 It's, Don't）中間出現了奇怪的莫名空隙：明明原本應該是緊密相連的字母，卻硬生生被拉開，變成了 Don' t 這種尷尬的樣子。
這就是所謂的「幽靈空隙 (ghost space)」。
這看似微不足道的細節，卻往往是破壞版面專業感的元兇，而背後隱藏的是關於「引號（quotation marks）」與「省略符號（apostrophe）」的排版學問。
英文排版的黃金法則，遇到中文就失靈？
在標準的英文排版（typesetting）世界裡，有一個被奉為圭臬的規則：一律使用「彎引號」（curly quotes / smart quotes）。
也就是說，若是單引號，我們應該使用彎曲造型的引號 ’ (U+2019)，而不是鍵盤上直接打出來的直桿引號 ' (U+0027)。彎引號具有方向性，造型優雅，是專業排版的象徵。
然而，這個在英文世界通行的法則，一旦進入了「中英文混排」的環境，就會碰到許多狀況。
原因在於，許多中文字型（CJK fonts）為了配合方塊字的特性，會將標點符號設計為全形，或者在符號周圍預留較寬的空間。當瀏覽器或排版軟體優先使用中文字型來渲染這個「彎引號」時，災難就發生了：它會把原本應該夾在英文字母中間的符號，變成了一個寬度驚人的障礙物，導致前後字母被迫分離。
為什麼「直引號」反而是技術上的正解？
為了避免這種排版災難，在中英文混排的實務上，我們往往必須做出取捨：英文內容請改用「直引號」。比如說，我在《Readmoo讀墨 電子書製作準則》裡面就看到如下圖的規範：
為什麼中英文混排的時候，英文的引號建議用直式引號？以單引號為例，直式單引號 ' (U+0027) 是一個標準的 ASCII 字元。它的特性是非常穩定、單一字寬，且幾乎所有的排版引擎都會將其視為半形符號處理，不會觸發中日韓排版特殊的間距規則。
雖然從純排版美學的角度來看，直引號不如彎引號優雅，但在技術穩定性面前，這是一個必要的妥協。對讀者而言，在閱讀中文文章中的英文片段時，看到 don't（直引號）並不會產生違和感；但如果看到 don' t（有空隙的彎引號），那種「版面壞掉」的感覺卻是立即且強烈的。
如果我堅持要用美美的彎引號呢？
如果你追求極致，堅持要在中英文混排中也使用優雅的彎引號，同時又不希望出現幽靈空隙，這並非不可能，但你需要正確設定 CSS 的「字型堆疊（font stack）」。
關鍵在於：必須將英文字型放在中文字型前面。
❌ 錯誤設定：
font-family: "Noto Sans TC", "Roboto", sans-serif;若採用上述樣式，系統會先在 Noto Sans TC（中文字型）裡找彎引號，它找到了，便爽快地吐出一個寬版符號，造成空隙。
✅ 正確設定：
font-family: "Roboto", "Noto Sans TC", sans-serif;此樣式會令系統先在 Roboto（英文字型）裡找彎引號，它找到了，於是使用英文字型的設計來渲染。因為英文字型的彎引號是針對英文設計的，它能完美地與前後字母緊密結合，故不會像中文字型那樣產生 ghost space。
結語
排版的魔鬼往往藏在細節裡。一個小小的引號，背後牽涉到字型設計、編碼標準以及瀏覽器的渲染機制。
若是全英文環境，可大膽使用彎引號展現專業（而且一律使用彎引號，不應直、彎混用）；但在複雜的中英混排環境中，若無法確保字型設定的完美，回歸最樸實的直引號，往往才是最安全、也最對得起讀者眼睛的選擇。
別讓一個小小的標點符號，毀了你辛苦撰寫的文章質感。
資料來源：中英文排版的省略符號與引號字元
沒有留言: