Jpom/typography-specification.md
2022-06-02 09:39:27 +08:00

14 KiB
Raw Blame History

中英文排版规范

编写目的

统一团队成员的书写风格与规范,增强对外网站用户的浏览体验。

和其他排版指南的区别

市面上已经有很多相关的排版指南了,但是我个人阅读后感觉都不是特别好,要么就是一个点一个点的列举,然后下面跟着一大堆例子,这样不方便我们查阅某个点;要么就是只列出了点,没有具体的例子和说明,读完之后还是不知所以然。本指南整合了这两种的优缺点,先把点列出来,可以方便查阅,如果想查看具体的例子可以点击超链接跳转,或者在文章的末尾查看例子和说明。

注意:本文所有的超链接都可以进行点击,点击后可以跳转到对应的示例或者原文。

文章的末尾是编写本文所有参考过的排版指南以及资料,感谢前辈们的贡献。

正确使用单词的大小写

以下例子均为正例,下面列出经常用错的大小写单词。

在使用的时候,如果你不确定单词正确的拼写,请前往官网查看。

空格的使用

加空格的情况

不加空格的情况

标点符号的使用

参考例子

下面的例子可以帮助你进一步理解对应的规范,以及为什么要有这样的规范,大公司的网站是怎么用到的。

空格的使用

加空格的情况

英文半角句号后接单词要加空格

正例:

GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

反例:

GitHub is a code hosting platform for version control and collaboration.It lets you and others work together on projects from anywhere.

参考资料:https://docs.github.com/en/get-started/quickstart/hello-world

英文半角逗号后接单词要加空格

正例:

You can download, install and maintain your own GitLab instance.

反例:

You can download,install and maintain your own GitLab instance.

参考资料:https://about.gitlab.com/install/

英文半角小括号前后都要加空格

正例:

Virtual machines (VMs) are an abstraction of physical hardware turning one server into many servers.

反例:

Virtual machines(VMs)are an abstraction of physical hardware turning one server into many servers.

参考资料:https://www.docker.com/resources/what-container/

中英文之间要加空格

正例:

将使用情况统计信息和崩溃报告自动发送给 Google帮助我们完善 Google Chrome。

反例:

将使用情况统计信息和崩溃报告自动发送给 Google帮助我们完善 Google Chrome。

参考资料:https://www.google.com/intl/zh-CN/chrome/

中文与数字之间要加空格

正例:

适用于 Windows 11/10/8.1/8/7 64 位。

反例:

适用于 Windows 11/10/8.1/8/7 64 位。

参考资料:https://www.google.com/intl/zh-CN/chrome/

数字与单位之间要加空格

正例:

The Omnibus GitLab package requires about 2.5 GB of storage space for installation.

说明:数字 2.5 和单位 GB 之间需要添加一个空格。

反例:

The Omnibus GitLab package requires about 2.5GB of storage space for installation.

参考资料:https://docs.gitlab.com/ee/install/requirements.html

超链接英文文本前后都要加空格

正例:

如果你是来自 React 的开发者,你可能会对 Vuex 和 [Redux](https://github.com/reactjs/redux) 间的差异表示关注Redux 是 React 生态环境中最流行的 Flux 实现。

正例显示效果:如果你是来自 React 的开发者,你可能会对 Vuex 和 Redux 间的差异表示关注Redux 是 React 生态环境中最流行的 Flux 实现。

反例:

如果你是来自 React 的开发者,你可能会对 Vuex 和[Redux](https://github.com/reactjs/redux)间的差异表示关注Redux 是 React 生态环境中最流行的 Flux 实现。

反例显示效果:如果你是来自 React 的开发者,你可能会对 Vuex 和Redux间的差异表示关注Redux 是 React 生态环境中最流行的 Flux 实现。

参考资料:https://docs.github.com/en/rest/overview/resources-in-the-rest-api

英文单词和英文单词之间要有一个空格

正例:

Hello World!

反例:

HelloWorld!
中文和英文单词之间要有一个空格

正例:

通过 Gmail、Google Pay 和 Google 助理等 Google 应用Chrome 可帮助您保持工作效率并充分利用您的浏览器。

反例:

通过Gmail、Google Pay和Google助理等Google应用Chrome可帮助您保持工作效率并充分利用您的浏览器。

参考资料:https://www.google.com/intl/zh-CN/chrome/

不加空格的情况

中文全角标点符号前后都不加空格

正例:

您可为标签页分组,以便将彼此相关的网页保存在同一个工作区内。如需创建标签页组,只需右键点击任一标签页并选择“向新组添加标签页”即可。

参考资料:https://www.google.com/intl/zh-CN/chrome/tips/

数字与度之间不加空格

正例:

角度为 90° 的角,就是直角。

说明90° 是一个整体,不应该用空格分开。

反例:

角度为 90 ° 的角,就是直角。
数字与百分比之间不加空格

正例:

我现在手机的电量是 100%。

反例:

我现在手机的电量是 100 %。
全角标点与其他字符之间不加空格

正例:

期末考试通过了,好开心!

反例:

期末考试通过了, 好开心!
英文单词和半角句号之间不加空格

正例:

All Roads Lead to Rome.

反例:

All Roads Lead to Rome .
超链接中文文本前后都不加空格

正例:

Redux 事实上无法感知视图层,所以它能够轻松的通过一些[简单绑定](https://classic.yarnpkg.com/en/packages?q=redux%20vue&p=1)和 Vue 一起使用。

正例显示效果Redux 事实上无法感知视图层,所以它能够轻松的通过一些简单绑定和 Vue 一起使用。

反例:

Redux 事实上无法感知视图层,所以它能够轻松的通过一些 [简单绑定](https://classic.yarnpkg.com/en/packages?q=redux%20vue&p=1) 和 Vue 一起使用。

反例显示效果Redux 事实上无法感知视图层,所以它能够轻松的通过一些 简单绑定 和 Vue 一起使用。

参考资料:https://cn.vuejs.org/v2/guide/state-management.html

标点符号的使用

中文句子中使用破折号 ——

正例:

我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高级功能,所以请务必读完整个教程!

说明:破折号占两个字的位置,中间不能断开,上下居中。

反例:

我们刚才简单介绍了 Vue 核心最基本的功能—本教程的其余部分将更加详细地涵盖这些功能以及其它高级功能,所以请务必读完整个教程!

参考资料:https://cn.vuejs.org/v2/guide/

不连续使用相同标点符号

正例:

如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!

反例:

如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!!!

说明:有时我们在书写的时候想进行感叹,可能会情不自禁地连续使用了相同的标点符号,但是请克制住自己,不要连续使用相同的标点符号。

参考资料:https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

中文句子中使用全角标点符号

正例 1

借助个人资料,您可单独保存自己的所有 Chrome 信息,例如书签、历史记录、密码及其他设置。个人资料最适合用于以下情况:多人共用一台计算机,或者您需要分隔自己的不同帐号(例如工作帐号和个人帐号)。

参考资料:https://www.google.com/intl/zh-CN/chrome/browser-features/

正例 2

您可以根据自己的需求或心情,选择主题和颜色(例如“深色模式”)。

参考资料:https://www.google.com/intl/zh-CN/chrome/browser-features/

英文句子中使用半角标点符号

正例:

You build it, you run it.

反例:

You build ityou run it。

中英文混用时使用全角标点符号

正例:

通过 Gmail、Google Pay 和 Google 助理等 Google 应用Chrome 可帮助您保持工作效率并充分利用您的浏览器。

参考资料:https://www.google.com/intl/zh-CN/chrome/

数字使用半角字符

正例:

这个蛋糕价值 1000 元。

反例:

这个蛋糕只卖  元。

遇到完整的英文整句、特殊名词,其内容使用半角标点

正例:

乔布斯那句话是怎么说的「Stay hungry, stay foolish.」

说明:中文句子使用中文全角标点符号,英文句子使用英文半角标点符号。

参考文献:

chinese-copywriting-guidelines

Basic writing and formatting syntax - GitHub Docs

写给大家看的中文排版指南

Dubbo 博客文档中文排版指南

中文文本排版指南

Vue.js 内部文档规范