Web | 排版左对齐(left)与两端对齐(justify)的思考

14 Sep 2016

本话题是我在写本博客样式时遇到的。

什么时候该用 justify?

行间长度相较栏宽差异过大时。单纯左对齐,会令行尾长短参差不齐,影响阅读和版面美观;而 justify 可以通过对字间距词间距的微调另行头尾对齐,使版面更加整洁。


问题

按理说书籍文章正文的 text-align 使用 justify 是最佳的选择。然而我在如此样式设置下展示出的文章正文却显得非常凌乱,主要有以下问题:

  • 中英文混排、文字与代码块混排时,行与行之间的字间距大小不一,疏密参差不齐。
  • 全英文时,各行词间距参差不齐,普遍词间距过大。

为什么会这样?

在中文字体排印当中,应该将为实现「头尾对齐」而添加的空白合理分散至所有空格和汉字字间距当中,且避免行首标点,可以通过对行末文字与标间间距的调整在行末追加标点。(调整间距追加标点这一项浏览器也没有实现)

而在英文排版中,为了实现「头尾对齐」令行间差异变小,会在行末使用 hyphenation。但这一点在浏览器里似乎并未实现,我当前浏览器版本为 Chrome Version 52.0.2743.116 (64-bit)


于是一旦遇到中西文混排,中西文代码块混排时,头尾对齐空白就无法合理配置了。

其中一个重要原因便是浏览器没有 hyphenation 的实现。因此一行内为了避免英文词被切断,如果行末剩下小于放置完整一个词的空隙时,下一个词就会换行显示,而本行末留下的几乎是一个词的空白就会加上原本的字词间距一起被分配给其他字词之间,简直惨不忍睹。

代码块同理,因为代码块也无法在行末断开。


以上均是技术上的实现所限制,所以无法在原生网页里很好的排版。如果是商业网站或者阅读类产品,则可以自己封装实现一套排印规范,解决左右对齐的问题。


结语:

我最终选择左对齐了,因为中文为主的文本行间长度差异本就不会太大,而在没有 hyphenation 实现的情况下,全英文排版我宁愿行尾长度不一而词间间距一致,也不愿意每行的词间都留下参差不齐的空白,毫无规则可循。

Published on 14 Sep 2016 · Find me on Twitter !

更新 UX | 分页和无限滚动自动加载之间如何选择

更旧 Web | 关于「空格符」

back to top