中文的避頭點規則與CSS如何因應

Yuuyuutube
Apr 16, 2019

--

在漢字圈的平面排版,一項規則叫[避頭點]--標點符號不應出現在句首。在 Illustrator 或 InDesign 也可看到相關設置:

段落>換行組合:無
段落>換行組合:嚴格規則

設置換行組合後、原先出現在句首的句點會將前一個字一起帶進下一行。

在瀏覽器的文字顯示上也有進行相關的處理。

(W3C中文規範:行首行尾禁則 / 日文規範:Characters not starting a line

以下為使用的範例文字:

(注意--臣亮言:冒號後有一個半行空格作為示例)

臣亮言: 先帝創業未半,而中道崩殂。今天下三分,益州疲弊,此誠危急存亡之秋也。然侍衛之臣,不懈於內;忠志之士,忘身於外者,蓋追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣;不宜妄自菲薄,引喻失義,以塞忠諫之路也。宮中府中,俱為一體,陟罰臧否,不宜異同。若有作姦犯科,及為忠善者,宜付有司,論其刑賞,以昭陛下平明之治,不宜篇私,使內外異法也。

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum accusamus veritatis nemo reiciendis nulla quibusdam sit animi rerum molestiae magnam aspernatur a neque, assumenda consectetur cumque labore natus corrupti perferendis?

Chrome的中英文呈現。

想要將這兩段文字做頭尾對齊,該如何處理呢?CSS有相關的兩側對齊屬性可以設置:

text-align: justify;

加上text-align: justify 後在 Chrome 上的呈現。
加上text-align: justify 後在 IE11 上的呈現。

但結果不盡理想,字距沒有平均拉開、而是只在 space 上拉開了。

可以加上以下設置來繼續調整:

text-justify: inter-ideograph;

加上text-justify: inter-ideograph; 後在 IE11 上的呈現。

但Windows Chrome並不支援此 text-justify 屬性,英文排版仍是呈現只有空白格拉開的情形。

如果要使Windows Chrome的英文字母間距也平均分散,可以這樣操作:

word-break: break-all;

加上word-break: break-all 後在 Chrome 上的呈現。

這個設置有利有弊,他將單字拆開破壞了閱讀性--但是行首行尾終於對齊。斟酌使用吧。

另外,如果需要最末句也完全分散對齊,可以再加上:

text-align-last: justify;

加上text-align-last: justify 後在 Chrome 上的呈現。
加上text-align-last: justify 後在 IE11 上的呈現。

--

--

Yuuyuutube
Yuuyuutube

No responses yet