Hello World
Spiga

为自己打造良好的文章阅读体验

2010-08-24 16:55 by 老赵, 3299 visits

我的上一篇文章是《为读者打造良好的文章阅读体验》,是为广大“作者”所写的,希望大家的文章都能长得漂亮。但无论怎么样,我们作为读者一定还是会遇到大量阅读体验糟糕的的文章,它们可能是一些只重视搜索引擎流量的无良小站,或是很难推动调整的大站、或是审美情趣有所特色的个人站长等等。根据我的个人经验,如果能够为自己打造一个舒适习惯的阅读体验,会让文章阅读的效率更高,甚至心情也能变得愉快放松。现在这篇文章,便是为了广大“读者”朋友写的,如果能够帮助您“爱上阅读”,那便善莫大焉了。

Readability

有时候,您在打开某篇文章之后,是否会感到有些心烦意乱?例如这篇

四处是广告(还是令人厌恶的北大青鸟),还有旁边的相关链接,下方的评论以及其它一些内容,说实话,它们对我来说都是没有太多用处的东西,亮闪闪的反而影响我阅读。其实平心而论,这张页面的格式并不能算是最差(例如字体大小和行/段间距其实还都不错),还有许多站点可谓是点开便觉恶心。但是无论是哪张页面,我们都有办法将其归至一统——注意到图片中浏览器右上方的“R”字样按钮吗?点击之后,页面的主要内容便会被提取出来了,如下:

现在看起来便舒服多了,这便是Readability的神奇效果。

Readablity是一款用于提取页面主体阅读部分的工具,它内置于Safari 5中,也以Chrome插件Firefox插件的形式供用户使用,而IE等其他浏览器也可以直接将主站上的一段脚本加入书签栏,在需要的时候执行这条书签即可。除了去除大量垃圾之外,Readability的功效便是将各种阅读样式进行了统一,我们在习惯了这样的阅读版式之后效率便会有很大提高。

Readability提供了几种不同的样式、边距和字体大小供选择。如果您觉得还不够,也可以进行一些简单的改造。例如对于程序员朋友来说,Readability对于<pre>的各种样式都不适合代码展示。Readability并没有什么特别神奇的地方,无论是主站提供的脚本还是浏览器插件,其实它都是在页面上执行了一段JavaScript,从页面的DOM中找出文章主体部分,然后改造页面而已。JavaScirpt以及样式表等文件都是完全透明的,我们只要根据自己需要进行修改即可。

只可惜,对于少数页面来说,Readability无法正确提取出文章的主体部分。不过这也没关系,已经基本够用了,特殊的页面我们可以使用特殊的办法处理(就不在本文详述了)。

Stylish及Greasemonkey

Firefox下有两个非常著名的插件:StylishGreasemonkey(Chrome中也有对应插件或功能)。Stylish可以让我们在指定URL的页面中自动运用一段样式代码,而Greasemonkey则是自动执行一段脚本。因此从理论上说,任何样式令人不爽的页面,我们都可以将其改造至符合个人口味——只要为其有针对性地编写一段脚本或样式表(甚至仅仅是样式表)即可。当然,为每个站点都订制一番是不可能的,但我们可以先将其进行“聚合”,然后只要统一处理就行了。

最常见的“聚合”工具应该就是Google Reader了,但是我不是很能接受它在文章展现样式上的品味,例如:

首先,它对于浏览器横向区域的利用很不彻底,因为它将一些容器的max-width设为了650px,这让我很疑惑。此外,它的字体太小,行距也显得过于紧凑。这些都是我在上一篇文章里所反对的。由于这个原因,我之前也花费了不少精力来寻找能够和Google Reader同步的客户端工具,甚至有花钱买的冲动,但始终没有找到令人满意的。不过有了Stylish之后,我便可以为这张页面自动添加一些特定的样式:

@-moz-document url-prefix('http://www.google.com/reader/view/') {

    .entry .entry-body,
    .entry .entry-title,
    .entry .entry-likers {
        max-width:none !important;
    }
    
    .entry-main .entry-body {
        font:14px/180% "Trebuchet MS",Georgia,"Times New Roman",Times,sans-serif;
    }
    
    .entry-main .entry-body p {
        line-height:180%;
        margin:12px auto;
    }
}

简单地说,这段代码便是为Google Reader的特定URL引入了改变max-width和字体大小的CSS样式,于是Google Reader的文章浏览界面就变成了:

事实上,我认为浏览器对于常用标签的默认样式往往都很不错,作为阅读来说也是比较合适的。因此做出这点简单的调整,对我来说就已经差不多了。更多的调整,还是等遇上哪篇难以接受的文章再说吧——我不做过早优化。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

20 条回复

  1. infinte
    218.22.21.*
    链接

    infinte 2010-08-24 18:18:12

    你的思路不过哦~ 我现在看文都是用reader,或者adThwart删元素。

    话说在世界杯的时候写了个脚本自己用,把CNTV的视频窗口改成720p

    正在踌躇要不要在我的Typeof.net加入个“raw”页面,打开后只显示文章内容和评论。只用最简单的标记。

  2. 链接

    Lex 2010-08-24 19:24:23

    好,开始下载Safari5 for PC

  3. rexzhou
    58.41.16.*
    链接

    rexzhou 2010-08-24 20:32:44

    iReader插件更帅,直接把后面网页盖掉,前面出现一个电纸书一样的纯文本的阅读界面。看小说极品

  4. 老赵
    admin
    链接

    老赵 2010-08-24 22:42:11

    @rexzhou

    Safari 5就是这种,不过我用下来发现我不喜欢它的默认样式,也懒得修改了……

  5. roy_hu
    71.141.198.*
    链接

    roy_hu 2010-08-25 00:27:50

    我觉得GReader设定宽度是对的,不然在宽屏幕上每一行都太宽,看着也不舒服。

    我喜欢把一些长文章存到Instapaper里,再到ipad里面看。

  6. 老赵
    admin
    链接

    老赵 2010-08-25 01:03:37

    @roy_hu

    “限制宽度”是没问题的,但是在我看来限制成650px就不太好了,因为事实上目前很少有屏幕能宽到令人不适。就我的经验来看,宽度是1000px也是比较舒适的吧,感觉不比普通印刷书籍每行的字数多……当然,我用的字体要比Google Reader的略大一些。

    其实一定程度上也可以这么说,Google Reader的问题是因为“定死了”,如果可以进行一些简单设置,例如只是调整一下宽度和字体大小,那么问题就会好很多了……

  7. Otis
    124.226.153.*
    链接

    Otis 2010-08-25 01:32:21

    iPad的阅读体验非常好,如果是google reader则有个叫reeder的app,非常棒!

  8. 老赵
    admin
    链接

    老赵 2010-08-25 10:05:05

    @Otis

    奇怪Mac上为什么就没有好用的App,唉……

  9. TigerSoldier
    173.224.212.*
    链接

    TigerSoldier 2010-08-25 10:27:20

    Chome 上的 Readability 扩展似乎已经废弃,改成 Readability Redux

  10. kusk
    114.245.149.*
    链接

    kusk 2010-08-25 13:38:11

    解释一下650px:仅论宽度值的话,650px还是更适于阅读的。根据有关于快速阅读的研究,理想的高效阅读方式为视线焦点在每行的中部附近左右震荡,行的最左和最右端只需要余光足以注意到即可,同时视线随着行数的完成而下扫。与之相对比,初识阅读的儿童进行的阅读则是每行从极左到极右端完全逐字扫描,完成之后再“回车”定位到下一行左端。后者问题在于这一回车定位的过程是相当耗费眼球肌肉能量及大脑CPU周期的,而且有可能发生定位错误而需要重定位,这些都会造成阅读速度的严重下降。因此,通常的文本排版,无论是电子媒介抑或传统媒介,都会将行距控制在“眼球无需左右长距离移动,而只须稍微震荡即可掌控全行”的范围内,这个距离与字号、字数无关——想必大家都有一目扫完报纸上“豆腐块”的畅快体验。就普通PC的常用dpi而言600px左右是一个比较合宜的范围。而当宽度较长,譬如达到1000px时,可以实验一下:视线跟踪到行末时余光已经罩不住行首了,稍加体验,就感觉接下来到有一个相当明显的眼球进行“换行”的动作发生:通常是沿着行或者行的空隙参照,一路“滑”到行首,这相当于一个O(N)的定位。但如果宽度合宜,余光能保持罩住整行的宽度的话,就能避免“跟踪行”高成本,直接O(1)定位,同时对于快速阅读者而言稍加利用余光即可捕获两端文字,眼球的水平移动距离从而缩短,改以垂直移动为主,效率将大大提高。

  11. iwinux
    183.15.42.*
    链接

    iwinux 2010-08-25 18:43:30

    试用了一下,感觉 TidyRead (支持FF和Chrome)比 Readibility 好用

  12. iwinux
    183.15.42.*
    链接

    iwinux 2010-08-25 19:40:49

    而且...我在Chrome看GReader的文章时,宽度是自动扩展的啊?? 按 + 号就可以放大字体

  13. FMax
    59.37.15.*
    链接

    FMax 2010-08-26 09:17:15

    试了下Readablity,效果很不错。btw,那篇文章也不错。呵呵,fw给lp看啦

  14. 推荐FeedDemon
    61.131.124.*
    链接

    推荐FeedDemon 2010-08-27 11:09:45

    不知道你用用过FeedDemon 如果没,可以试看看,可以与Google Reader 同步

  15. 老赵
    admin
    链接

    老赵 2010-08-28 01:09:10

    @推荐FeedDemon

    我用Mac的。

  16. 天空蔚蓝
    124.193.198.*
    链接

    天空蔚蓝 2010-09-09 09:01:51

    想问下,我的chrome装的是【 Stylish 开发人员:Jason Barnabe 】把代码复制上去, 我的googleReder 行间距没反应,怎么回事呀!

  17. 链接

    鹤冲天 2010-09-18 20:40:00

    刚装了个 chrome 的插件,感觉不错!

  18. xbeta (善用佳软)
    219.142.76.*
    链接

    xbeta (善用佳软) 2010-09-28 14:38:44

    我一直认为,html应该允许浏览器、用户指定css。 这样,blogger只管发布带语义标签的文章,由读者选用自定义或专业第3方的css展示风格。

  19. HCOONa
    218.9.120.*
    链接

    HCOONa 2010-11-27 16:29:59

    摘要部分的“《为自己打造良好的文章阅读体验》”应该是“《为读者打造良好的文章阅读体验》” 话说最近怎么突然rss刷新了很多篇文章?

  20. missdeer
    122.237.131.*
    链接

    missdeer 2011-02-23 11:09:05

    Mac下也有reeder的,现在是beta

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我