麦田的博客

详解网页段落首行缩进

2019-11-14


2019年,再次遇到网页文字段落首行缩进问题:到底是否要缩进?

找到这篇2016年的文章,发现我早有定论,现在我还是坚持这个方法:

文字多的网页使用Text-Indent,设置首行缩进,优化阅读体验;

文字少的网页不使用Text-Indent样式,不设置缩进!

为什么要设置首行缩进?

1、在中国出版的书籍,我能看到的排版全部都是首行缩进,包括一些中英对照读物,英文文字的排版也是首行缩进;

2、首行缩进后,读者可以迅速的明白这是新的一段文字,有明显的段落感和层次感;

大家都是怎么处理首行缩进?

1、手机阅读APP里面都是长篇的文字,他们的排版阅读起来很轻松,是多文字网页排版的典范:

小说网站首行缩进

小说网站首行缩进

小说网站首行缩进

注意:从上图可以看出来,除了段落首行缩进,每个段落之间还有距离(段间行距),增强段落感和层次感,优化阅读体验!css如下:

text-indent: 2em;
margin-top: 10px;
line-height: 30px;

2、除小说阅读类网站和APP以外,其他网站的文字有的缩进,有的不缩进,不缩进的如下图。因为都是短文,阅读起来也很舒适:

网站首行缩进

3、还有一种是特殊排版:首行第一个字超大写,占两行,中英文都适用;

怎么设置首行缩进?

text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/

问题1:设置首行缩进和自适应网页的冲突

正文内容中有独立段落的图片时,图片也会被缩进,自适应网页还会出现左右滚动条。所以有人因为搞不定图片这个问题最后放弃使用段落首行缩进。

解决:text-indent有个奇怪的属性,就是其内部元素遇到float或者display: block后就不继承外部这个缩进的属性了,也就是说,只要给图片加上float或者display: block的 CSS属性后,图片的缩进会自动失效。

为了排版的效果,建议图片使用display:block;,这样图片就不会缩进。

问题2:有些文字不需要缩进怎么处理?方法如下:

<p style="text-indent: 0em">这一段文字不缩进,比如相关文章</p>

以下是2016年的文章:

麦田的网站有些是首行缩进的,有些是按照英文排版不缩进,那么是否缩进有什么区别吗?

中文缩进的起源

段落首行缩进属于文字排版的范畴,最早来源于西方。

大家知道在新文化运动之前,汉字按中国人本身习惯是从上往下书写从右至左,行行缩进并不空出。

在新文化运动时,知识分子判断没有使用口语书写的方式是造成中国落后原因之一,所以开始了白话文运动。白话文运动让国人认为文字排列方式是造成中国落后的原因的深信不疑,所以就采用了西方人的从左往右,从上往下的书写方式,在排版上也参考了西方的排版方式,但在首行缩进上觉得并无突出必要而是采取中国方式的直接章节区分或空出数行来表示逻辑上的分割。

段落首行缩进主要是为了读者阅读方便。在西方文字中有句首大写的习惯,因此大部分时候行首顶格也很容易分辨是新起一段,而中文却不能如此表现。

另外,中文印刷行间距和段间距是相同的,为了段落之间的区分更加明显,采用首行缩进的方式来显示是比较有效的。

美学因素

西文文本是流动的、横向线条状的、节奏不断变化的,那中文文本就是点状的、静止的、节奏稳定的。相比西文文本的横向强联系与纵向行间空隙。文文本里「行」的感觉弱得多,汉字的颗粒感打断了横向的紧密联系(我们经常还会用网格来辅助中文排版,网格同时强调纵横的联系),于是中文的行就让人感觉不易「流动」了。 对西文来说,「段首缩进」是可以弹性调整的,是对文本的自由推移;而对中文来说,「段首空格」或「段首空字」是让文本整齐地在段首空出两个汉字的位置,如果空的不是整数个而是 2.3 个什么的,我会觉得很不舒服,因为这打破了段落内每行左侧几个字本来很容易达成的纵向对齐。

我们发现汉字的「段首空格」和西文的「段首缩进」是很不一样的。西文排版要求的一般是行内对齐(基线),行间节奏稳定;可汉字排版还需要尽量纵向对齐(纵向对齐如果无意中出现在西文段落里,会生成难看的「river」),段首也不例外,一样是需要对齐的。如果首段的段首不空格,就打破了段落间的纵向对齐,这是很唐突的。

闭上眼睛想象一下:如果一篇汉字文本的字号足够小,相对行高足够大,到了横向联系明显强于纵向联系(可能得小到我们看不清字为止),段首怎么空格或是怎么缩进按照西文习惯来就没什么问题了。

可是,在正常字号下,汉字的纵向联系很强,无法忽视。我可以根据字号和栏宽的关系来选择不同的段首空格数目,但不会单单让首段不空格。

国家规定的影响

恪守一律「自然段首左空 2 字」,应是受国家对行政公文的规范影响。在GB/T9704-1999《国家行政机关公文格式》中就有相关规定对公文正文规定如下:

主送机关名称下一行,每自然段左空 2 字,回行顶格。数字、年份不能回行。这个规定也是我们从小被教育,用来排版的规范。

思考

在印刷时代,段间距和行间距有所区别基本上是很难实现的。时代在发展,现在电子书、网络媒体这么发达,我看到越来越多的网站通过采用增加段间距的方式来进行段落之间的区分,开始摒弃锻炼首行缩进。另段落首行缩进从美学上来说不符合对齐的规则,一些纸媒也开始尝试用增加段间距的方式来替代首行缩进。

麦田建议

书写长篇的时候,建议使用首行缩进,便于阅读,减少阅读者的判断。

如果文字内容少,既可以使用首行缩进又可以不缩进。不缩进的阅读体验也很好。

首行缩进和自适应网页的冲突

Text-Indent会把文字缩进,图片也会跟着缩进,这样就不好确定图片的宽度(小问题),而且制作自适应网页时,图片会撑破右侧边框,这是个难题。

那有没有方法让文字缩进,图片不随着缩进呢?

解决方法是:

text-indent的内部元素遇到float或者display: block后就不继承外部这个缩进的属性了,也就是说,只要给图片加上float或者display: block的 CSS 属性后,图片的缩进会自动失效。

如果加上margin: 0 auto; 图片会居中显示。示例:

img{margin:0或者5px auto;display: block;}

这样设置后,虽然解决了图片跟着缩进的问题,但是新的问题来了:这样不美观!

麦田最终选择:图文多的网站去掉Text-Indent,纯文字的网站继续使用 Text-Indent


相关内容

  • 网站监控宕机监控服务器监控
  • CDN详解和自建CDN的方法
  • HTML引入CSS的方法和示例
  • 麦田收集的优秀网站
  • 阅读指南
  • 我的域名投资经验
  • 改善Banner设计的要点
  • 网站结构经验谈
  • 网站设置301重定向的方法
  • 各类网站备份与还原方法
  • 标签

    设计网站