中文排版优化

Photo by qi xna / Unsplash

🎈 起因

我以前写文章从来没有注意过中英文混排的问题,也没有习惯在打英文或者一些特殊符号之前加上一个空格。期间博客圈的博友们也曾经讨论过这方面的问题,但是一直没太上心。

直到我偶然看到了https://sivan.github.io/heti/ 这个项目,并通过延伸大概了解了https://w3c.github.io/clreq/ 这个规范。

因为该规范涉及了字体的使用、出版物的排版规范等等细则,我没有深入接触,因为毕竟是专业排版规范的文章,其实我也没咋看明白,大概瞄了下以下两节。后来找到一篇总结文章:中文文案排版指北,才算是正儿八经看明白。

3.1 标点符号与其排版
3.2 中、西文混排处理

引用heti这个项目的一句总结:

在当下前端技术尚不能完美解决中西文混排间距的情况下,常见的输入习惯是手动在中西文间加入空格(https://github.com/vinta/pangu.js)。这样做的弊端一是间距不可控(有时显得过大),二是通过空格符来排版只能算无奈之举。好消息是在最新的macOS、iOS中,使用原生语言开发的文本区域会自动处理中西文混排的间距(无论是否加空格),期待不用手敲空格的日子早日到来。
-----------— heti作者
按规范排版优化后的效果

我最近的三篇文章已经开始遵循这个规范来进行排版,但是着实有点小麻烦,而且我也不是很注意细节的问题,总要落下几个地方没有按规范排版。其实还是有点小苦恼的,不过heti这个项目中提到过pangu.js这个项目,发现居然简单的一句话就能自动给网页中的中英文加上空格!

经过我一番实操,您现在进来看到的文章应该是已经自动加上空格优化了,而且惊奇的发现如果你是打了空格后pangu不会再多给你加一个空格,美滋滋。

🏗️ 这里归纳一下使用方式把。

  • 引入盘古的库,本地或者CDN都可以。盘古提供了jsDelivrcdnjs(这两个国内可能不好使,刚刚引入没梯子加载不出来, 推荐使用bootcdn)
<!-- 1. 下载文件上传到vps,然后引用 -->
<script src="pangu.min.js"></script>
<!-- 2. 使用cdn,以下任选一个都行 -->
<script src="https://cdn.bootcdn.net/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
<script src="https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js"></script>
  • 调用pangu对网页进行空格处理。pangu会自动初始化,并提供了几个工具函数调用,分别可以通过id,class,tag进行批量处理。甚至你可以调用自动处理函数。这就要根据大家的各自情况来进行调用了。
<script>
  //const text = pangu.spacing("當你凝視著bug,bug也凝視著你");
  // text = '當你凝視著 bug,bug 也凝視著你'
  //1. 格式化指定id标签
  //pangu.spacingElementById('main');
  //2. 格式化带有指定class的标签
  //pangu.spacingElementByClassName('comment');
  //3. 格式化指定标签
  //pangu.spacingElementByTagName('p');

  // 文档加载完毕后自动格式化整个网页
  document.addEventListener('DOMContentLoaded', () => {
    // listen to any DOM change and automatically perform spacing via MutationObserver()
    pangu.autoSpacingPage();
  });
</script>

我目前是直接把调用代码加进了ghost的footer script里,主题都不用改,美滋滋。

本文历史

  • 2022-06-01 07:46 完成初稿
  • 2022-06-01 08:31 文章发布
  • 2022-06-11 07:51 进行过修改