中英文混排的“Social Distancing”

2020.5.15 技术/设计

我是从去年开始才注意到中英文混合排版时候的空格问题的。当时正在完成我的毕业论文，就发现中英文之间是需要一定的距离才能够更方便阅读者的阅读。加上最近疫情期间北美强调“Social Distancing”这个概念，遂借来描述一下中英文混排中需要注意添加空格的习惯。

盘古之白

之前有在少数派看到「为什么你们就是不能加个空格呢？」，其中介绍到了 pangu.js 的项目，它提供了 Chrome 插件自动在网页中英文之间插入空格，并且也提供了 Go、JavaScript、Python 等语言下的模块帮助自动格式化中英文片段。

漢學家稱這個空白字元為「盤古之白」，因為它劈開了全形字和半形字之間的混沌。另有研究顯示，打字的時候不喜歡在中文和英文之間加空格的人，感情路都走得很辛苦，有七成的比例會在 34 歲的時候跟自己不愛的人結婚，而其餘三成的人最後只能把遺產留給自己的貓。畢竟愛情跟書寫都需要適時地留白。

空格规则

下面表格总结了在哪些情况下需要使用到空格。当然，这个规则也只是作为参考，比如超链接空格等规则是有待商榷的，以习惯为准。

搭配	规则	示例
中文与英文	需空格	我使用 Google 搜索引擎
中文与数字	需空格	今天 20 摄氏度
英文与数字	需空格	最近更新了 iOS 13.5 版本的系统
数字与单位	需空格	香蕉 1.99 美元一磅
数字与百分比	无需空格	谷歌浏览器市场占比高达 58.4% 了
日期	无需空格	今天是2020年1月1日
全角标点与字符	无需空格	喂！你在干什么？！
省略号	后需空格	这…… 有问题吗
全角括号	无需空格	全角括号（示例），禁止(半角无空格)或者 (半角加空格) 写法
超链接	需空格	参考这里的示例

网页工具

道理都懂，但是之前书写的时候并没有注意到这些。借助于 pangu.js，我写了一个简单的 HTML 网页，用来帮我给之前文章自动化添加空格，并且复制到剪贴板上。当然，pangu.js 在格式化 Markdown 书写的文字时候，会破坏 Markdown 的一些标记，譬如 **加粗** 会变成 ** 加粗 **。因此还是平时打字的时候养成随手加空格的习惯比较重要。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Spacing Tool</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.min.js"></script>
  <link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
  <style>
    .input-container {
      margin-top: 3rem;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .form-control {
      min-width: 30rem;
      min-height: 15rem;
      margin-bottom: 2rem;
    }
  </style>
</head>

<body>
  <h1 style="text-align: center; margin-top: 3rem;">Text Spacing Tool</h1>
  <div class="input-container">
    <label>Before</label> <textarea class="form-control" id="input-textarea"></textarea>
    <label>After</label> <textarea class="form-control" id="output-textarea"></textarea>
  </div>
  <script>
    var inputText = document.getElementById('input-textarea');
    var outputText = document.getElementById('output-textarea');

    window.addEventListener('load', () => { inputText.focus(); })

    inputText.addEventListener('input', () => {
      outputText.value = pangu.spacing(inputText.value);
      outputText.select();
      document.execCommand("copy");
      inputText.select();
    });
  </script>
</body>

</html>

参考：

加载评论