实现一个Web内容片段收集引擎的设想

实现一个Web内容片段收集引擎的设想

现在许多Web内容都不是开放提供的，而是由封闭的社交系统分享的。自动的浏览器爬虫通常爬取这些内容会遇到技术性困难（反爬虫），或者是robots.txt策略阻止。

解决这个问题的思路就是引入人工协作式交互：封闭系统的授权用户可以选取这些封闭Web页面内容中的真正有价值的片段，然后将之复制收藏到另外一个系统（数据库）中。

Web内容片段在数据结构上相当于一棵完整DOM树上的Range指定的Fragment。

但是真正的技术困难在于：如何尽最大可能保留原始内容显示的CSS样式？我通常喜欢把技术博客上的内容复制，然后到另一个html WYSIWYG富文本编辑器中。比如Wordpress、Tower。但在这个过程中，发现一些问题：各个不同的WYSIWYG富文本编辑器能力不同：

（1）Tower的富文本编辑器不支持<table>元素，高级的HTML5 Ruby似乎也不支持；

（2）Wordpress的富文本编辑器在某些情况下抹掉了许多原始CSS样式，一个最奇怪的问题是文本段落的行距扩大了

那么，如何尽可能地“保留原始内容显示的CSS样式”呢？W3C还不支持Scoped
CSS（并且似乎也不打算支持），假如支持Scoped CSS的话，倒是可以反向查找DOM Fragment中每个Element元素被实际应用到的CSS Rule，并且重写提取。

在没有Scoped
CSS的情况下，也许可以使用嵌入iframe元素作为wrapper包住DOM Fragment的方法？iframe中再使用一个style元素。

最后可以考虑把所有CSS
style全部内联到DOM Fragment中的每个Element元素上。但这个方法会显著增大数据量。因此需要一种智能的方法去除某些不需要设置（实际上是UserAgent默认的样式定义）

技术调查困难点：

UI交互（移动设备适配）：不是基于TouchMove拖放选择一个Range，而是直接通过Touch/Press指定start/end Position来选择一个Range
根据DOM Range中的每个Element，以及原始网页的全部CSS定义，重新提取/重写出实际应用到的CSS样式
实际上这里倒是可以参考Chrome for Android的OfflinePages模块的相关代码，尤其是根据Element反向查找对应的CSS规则。

CSS提取过程的优化：考虑元素之间CSS样式的inherit关系（*1）、UserAgent默认样式（*2）、以及忽略对实际可视效果影响不大的样式（*3），进一步减少CSS样式的数据量
复制出的DOM Fragment是否可能通过放到一个额外的iframe元素中，做到“Scoped CSS”所设想的CSS隔离效果？？？

触摸屏设备上的拖放操作并非不能用来选择DOM内容片段，但是它有一些额外的问题：

（1）某些触摸设备的硬件驱动有bug，导致touchmove过程中会产生一个touchend/cancel，导致前面选中的Range内容状态被清除了；

（2）网站本身可以使用CSS user-select:none; 或者JS event.preventDefault()来阻止默认的内容复制行为；

（3）拖放超过一个屏幕的viewport范围时，有时候不会触发自动的向下scroll，造成可用性问题；

（4）要选择的文字图文混排内容如果上面添加了一个图层，或者包含在一个<a>元素中的情况下，会导致浏览器内核的HitTest逻辑出问题；