高质量的内容固然是最重要的,但是好的排版会让你的内容锦上添花,让读者有一个好的阅读体验,也能体现文章背后作者的专业和认真。

比如几个排版优秀的例子:

都做到的内容高质量以及排版上的美观大方。

本文会讲述一些简单易用的排版技术和常见错误。

正确使用标点符号和空格

这是最基础也是最重要的。

在中文文章中应该使用中文的标点符号,在英文文章中则应该使用英文的:

  • 正确:嗨!你知道嘛?今天前台的小妹跟我说「喵」了哎!
  • 错误:嗨!你知道嘛?今天前台的小妹跟我说”喵”了哎!

避免使用不规范的标点格式,比如:

  • 不要用三个感叹号(!!!)来表达强烈情绪,一个即可
  • 不要用三个句号(。。。)来代替省略号(……

中英文之间应该有一个半角空格:

  • 正确:苹果公司在 2015 年 9 月 9 日发布了 iPhone 6s
  • 错误:苹果公司在2015年9月9日发布了iPhone 6s

英文专有名词的大小写应该正确书写:

  • 正确:iOS、macOS、Android
  • 错误:ios、MacOS、android

这方面的有优秀的规范指引,照着做即可:

同时特别推荐这份标点符号的指南,作者实在太用心了:

正确使用列表

大部分的排版系统都会提供有序列表和无序列表。有序列表的语法一般是:

1. 打开冰箱门
2. 把大象放进去
3. 把冰箱门关好

渲染出来的效果:

  1. 打开冰箱门
  2. 把大象放进去
  3. 把冰箱门关好

无序列表则是:

  • 语文
  • 数学
  • 英语

如果你的列表项目之间有顺序关系,那么你应该用有序列表,否则应该用无序列表。

同时对于 Markdown,它可以支持列表项目的内容是多行的,只需要给它的行提供额外的缩进:

1. 列表第一个项目

   第一个项目内的额外行。
2. 列表第二个项目

渲染出来的效果是:

  1. 列表第一个项目

    第一个项目内的额外行。

  2. 列表第二个项目

另外有序列表的标号,不一定是以 1 开头。在 Markdown 中你也可以以其他数字开头:

10. 我是第十项
11. 我是第十一项

渲染出来的效果是:

  1. 我是第十项
  2. 我是第十一项

在这里经常看到的问题是,中英文标点混用,比如:

1、
2、

一.
二.

这些都是不好的例子。如果你想利用英文排版中提供的有序列表,那么你应该用数字加英文句号(如 1.)。如果你想用中文序号,那么应该是中文数字加顿号(如 一、),但无法用上排版系统提供的缩进能力。

不要让链接直接显示出来

由于链接往往是一长串不太可读的英文字符,应该使用链接到文本的 能力 而不是直接放出链接本身。

要不要首行缩进?

对于数字阅读时代,首行缩进是无意义的。原因在于:

  • 移动设备上一行显示的字数少,如果再有两个字的缩进,阅读效率低
  • 大部分的排版系统都会在段落之间用额外的空白来分隔

图片标题

对于放图片的场景,经常需要有用一小段文本描述图片内容或者图片出处的需求。常见的错误是新开一个段落去描述。正确的做法是使用 <figure><figurecaption>。这两个标签是 HTML 标签,在 Markdown 中往往没有对应语法。不过 Markdown 中也可以直接插入 HTML 内容。比如:

<figure>
    <img src="/images/2020/03/custom-container.png" />
    <figcaption>留意图中的红色背景灯泡部分</figcaption>
</figure>

善用表格

表格在做对比时非常好用,比如:

图片来自少数派 帖子

如果善用单元格合并,也可以做出表意清晰但相对复杂的表格。下面是一个我做读书笔记的例子:

脚注

对于不影响正文阅读的扩充性内容,用脚注是非常好的例子。在主流的 Markdown 语法中,脚注是受支持的1,用 Markdown 书写起来是这样的:

我是正文[^1]

[^1]: 我是脚注

自定义容器

有些文档工具会提供自定义容器的功能(如 VuePress),用来表示相对独立、不太顺序文章内容流向的内容,如:

留意图中的红色背景灯泡部分

但大多数文档工具并没有此功能。所以很多人会用块引用(blockquote)来表达此含义。块引用在 Markdown 中的语法是(>),如:

Arch Linux 的官方仓库已经有 GoldenDict,直接安装即可。但是默认不带构词法文件,需要手动下载添加。官网的下载页有说明。

> 对于中文翻译成英文的,目前还没有找到太好的办法,基本上是靠 Google Translate 翻译后再逐词研究。后面有需求时再看看有什么好办法。

渲染成:

Arch Linux 的官方仓库已经有 GoldenDict,直接安装即可。但是默认不带构词法文件,需要手动下载添加。官网的下载页有说明。

对于中文翻译成英文的,目前还没有找到太好的办法,基本上是靠 Google Translate 翻译后再逐词研究。后面有需求时再看看有什么好办法。

虽然从语义上讲块引用并不是用来表达则含义,但是从实践角度是可以授受的。

后记

作为互联网创意工作者的主力军,程序员、设计师和产品经理群体往往更关注内容排版质量,比如 少数派 上的内容一般都有不错的排版质量,可以参考。

能看到这里的,想必都是愿意花时间精力打磨自己内容的人。希望这篇文章对你有所帮助,如有错漏也请指出😜

  1. 我是脚注内容 

评论系统被墙,可以发邮件到 onlyice0328@gmail.com 与我交流。

2019 年终总结

年终总结是个很难写的东西。人只能记得近期发生的事情和感受,要放到一年的尺度去写总结实在很难。所以这篇文章主要是流水账式地罗列一些 2019 发生的事件,以及对今年消费的书影音及游戏内容的评价。离开腾讯我仍然记得腾讯的产品在很久以前带给我的惊喜。QQ 的窗口抖动功能刚出来时,...… Continue reading

日本自由行攻略 Vol.6:其他篇

Published on September 28, 2019

日本自由行攻略 Vol.5:日本环球影城篇

Published on September 27, 2019