中文排版优化

🎈 起因

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

直到我偶然看到了 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 都可以。盘古提供了 jsDelivr 和 cdnjs（这两个国内可能不好使，刚刚引入没梯子加载不出来， 推荐使用 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 里，主题都不用改，美滋滋。