justified 文本:比预期的好?

主要观点:西方语言的长文本排版有左对齐和两端对齐两种,作者在网页设计中避免使用两端对齐,原因是网页中的自动连字符排版较难处理,容易出现不可预测的结果,但看到 Nathan Knowler 的 Mastodon 帖子后受到启发,重新审视用 CSS 实现两端对齐文本。
关键信息:

  • 引用 Matthew Butterick 的观点强调使用两端对齐需开启连字符功能,Jason Santa Maria 称hyphens: auto较粗糙。
  • Nathan Knowler 分享的text-wrap: balance; hyphens: auto; hyphenate-limit-chars: 10;代码可帮助平衡文本避免小词连字符。
  • 以 Lewis Carroll 的《爱丽丝梦游仙境》为例,展示用text-align: justifyhyphens: autotext-wrap: pretty(仅 Chrome 和 Edge 支持)、hyphenate-limit-chars: 7实现两端对齐文本的效果,在中大型容器宽度下效果较好,窄宽度时仍有问题,左对齐文本更灵活可预测且更易读,从无障碍角度看左对齐更适合。
  • 给出在特定容器宽度下使用@container@supports实现响应式两端对齐的代码。

重要细节:

  • 提到不同浏览器如 Chrome、Safari、Firefox 在连字符处理上的差异。
  • 说明了text-wrap: balancetext-wrap: pretty的区别及hyphenate-limit-chars的取值需根据设计和内容确定。
阅读 8
0 条评论