11 KiB
中文文案排版指北
统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质。
其他语言：
目录
{:.no_toc}
- TOC {:toc}
空格
「有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。 毕竟爱情跟书写都需要适时地留白。
与大家共勉之。」——vinta/paranoid-auto-spacing
中英文之间需要增加空格
正确：
在 LeanCloud 上，数据存储是围绕
AVObject进行的。
错误：
在LeanCloud上，数据存储是围绕
AVObject进行的。在 LeanCloud上，数据存储是围绕
AVObject进行的。
完整的正确用法：
在 LeanCloud 上，数据存储是围绕
AVObject进行的。 每个AVObject都包含了与 JSON 兼容的 key-value 对应的数据。 数据是 schema-free 的，你不需要在每个AVObject上提前指定存在哪些键，只要直接设定对应的 key-value 即可。
例外：「豆瓣FM」等产品名词，按照官方所定义的格式书写。
中文与数字之间需要增加空格
正确：
今天出去买菜花了 5000 元。
错误：
今天出去买菜花了 5000元。
今天出去买菜花了5000元。
数字与单位之间需要增加空格
正确：
我家的光纤入屋宽频有 10 Gbps，SSD 一共有 20 TB
错误：
我家的光纤入屋宽频有 10Gbps，SSD 一共有 20TB
例外：度 / 百分比与数字之间不需要增加空格：
正确：
今天是 233° 的高温。
新 MacBook Pro 有 15% 的 CPU 性能提升。
错误：
今天是 233 ° 的高温。
新 MacBook Pro 有 15 % 的 CPU 性能提升。
全角标点与其他字符之间不加空格
正确：
刚刚买了一部 iPhone，好开心！
错误：
刚刚买了一部 iPhone ，好开心！
刚刚买了一部 iPhone， 好开心！
用 text-spacing 来挽救？
CSS Text Module Level 4 的 text-spacing 和 Microsoft 的 -ms-text-autospace 可以实现自动为中英文之间增加空白。不过目前并未普及，另外在其他应用场景，例如 macOS、iOS、Windows 等用户介面目前并不存在这个特性，所以请继续保持随手加空格的习惯。
标点符号
不重复使用标点符号
正确：
德国队竟然战胜了巴西队！
她竟然对你说「喵」？！
错误：
德国队竟然战胜了巴西队！！
德国队竟然战胜了巴西队！！！！！！！！
她竟然对你说「喵」？？！！
她竟然对你说「喵」？！？！？？！！
全角和半角
不明白什么是全角（全形）与半角（半形）符号？请查看维基百科词条『全形和半形』。
使用全角中文标点
正确：
海！你知道嘛？今天前台的小妹跟我说「喵」了哎！
核磁共振成像（NMRI）是什么原理都不知道？JFGI！
错误：
嗨! 你知道嘛? 今天前台的小妹跟我說 "喵" 了哎!
嗨!你知道嘛?今天前台的小妹跟我說"喵"了哎!
核磁共振成像 (NMRI) 是什麼原理都不知道? JFGI!
核磁共振成像(NMRI)是什麼原理都不知道?JFGI!
數字使用半形字符
正確：
這件蛋糕只賣 1000 元。
錯誤：
這件蛋糕只賣 １０００ 元。
例外：在設計稿、宣傳海報中如出現極少量數字的情形時，為方便文字對齊，是可以使用全形數字的。
遇到完整的英文整句、特殊名詞，其內容使用半形標點
正確：
賈伯斯那句話是怎麼說的？「Stay hungry, stay foolish.」
推薦你閱讀《Hackers & Painters: Big Ideas from the Computer Age》，非常的有趣。
錯誤：
賈伯斯那句話是怎麼說的？「Stay hungry，stay foolish。」
推薦你閱讀《Hackers＆Painters：Big Ideas from the Computer Age》，非常的有趣。
名詞
專有名詞使用正確的大小寫
大小寫相關用法原屬於英文書寫範疇，不屬於本 wiki 討論內容，在這裡只對部分易錯用法進行簡述。
正確：
使用 GitHub 登錄
我們的客戶有 GitHub、Foursquare、Microsoft Corporation、Google、Facebook, Inc.。
錯誤：
使用 github 登錄
使用 GITHUB 登錄
使用 Github 登錄
使用 gitHub 登錄
使用 gｲんĤЦ8 登錄
我們的客戶有 github、foursquare、microsoft corporation、google、facebook, inc.。
我們的客戶有 GITHUB、FOURSQUARE、MICROSOFT CORPORATION、GOOGLE、FACEBOOK, INC.。
我們的客戶有 Github、FourSquare、MicroSoft Corporation、Google、FaceBook, Inc.。
我們的客戶有 gitHub、fourSquare、microSoft Corporation、google、faceBook, Inc.。
我們的客戶有 gｲんĤЦ8、ｷouЯƧquﾑгє、๓เςг๏ร๏Ŧt ς๏гק๏гคtเ๏ภn、900913、ƒ4ᄃëв๏๏к, IПᄃ.。
注意：當網頁中需要配合整體視覺風格而出現全部大寫／小寫的情形，HTML 中請使用標準的大小寫規範進行書寫；並通過 text-transform: uppercase;／text-transform: lowercase; 對表現形式進行定義。
不要使用不地道的縮寫
正確：
我们需要一位熟悉 JavaScript、HTML5，至少理解一种框架（如 Backbone.js、AngularJS、React 等）的前端开发者。
錯誤：
我們需要一位熟悉 Js、h5，至少理解一种框架（如 backbone、angular、RJS 等）的 FED。
爭議
以下用法略帶有個人色彩，即：無論是否遵循下述規則，從語法的角度來講都是正確的。
鏈接之間增加空格
用法：
请 提交一个 issue 并分配给相关同事。
訪問我們網站的最新動態，請 點擊這裡 進行訂閱！
對比用法：
请提交一个 issue 并分配给相关同事。
訪問我們網站的最新動態，請點擊這裡進行訂閱！
簡體中文使用直角引號
用法：
「老师，『有条不紊』的『紊』是什么意思？」
對比用法：
“老师，‘有条不紊’的‘紊’是什么意思？”
工具
| 仓库 | 语言 |
|---|---|
| vinta/paranoid-auto-spacing | JavaScript |
| huei90/pangu.node | Node.js |
| huacnlee/auto-correct | Ruby |
| sparanoid/space-lover | PHP (WordPress) |
| nauxliu/auto-correct | PHP |
| jxlwqq/chinese-typesetting | PHP |
| hotoo/pangu.vim | Vim |
| sparanoid/grunt-auto-spacing | Node.js (Grunt) |
| hjiang/scripts/add-space-between-latin-and-cjk | Python |
| hustcc/hint | Python |
誰在這樣做？
| 網站 | 文案 | UGC |
|---|---|---|
| Apple 中國 | Yes | N/A |
| Apple 香港 | Yes | N/A |
| Apple 台灣 | Yes | N/A |
| Microsoft 中國 | Yes | N/A |
| Microsoft 香港 | Yes | N/A |
| Microsoft 台灣 | Yes | N/A |
| LeanCloud | Yes | N/A |
| V2EX | Yes | Yes |
| Apple4us | Yes | N/A |
| Ruby China | Yes | 標題達成 |
| PHPHub | Yes | 標題達成 |
| 少數派 | Yes | N/A |