构建一个网络阅读辅助工具：行选择器

Question

我一直在尝试制作行标记脚本来帮助我在线阅读文字。当我读书时，我总是使用尺子或纸张。在线，我没有这个选项，通常会迷失在文本中。

W - move div up
S - move div down

JS fiddle for my current effort (S = down, W = up)

我能想到的最好的事情是所有文本元素的行高相等，但是造型很难。此外，我希望能够在控制台中运行它以在任何网站上启用它（或将其安装为附加组件）。

有没有更好的方法来设计这样的工具，使其更有能力并适应未知内容？

• 我当然可以选择文字而且我做了很多。通常，它导致我只选择一些单词 - ＆gt;关注这个词，这是我想要避免的。
• 我也可以使用辅助窗口，有时我会这样做。但它有点不稳定，一旦你点击它就会消失。
• 跟随鼠标指针的div是可能的，但它太摇晃了，感觉就像被卡在手指上的东西。

编辑：我更新了改动的小提琴。我保留了javascript，因为如果没有它，你将无法将标尺移动到文本的下半部分。 Updated reading-ruler

Answer 1

您可以为.ruler设置position: fixed而不是JavaScript。它将始终保持在同一个位置，因此您可以使用其下方的.ruler元素阅读文本。

这是jsFiddle。 http://jsfiddle.net/RxDpP/1/