关于网页排版和文章编辑那些事

2013-11-14 本文已影响14262人黄杨ME

最近产品组的项目网站到了内网测试阶段。发现一些页面文章排版和编辑上的问题，这个对我们来说并不是什么新问题。简单说就是小编们在网站后台发布文章的时的一些问题。今天晚上无心码字，说说我的一些看法。

关于网页排版

有一说 Web Design is 95% Typography ，可见排版对于web设计来说有多么的重要。尤其是对于一些重视内容和阅读体验的网站（比如：简书、iA）就算没有复杂绚丽的交互、风格流行的色彩和图片，依然可以依靠舒适合理的排版布局而变得优秀。网页排版和传统平面排版虽然有一些基本的东西是相通的，但还是有一些不同。网页排版由于平台、终端、使用场景等的复杂性，所以不单纯是web设计师的事情，也包括前端重构狮，UED甚至后端程序猿都需要牵扯进来。就不说什么多平台响应式设计、方块字和罗马字在排版上的不同处理，单是网页字体的使用，已经够写的一本书了。

段首缩进和段间距

段首缩进和段间距都是用来区分段落，明示逻辑关系，提高「易读性」的。其中段首缩进是针对罗马字母系统所使用的排版方式，很多时候并不完全适用于方块字系统。在某些情况下会使得段首所空格数为非整数、不统一，影响阅读。

很多小编并没有明白网页排版中段首缩进的真正含义和用法，这和传统出版行业还是不太一样的。小编们往往会认为首行缩进就是段落首行空两格，于是在每写一段之前都要啪啪键两下空格键。但是即使都是空格，全角和半角空格的占位字符还是不一样的。我想这主要是源于有些人从小写作文就段首空两格，于是觉得段首必须空两格。但完全没这回事。只要能在视觉上把段落隔开，就可以不用段首缩进。

段首缩进（尤其对于中文，缩进两字宽）只是分隔段落的手法之一。现代排版中还常用的另一个手法就是段间距。

段首缩进的优势是视觉效果低调，节省纵向空间，保障文本气息连贯。而段间距的优势是视觉效果显著，保障文本块整洁，提供阅读的气口。二者适合不同的场合。网页里用段间距能充分利用无限的纵向空间，并且在不怎么分页的长篇阅读体验中提供休息的间隙，避免长篇文字密密麻麻。网页里段间距的确常常比段首缩进更合适。

技术实现

首先需要理解的最重要的一点就是内容和样式分离，也就是说，编辑只管写，至于怎么缩进、超链接什么颜色、该用几号字号等等，这些还是交给CSS吧。从技术层面来说，只用可视化编辑器生成标签，不可以生成样式。总之，不要有空格和超过一次以上的回车就总是安全的。

段首缩进可以用CSS的 text-indent:2em 轻松实现，段间距一般设定 <p> 的纵向 margin 是最合理的方法。

关于段首缩进和段间距说了这么多了，这里推荐看一下知乎上知友 justjavac 的回答：网页文章编辑首行缩进有必要吗？

最后抄一段《老猫学出版》里的总结：

分段的目的是因为段落分明可以增加易读性，而不是因为有个标准的形式所以大家要遵守。报纸杂志只要空一格，就足以使段落分明，书版则常常需要空两格才能达到同样的效果，电脑屏幕呢？没错，在电脑上阅读，空行才有办法在视觉上产生同样的感受。

关于可视化编辑器

在特意使用后台的可视化编辑器编辑并上传了几篇文章之后，我失望地发现，后台的所见即所得编辑器功能太复杂且生成的代码很不干净；更别提改版之前的大量文章的格式没有统一，有的文章缩进了，有的没有用空格缩进，有的用半角空格缩进，有的用全角空格缩进。于是我狠下心找程序童鞋砍掉了大部分或许永远也用不到的可视化功能，之后编辑器才简单好用了一些，小伙伴们使用后都大呼畅快。

作为前端小狮子和自认对网页排版相对有一些认识的我，给网站的（主要是）编辑童鞋编写了一份网页排版和编辑规范的文档。包括告诉他们什么是网页的内容和样式的分离，后台发文章的时候不要带任何的样式，包括段间空行，段首缩进，告诉他们这些是CSS 的任务不是编辑的工作。他们只管写得优质的内容，网页排版和样式上，做得越少，就是做得越好（less is more）。

我认为可视化编辑器对于HTML5时代的网页排版设计来说已经开始过时了。HTML代码已经非常简单，并且HTML5新增加了一些非常好的语义化标签，即使没有一点基础的编辑童鞋，花半天时间也能了解个差不多。其实网页上文章内容最常用的标签无外乎就那十几个。

如果HTML“代码”会让你觉得心生畏惧的话，那么我强烈推荐你学一下 Markdown，它是一种轻量级标记语言，它的语法非常简单，甚至不能算得上是一种计算机语言。而只是一些简单的有语法意义的符号。他还可以方便的生成HTML格式的文档。关于Markdown的用法在此就不多说了，推荐阅读开始使用 Markdown 、简书的Markdown 专栏，想完整的学习请转 Markdown 语法说明。试试吧，你会爱上它的。