跳至主要內容

博客排版

Sankgao约 2432 字大约 8 分钟AboutBlog

统一中文文案、排版的相关用法,增强网站气质。

空格

空格

汉学家称这个空白字元为「盘古之白」,因为它劈开了全形字和半角字之间的混沌。另有研究显示,打字的时候不喜欢在中文和英文之间加空格的人,感情路都走得很辛苦,有七成的比例会在 34 岁的时候跟自己不爱的人结婚,而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。

与大家共勉之。

中英文之间需要增加空格

正确:

在 LeanCloud 上,数据存储是围绕 AVObject 进行的。

错误:

在LeanCloud上,数据存储是围绕AVObject进行的。

在 LeanCloud上,数据存储是围绕AVObject 进行的。

完整的正确用法:

在 LeanCloud 上,数据存储是围绕 AVObject 进行的。每个 AVObject 都包含了与 JSON 兼容的 key-value 对应的数据。数据是 schema-free 的,您不需要在每个 AVObject 上提前指定存在哪些键,只要直接设定对应的 key-value 即可。

例外:「豆瓣FM」等产品名词,按照官方所定义的格式书写。

中文与数字之间需要增加空格

正确:

今天出去买菜花了 5000 元。

错误:

今天出去买菜花了 5000元。

今天出去买菜花了5000元。

数字与单位之间无需增加空格

正确:

我家的光纤入户宽带有 10Gbps,SSD 一共有 10TB。

错误:

我家的光纤入户宽带有 10 Gbps,SSD 一共有 20 TB。

另外,度/百分比与数字之间不需要增加空格:

正确:

今天是 233° 的高温。

新 MacBook Pro 有 15% 的 CPU 性能提升。

错误:

今天是 233 ° 的高温。

新 MacBook Pro 有 15 % 的 CPU 性能提升。

全角标点与其他字符之间不加空格

正确:

刚刚买了一部 iPhone,好开心!

错误:

刚刚买了一部 iPhone ,好开心!

-ms-text-autospace to the rescue?

Microsoft 有个 -ms-text-autospaceopen in new window 的 CSS 属性可以实现自动为中英文之间增加空白。不过目前并未普及,另外在其他应用场景,例如:OS X、iOS 的用户界面目前并不存在这个特性,所以请继续保持随手加空格的习惯。

标点符号

不重复使用标点符号

正确:

德国队竟然战胜了巴西队!

她竟然对您说「喵」?!

错误:

德国队竟然战胜了巴西队!!

德国队竟然战胜了巴西队!!!!!!!!

她竟然对您说「喵」??!!

她竟然对您说「喵」?!?!??!!

全角和半角

不明白什么是全角(全形)与半角(半形)符号?请查看维基百科词条『全角和半角open in new window』或者百度百科词条『全角open in new window』和『半角open in new window』。

简单介绍:

全角」指一个字符占用两个标准字符位置的状态,如:中文模式下的逗号、句号等 :,。?「」

半角」就是 ASCII 方式的字符,在没有中文输入法起作用的时候输入的字母数字和字符都是半角的,如:英文模式下的逗号、句号等 : , . ; ? ""

使用全角中文标点

正确:

嗨!您知道嘛?今天前台的小妹跟我说:“喵” 了哎!

核磁共振成像(NMRI)是什么原理都不知道?JFGI!

错误:

嗨! 您知道嘛? 今天前台的小妹跟我说: "喵" 了哎!

嗨!您知道嘛?今天前台的小妹跟我说"喵"了哎!

核磁共振成像 (NMRI) 是什么原理都不知道? JFGI!

核磁共振成像(NMRI)是什么原理都不知道?JFGI!

数字使用半角字符

正确:

这件蛋糕只卖 1000 元。

错误:

这件蛋糕只卖 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》,非常的有趣。

名词

专有名词使用正确的大小写

大小写相关用法原属于英文书写范畴,在这里只对部分易错用法进行简述。

正确:

使用 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。

争议

以下用法略带有个人色彩,即:无论是否遵循下述规则,从语法的角度来讲都是 正确 的。

链接之间增加空格

用法:

提交一个 issueopen in new window 并分配给相关同事。

访问我们网站的最新动态,请 点击这里open in new window 进行订阅!

对比用法:

提交一个 issueopen in new window 并分配给相关同事。

访问我们网站的最新动态,请点击这里open in new window进行订阅!

简体中文使用直角引号

用法:

「老师,『有条不紊』的『紊』是什么意思?」

对比用法:

“老师,‘有条不紊’的‘紊’是什么意思?”

自我

文档命名规范

正确:

关于_技巧

错误:

关于技巧

笔记 技巧

排版~技巧

加粗文字增加空格

正确:

一个好的 排版 彰显好的文档。

错误:

一个好的排版彰显好的文档。

加粗文字与标点符号

加粗的文字如果是最后一行,或者独处一行,那么加粗范围包括标点符号;

加粗的文字如果后面还有文字,则加粗范围不包括标点符号。

正确:

欢迎来到我的博客,请慢慢食用。

欢迎来到我的博客,请慢慢食用。

错误:

欢迎来到我的博客,请慢慢食用

欢迎来到我的博客, 请慢慢食用。

可能看不太清楚,这里解释一下:

  • 错误的例子中,句号在加粗范围外面,逗号在加粗范围里面
  • 正确的例子中,句号在加粗范围里面,逗号在加粗范围外面

加粗标题使用引号(可选)

加粗的字体在手机端显示失效,阅读的效果与普通文字一样,所以加引号既可以在电脑端双重突出,也可以在手机端突出。

这里的引号指的是 Markdown 的引号,即开头添加的 > 符号,特征是左侧有阴影竖条块,如本内容的例子都是通过引号突出。

正确:

什么是 Young

Young 代表年轻、朝气、希望、活力……

错误:

什么是 Young

Young 代表年轻、朝气、希望、活力……

体系化文档开头添加目录

生成可以跳转的目录,方便他人阅读和选择。

如:VuePress 可以解析 [[TOC]] 字符串从而生成目录。

有序/无序列表末尾不加标点符合

因为开头的符号已经代表句号、感叹号、问号了。

正确:

  • 欢迎来到我的博客

  • 希望能入您法眼

  1. 酒菜不多,但都是精华。请慢慢食用

  2. 文章内容不恰当,可以在评论区留言

错误:

  • 欢迎来到我的博客。

  • 希望能入您法眼。

  1. 酒菜不多,但都是精华。请慢慢食用。

  2. 文章内容不恰当,可以在评论区留言。

格式化工具

使用这些工具,可以一次性把需要的文章按照工具的规定进行格式化,类似于杂乱的代码被格式化有序。

仓库语言
vinta/paranoid-auto-spacingopen in new windowJavaScript
huei90/pangu.nodeopen in new windowNode.js
huacnlee/auto-correctopen in new windowRuby
sparanoid/space-loveropen in new windowPHP (WordPress)
nauxliu/auto-correctopen in new windowPHP
ricoa/copywriting-correctopen in new windowPHP
hotoo/pangu.vimopen in new windowVim
sparanoid/grunt-auto-spacingopen in new windowNode.js (Grunt)
hjiang/scripts/add-space-between-latin-and-cjkopen in new windowPython

谁在这样做?

网站文案UGC
Apple 中国open in new windowYesN/A
Apple 香港open in new windowYesN/A
Apple 台湾open in new windowYesN/A
Microsoft 中国open in new windowYesN/A
Microsoft 香港open in new windowYesN/A
Microsoft 台湾open in new windowYesN/A
LeanCloudopen in new windowYesN/A
知乎open in new windowYes部分用户达成
V2EXopen in new windowYesYes
SegmentFaultopen in new windowYes部分用户达成
Apple4usopen in new windowYesN/A
豌豆荚open in new windowYesN/A
Ruby Chinaopen in new windowYes标题达成
PHPHubopen in new windowYes标题达成
少数派open in new windowYesN/A
力扣 LeetCodeopen in new windowYesYes

参考文献