Hello World
Spiga

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

2010-08-24 16:55 by 老赵, 3379 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

21 条回复

  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

  21. 上海装潢公司
    114.95.135.*
    链接

    上海装潢公司 2016-12-10 17:21:34

    失散18年后相认上海装饰公司 男子猥亵殴打女子上海装潢公司 2017节假日安排松江装潢公司 铝厂向黄河排污九亭装潢公司 外卖员强奸案告破上海松江装潢公司 持枪杀人逃12年松江装修公司 赴美嫁网友遭毒打泗泾装潢公司 协警遭狱警鄙视洞泾装潢公司 偷窥如厕反被拍松江装饰公司 阿富汗击毙塔利班上海松江装修公司 曝昆凌录节目呕吐上海装潢

    十大幸福城市出炉九亭装修公司 为偶像直播间炫富九亭装饰公司 老人赚骗子51万泗泾装饰公司 诺基亚手机回归洞泾装修公司 偷6只蓝孔雀吃掉洞泾装饰公司 去厕所需挂如厕牌洞泾办公室装潢 邓超被错认彭于晏公司装潢松江

    男童输血染艾滋新凯家园装潢公司 老人赚骗子51万润江花苑装潢公司 山东失联女已遇害同润菲诗艾伦装潢公司 杨利伟回应敲击声上海装潢设计公司 禁忌浪漫爱情电影《无法触碰的爱》上海装修设计公司 奥朗德宣布不连任上海装修公司 科长被情人举报上海装饰设计公司 曝陈妍希提前当妈同润菲诗艾伦装修公司 高院判聂树斌无罪同润菲诗艾伦装饰公司 孪生姐妹捐遗体金港花园装潢公司 北京公交起火冒烟佘山装潢公司 男学生求婚女老师松江办公室装修公司 退学后烧炭自杀松江厂房装修公司 特朗普提太空政策松江装潢设计公司 校长见证情侣表白漕河泾办公室装修 偷得Note7竟自燃漕河泾厂房装修 打537次110被拘漕河泾装潢公司 落井男童遗体找到漕河泾装饰公司

    新凯家园装修公司 西安约500名直播主播被欠薪 经纪人疑携款潜逃新凯家园装饰公司 润江花苑装修公司 润江花苑装饰公司 金港花园装修公司 金港花园装饰公司 员工被罚当众吃虫佘山装饰公司 北京公交起火冒烟佘山装潢公司 渔民捕到神秘龙虾洞泾办公室装修 宁泽涛奥运前遭罚漕河泾装修公司

发表回复

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

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

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

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

使用Live Messenger联系我