Site sections

基于内容的理想行宽

Russ Weakley
03-May-03

对于内容来讲有理想的行宽吗?

引用一段来自 "Web Style Guide - Basic design principles for creating web sites" 的文章.

对于文本布局的理想线长取决于人眼的生理学。在正常的读写距离下，视野的弧度只有几英寸-大约相当于设计良好的文本行宽或者大约每行12字。研究表明，随着行宽逐渐超出理想宽度时，阅读速度开始减慢，记忆率也逐渐降低，因为读者需要使用眼部和颈部的肌肉来从一行的末尾跟踪到下一行。如果眼睛必须遍历页面上很长的距离，那么读者很容易迷失并且必须搜寻下一行的开始。一定量的研究表明，适度的行宽大大提高了文本的易读性。

Web Style Guide - Basic Design Principles for Creating Website
Patrick J. Lynch and Sarah Horton
2nd edition, page 97.

挑战

我想设计一个使用最佳行宽的站点。而且我也想让用户在浏览器上无论设置多大的默认字体时，行宽都能够在一个最理想的区间内。这可能吗？

布局方法

大部分的站点要么使用固定宽度（设置为绝对尺寸），要么使用可变的宽度（设置为屏幕的百分数，这样就可以随着浏览器窗口的大小按比例缩放）。 在考虑到行宽和默认字体大小的情况下，这两种方法都有问题。

如果用户将字体设置为浏览器默认的大小，那么Fixed-width columns可以用来设置理想列宽。举个例子，一个列宽设置为420 pixels。这对于将字体设置为14-16px-浏览器默认大小的用户来说几乎是完美的行宽，但是对于将字体设置的更大或者更小的用户来说就不是那么理想。点距是不考虑字体大小的绝对尺寸。

Flexible-width columns 也有一些问题。你不能控制用户浏览器窗口的大小，因此列宽在每一个用户之间都会有很大的变化。这通常被吹嘘成理想的解决方案，因为用户能控制浏览器窗口的宽度并且自己决定最合适的行宽。对此有两个问题。

第一个问题是当你从一个站点转移到另一个站点时，必须要拖动你浏览器的窗口-尽管这听起来微不足道，但这令人厌倦，更何况用户为什么必须要改变窗口大小才能浏览一个站点呢？

第二个问题是这给用户施加了一种责任。一些用户并不知道能够重缩放窗口，而且认为自己必须阅读很长的一行内容。这并不是理想状况。

一个解决方案

这个解决方案是用 em's来设置列宽. 要理解为什么 em's 能够创建理想行宽，我们必须首先明确什么是 em...

在传统排版中, em被定义为当前位面磅值中大写M的宽度. 在传统上em-dash是大写M的宽度, en-dash是大写M的一半宽度，em quad是一种通常用于段落缩排的单位,是大写M的二次幂。

在屏幕上，em被更准确的定义为当前磅值。举一个例子，在12-point的模型上，em是12磅的距离。 em quad总是这样模型大小的2次幂。因此，12pt的em quad就是12pt 高 x 12pt 宽。

在CSS中, em是一段继承于父元素长度的相对尺寸，如果父元素是BODY，那么元素的大小就取决于用户浏览器的字体设置。因此，在IE浏览器的默认设置中（默认字体大小是16px），1em就是16px。

使用诸如“Lorem ipsum...”的标准文本片段，看起来理想的长度大约是30-35em。这用如下规则表示：

width: 30em;

这样的好处在于此尺寸跟用户的默认字体相关。如果你进入了一个默认字体或大或小的网站，那么列宽总会是在一个相对理想的范围内。

这里有个关于 EM-defined column 的例子。如果你想改变浏览器默认的字体大小（或者点击左边的示例链接），列宽会自动的随着字体大小而缩放。

我并不建议将此应用于导航块或者详细的布局，不过对于实际内容很重要的布局，这种解决方案是很理想的。

更进一步

对以上的讨论更进一步来讲，我们追求的极限灵活性应该是将列宽定义在一个区间内。这允许用户从某种程度上控制行宽，但绝不允许超出适当的读写距离。

这可以用如下规则定义：

min-width: 25em;
max-width: 33em;

这是一个关于 EM-defined column with a minimum and maximum setting 的例子。当然，这种特质并不被一些现在浏览器支持（Internet Explorer for Mac/Window），但是在不远的将来，这将成为一种标准特征。如果你必须要使用IE，Svend Tofte在how to make IE emulate the behavior of max-width写了一篇出色的文章，可以用来参考。

你是如何想的？同意还是不同意？ Send us your comments.

Translations