使用 text-wrap 实现更好的排版效果

主要观点:

  • Safari Technology Preview 中支持text-wrap: pretty,能提升网页排版水平,WebKit 版本的pretty可评估整段文本以改善排版。
  • 传统排版有避免短尾行、不良锯齿等原则,而网页排版曾仅逐行布局,存在诸多问题,如今text-wrap: pretty带来改变。
  • text-wrap: balance可使每行长度相近,适用于标题等较短文本,与text-wrap: pretty用途不同。
  • 各浏览器对text-wrap: pretty的实现有所差异,如 Chrome 仅调整段落最后四行,WebKit 则处理所有行,且要考虑性能影响。
  • text-wrap属性是text-wrap-modetext-wrap-style的简写,可独立控制换行与否及换行算法。

关键信息:

  • text-wrap: pretty能防止短尾行、改善锯齿、减少连字符使用,在 Safari Technology Preview 216 中效果显著,可通过演示查看。
  • text-wrap: balance使每行长度相近,适用于标题等较短文本,不同浏览器对其性能限制不同。
  • text-wrap: avoid-short-last-lines专注避免短尾行,尚未在浏览器中实现。
  • text-wrap: auto是默认值,目前逐行布局,未来可能改变。
  • text-wrap: stable用于可编辑文本或动画文本,保持原始换行算法。
  • text-wrap-modetext-wrap-style可独立控制换行相关设置,text-wrap-mode控制换行与否,text-wrap-style选择换行算法,2024 年 10 月在 Chromium 中支持。

重要细节:

  • Safari Technology Preview 216 中text-wrap: pretty对所有行生效,性能方面需考虑内容长度,若担心可提交 WebKit 错误报告。
  • 不同浏览器对text-wrap各值的实现和性能限制不同,如 Chromium 限制text-wrap: balance处理的行数为四行。
  • 可通过演示尝试不同text-wrap值的效果,如在codepen中进行操作。
  • 若对text-wrap: pretty有反馈,可在 Bluesky 或 Mastodon 上联系 Jen Simmons 或提交 WebKit 错误报告。
阅读 31
0 条评论